There has been a metamorphosis in the field of web design and web development ever since the impact of web 2.0 technology. Developers started shifting to more flexible and user friendly techniques which are compliant to web standards.
When we talk about web development, the only thing which strikes many web developers is whether to use divs or tables in their web layouts. Websites that are developed today are more inclined towards the div-based structures rather than a table based structure.
Tables and DIV’s are an intrinsic part of web design. Web developers have decreased the usage of tables and made a gradual increase in DIV usage to reduce the complexity in coding and increase semantic standards in their layouts.
We have made an attempt to discuss some of the common problems encountered in web design. We shall divide the article into 3 major parts and discuss in detail. The first part would give a brief introduction about the design basics of tables and divs. Second shall discuss on CSS and tips on writing clean and semantic code and the final part shall discuss their pros and cons.
Click here to know more about Markup
What is a Table?
If you are a web designer, the chances of implementing tables in your layout may be plenty. Tables are useful for superior adjustment of data and aligning text and graphics. General syntax of a table starts with <table> and ends with </table> element. Tables are modified using various attributes such as ALIGN, BORDER, CELLPADDING, CELLSPACING, WIDTH etc… The tags <tr> and <td> are useful in defining each cell of a table.
It would be easier to understand, if we imagine a table as an excel sheet. The entire spreadsheet would be in horizontal and vertical rows. Rows start with numbers and columns start with alphabets. A combination of each row and a column would form a cell (A1). In order to incorporate a similar feel on web pages with advance attributes, we use tables.
For more information on the usage of tables, please check these links:
HTML Tables
This is a reference website and a warehouse of all tutorials on different languages. It provides a lucid way of learning HTML tables.
HTML Goodies
This website clearly explains the various parameters used in tables with examples.
Let us consider a simple example to understand a table structure.
<table border=”1″>
<tr>
<th>Heading</th>
<th>Another Heading</th> </tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td> </tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td> </tr>
</table>
If the concepts presented in above portion seem confusing, look over the sample code again. It shouldn’t be too hard to figure out what’s going on!
What is a DIV?
Division tags are block-level elements which appear as rectangular blocks with specific height and width on a web page. They are used to divide the content of webpage and apply independent formatting. They can be used to enclose paragraphs, headers and other block elements.
<div> tags when used with style sheets is commonly referred as Cascading Style Sheets. They allow website to be independent of data. Document layout, height and width of columns or rows, adding colors; adjusting the font family, font size, adding images, using additional attributes to align the web elements can all be done by editing a single style sheet.
We added some useful information on CSS on the later part of this article.
We can style each <div> tag differently to suit the layout. For example:
<body>
<div>Which is the best</div>
<div>Divs or Tables?</div>
</body>
This is just an instance to know the advantages of using divs in place of tables. Developers have more scope in styling the attributes rather than using plain tables.
What is CSS?
CSS (Cascading Style Sheets) is a technique of styling almost every web element found on web. This programming technology helps the web developers to format and style the web pages according to the semantics prescribed by World Wide Web Consortium (W3C). It would be apt to compare CSS with an onion, since CSS allows the web designers to layer the style sheets upon one another just like the overlapped layers of onion.
They can be used to define almost any web element. It is both the code and the principle which teach the user upon how to use it. CSS provides enhanced formatting options when compared to HTML. You can integrate various options and advanced features to fine tune the web layout with rich look.
Why CSS?
CSS is given the top priority when it comes to web designing. It has now became an industry standard for a number of reasons. CSS coding enhanced features allows cross browser compatibility to a certain extent and it also helps the user and the developer to view the page in the same way, how the developer has developed the layout. The cross browser compatibility is still an intrinsic issue as the developers are making their continuous advancements in a marathon race of web development.
More info:
CSS Magic Ultimate Guide
This site is a quick reference with all CSS tricks and magic. It also provides useful methods on using various elements in CSS.
Linux Magazine CSS Guide
This site helps you to polish CSS programming with a crash course. It is also available in pdf format.
Should we avoid excessive div usage?
Yes, it is a good practice to avoid divs wherever they are not required. Using block elements such as menus, lists, paragraphs, and forms can be helpful to evade from divs. One can also use plenty of <h1> to <h5> tags or <ul> and <ol> tags to describe the content.
More info:
Click this link to know more about excessive div usage
This website teaches techniques to avoid unnecessary divs to mark up a page.
Advantages and Disadvantages of Tables and DIV’s
Tables:
Pros:
- Tables are simple to use and easy to implement when compared to the coding aspects of CSS <div>.
- Tools such as Dreamweaver and Microsoft FrontPage help the user to create tables with minimum labour.
- Even old browsers support the concept of tables; thus it overcomes the cross browser compatibility issues.
Cons:
- Tables are not flexible when compared to CSS web layouts.
- They increase the size of the code and it would be difficult for developers to identify bugs.
- Webpage’s built with tables consume more time in rendering the content.
More Resources:
Click here on the usage of tables in web development.
DIVS
Pros:
Faster download:
<div> based websites are light weighted and renders faster on web browsers. Usually most of the table structures are nested and have larger file size. Upon the application of CSS, div tags are much lighter and easy to download.
SEO friendly:
Websites that are designed using CSS are search engine friendly. Optimisers can make use of meta information as Google uses complex algorithms. Writing and having a clean code is also very important, as it would help the web crawlers to read the content and fetch traffic.
Bandwidth:
Websites using <div> tags have smaller file size making them easier to download. It is a good process to compress the webpage when it is expecting high amount of web traffic. This amount of saved bandwidth could be significant over a period of time.
Maintenance:
As we use a single CSS file to alter changes on all webpages, lot of time is saved. Making modifications in CSS file shall reflect on all pages where this CSS file is incorporated. Thus it is simple to maintain and easy to use.
Cons:
Thorough knowledge on CSS:
Websites using <div> tags are manually coded. Developers need to have good understanding of CSS coding skills as they may not achieve semantic coding just by using tools such as MS FrontPage and Dreamweaver.
CSS Validation:
CSS properties such as padding and margins are interpreted in a different way by various web browsers. Necessary W3C standards should be followed while coding CSS.
Click this link for CSS validation
Diligence:
<div> based coding takes more time when compared table based websites. Designers need to be patient and conscious about the code syntaxes and proper closing of tags.
The argument in between tables and divs is just like selecting couch or bed for sleep or using an axe or a saw to cut down a tree. Even though both are used to accomplish the same job, same things can be done in different ways.
If you use a fluffy couch to sleep, then you may end up with neck and body pains by the time you wakeup. Similarly, if you choose an axe to cut down a tree, you may need to burn all your calories and still there is no guarantee that you would be able to finish it in a day! In the same way, tables and divs each have individual importance. Designing a website using <div> tags is always profitable when compared to table based design. The strong reason to choose DIV’s over tables would be the application of CSS.
[...] more: DIV v/s Table based design Tagged as: abrazos-post, algunos-importantes, ever-since, field, foros-discut, impact, lea-sobre, [...]
[...] Go here to read the rest: DIV v/s Table based design [...]
[...] There has been a metamorphosis in the field of web design and web development ever since the impact of web 2.0 technology. Developers started shifting to more flexible and user friendly techniques which are compliant to web standards. When we talk about web development, the only thing which strikes many web developers is whether to use divs or tables in their web layouts View original here: DIV v/s Table based design [...]
[...] 16, 2009 DIV v/s Table based design – templateworld.com 07/15/2009 There has been a metamorphosis in the field of web design and web [...]