| The craft of website design is not to be taken lightly | | | | and many modern-day designers automatically |
| - there are many different techniques and | | | | connect "table design" with the term "outdated". This |
| approaches for designing the website. The prominent | | | | approach is more advanced and allows you to have |
| ones are with the use of tables and by using CSS. | | | | more creative freedom - changing the way |
| This article will review the differences between these | | | | paragraphs look does not require you to change |
| approaches, including the pros and cons of each. | | | | every paragraph manually, you just tweak around |
| Tables - background | | | | the very definition of a paragraph. If I want, let's |
| The use of tables for website design was introduced | | | | say, to have my headers bold, red and bigger, I just |
| back when websites became graphic. Most computer | | | | have to change the definition of a header in my |
| users are familiar, more or less, with the concept of | | | | external CSS file, and all headers will be automatically |
| placing data in tables from the usage of Word, Excel | | | | affected. This means lesser code, as the settings are |
| and such. | | | | saved once, which results in a faster website. |
| A table enables you to define the number of rows | | | | As mentioned before, using CSS allows you to use |
| and columns, merge and split specific cells, define | | | | different design for any browser, making your |
| measurements for each element regardless of other | | | | website browser-compatible and allowing |
| elements. | | | | non-standard users to see your website the way |
| As soon as people had learned to hide the border, | | | | you meant them to. |
| thus concealing the fact they are actually using | | | | The biggest con is derived from the very definition |
| tables, this practice gained rapid popularity. | | | | of this approach - it's a language, a state of mind to |
| Despite the popularity, use of tables is considered | | | | be learned. The work is unintuitive for designers who |
| "outdated", even though most websites still use it. | | | | haven't sat down and studied this craft. As opposed |
| Table usage - pros and consAs aforementioned, the | | | | to the common approach of "WYSIWYG" ("What |
| biggest advantage of table usage is the intuitiveness | | | | you see is what you get"), working with CSS |
| of this practice. Placing an image next to the text is a | | | | happens "behind the curtains" by definition - writing |
| breeze - just create a table with one row and two | | | | textual design settings without being able to see the |
| columns, the wide one for the text and the narrow | | | | effect until the file is uploaded. It would require you |
| one for the picture. Alternatively, create your own | | | | to have average understanding of HTML code at the |
| hand-made menu by creating a table with many cells | | | | very least, and you should be prepared to work in a |
| in a single row or column and fill them with text, | | | | code-based interface, so forget about your cozy and |
| picture or even flash buttons. What if you want to | | | | familiar interface right away... definitely not for |
| design each cell separately? No problem! Tables allow | | | | beginners! |
| that, because every cell is an independent entity, able | | | | Also, CSS designers must be aware that their target |
| to accept its own settings. You can set general | | | | audience consists of users that use updated |
| settings for your rows, and all cells would be | | | | browsers only. Even though most home users |
| affected. | | | | already use the latest version of their favorite |
| It's a mixed blessing, as this separation of elements is | | | | browser, many corporate users have not made the |
| reflected by a bloated code, making your page | | | | change yet, and are still using software that doesn't |
| "heavier". This has negative implications, such as | | | | render CSS properly. |
| slower access, lower search-engine rating in | | | | So what's best?The million-dollar question. |
| comparison with faster websites... | | | | A professional web-designer, by definition, would |
| Another disadvantage is that the contents becomes | | | | warmly recommend the strict use of CSS, and he will |
| an integral part of the design. You can't modify the | | | | probably be right. It's an advanced technology that |
| table without having to move the data away first. | | | | grants more freedom, enhanced compatibility and |
| It's tolerable when speaking of a small website, that | | | | makes it easier to make changes in the future. |
| was built with the efforts of one person, but when | | | | A beginner would recommend the common terms |
| speaking of a larger website with many people | | | | that are familiar from computing - easy to use, |
| updating it, each of them will have to learn the | | | | intuitive, simple tables. |
| proper way of construction. | | | | Most websites are still table-based, so it is highly |
| CSS divisions - backgroundThe CSS language has | | | | unlikely that tables will become unsupported anytime |
| been enjoying a rise in popularity as a supplemental | | | | soon. still use tables, and they do not suffer from |
| language to the traditional HTML - causing it to | | | | any SEO penalty or a lacking PR... |
| become more and more relevant to site design. | | | | The balance is somewhere in between, in accordance |
| In a nutshell, this approach introduces "containers" - | | | | to the level of the builder. |
| usually, 'div' tags - and placing the contents inside | | | | If you're new to this field, go ahead and use tables. |
| these containers. If my text is placed in a container, I | | | | It will be easy for you, and you can still reach |
| don't have to touch the text to change it, I just | | | | sophisticated results with a cunning use of table |
| tweak around the container's settings. | | | | placement. |
| This approach is the pinnacle of the idea that | | | | If you're an experienced designer, you will probably |
| contents should be separated from its design, as the | | | | refrain altogether from using tables and will strictly |
| design could be changed (for example, when viewing | | | | use containers. That's fine too, as long as you know |
| with different, unorthodox browsers) but the | | | | what you're doing - do it. |
| contents should remain the same. For example, if I | | | | You can also compromise, and go for both. Tables |
| 'teach' my website to figure if a visitor is using a | | | | can be applied with CSS styles, too! If you're |
| cellphone to view my website, I can guide it to load | | | | designing a website for someone, allow them to |
| a specific design for that visitor, obviously lighter and | | | | create tables, then apply a design on top of the |
| phone-optimized, instead of hoping that the mobile | | | | tables. |
| browser is advanced enough to interpret my website | | | | The approaches are not in a state of war with each |
| correctly. | | | | other, despite the fact that designers enjoy to make |
| When working with CSS classes, there would usually | | | | it look like they are. |
| be a single design file with all of the settings (one can | | | | In any case, choose what feels right for you, and |
| imagine a cookbook), and each element draws only | | | | express yourself best with the tools you are familiar |
| the needed setting (or, recipe) for itself. | | | | with! Forced design always looks worse, regardless |
| CSS usage - pros and consThis approach is | | | | of the technology used... |
| considered the successor of the table-based design, | | | | |