TABLE vs DIV(ision) – How (not) to use TABLE tag

I have seen many “great” developers/designers talking about TABLE vs DIV(ision) tags. Most of them who consider themselves knowledgeable, aggressively believe that TABLE MUST NEVER be used. They even use DIV tag for tabular content/data! I think they are lacking proper knowledge of CSS and HTML. Let’s see how.

A brief history first: TABLE vs DIV battle was started when designing and CSS was in very early stage. Many developers/designers were using TABLE for designing structure/layout of HTML page. In a table, there were mainly 3 rows. In the first row, header (logo and main navigation menu) part was written. In the second row, there were content part with optionally (primary (if not included in header)/secondary) navigation menu. And in the last row, there was footer (links to terms-of-use, privacy-policy, contact-details, copyright-notice, etc.) part. Now this whole structure/layout was done using TABLE tag which was obviously inappropriate.

However, now things have changed a lot. New CSS options are available since CSS v2.1 using which we can create TABLE like interface using DIV, and DIV like interface using TABLE. Although, still I am strongly against of using TABLE for designing page’s outer structure/layout.

Let’s see how to -and- how NOT to use table. (There should be FORM tags in the below examples, but I have ommited them for simplicity.)

How NOT to use table (very old style):


In the above example, outer TABLE tag is used to structure different parts of an HTML page. This must be avoided. Use DIV or new HTML5 tags, as mentioned in the below example to achieve the same.

How to use TABLE:

Another way – how NOT to use TABLE:


In the above example, to make the table compact, the form inputs are divided into 2 columns. However, it is good to make content compact and divide into multiple columns, but the way used here is not proper. Taking table into another table should be avoided for structuring layout.

Here is the proper way to make it look the same:

This is era of mobile browsing. Many are avoiding table because table messes the design when viewed in mobile. This happens because the TDs/THs of TRs tries to stay in their rows which results in condensed content. To avoid this developers/designers are using DIVs for even tabular content. The above example can be displayed linearly in mobile browsers if just proper CSS is applied (yes, just CSS, without changing anything in the above HTML code), and this is not hard:

By default TABLE, TR, TD, TH, THEAD, TBODY, TFOOT and other table related tags have their own special “display” types. The DIV tag has “block” as its display type; similarly TABLE has “table”, TR has “table-row”, TD & TH has “table-cell”, THEAD has “table-header-group”, TBODY has “table-row-group” and TFOOT has “table-footer-group” as their “display” type styles. So, the whole above table can be constructed without using any TABLE tag, or say with using any single/multipel tag(s) and by just applying appropriate CSS. Take the following 2 examples:

Designing table using multiple tags:

The above example is demonstrated using BLOCKQUOTE, P, LABEL and SPAN tags instead of using TABLE, TR, TH and TD respectively. Same way we can construct a table using only DIV tags:

So, I think now it should be clear in your mind that when & where to use TABLE & DIV and when & where to avoid TABLE tag.


Rate this article

0 votes, 0.00 avg. rating (0% score)