Table vs. Divs for Web Page Layout
The options that Web designers have to set up layout for a Web page are somewhat limited. For long time the only option for Web designers was the Table tag and for many Web designers that is the primary tag to make pixel perfect layout. The Div tag is newer and is more suited to set up layout on a Web page than the Table tag, but it is trickier and requires more thinking and pixel calculating.
A common view is to use the Table and associated tags for tabular data and to use Div for everything else. This use, for example, makes it easier for Web users with accessibility limitations to read and interpret content.
The new Html standard, Html 5, has additional options for Web designers to describe layout and content and differentiate between data and text, but until the new standard becomes a mainstream, Web designers have to live with Tables and Divs.
The data below shows comparison on the usage of the Table tag and Div obtained from two large samples: general and Web sites having favorable search engine positions.
| Table and Div: General Web Sites | |||||||
|---|---|---|---|---|---|---|---|
| Observed Element | % Found | Average | Min | Max | Median | 80 Percentile Range | |
| table | 67.30 | 14.30 | 1.00 | 301.00 | 33.67 | 1.33 - 38.97 | |
| td | 67.16 | 65.79 | 1.00 | 1,263.00 | 279.83 | 4.52 - 156.83 | |
| tr | 67.30 | 36.12 | 1.00 | 557.00 | 103.67 | 2.20 - 89.15 | |
| thead | 1.29 | 1.17 | .00 | 4.00 | 1.17 | .83 - 1.50 | |
| tfoot | .83 | 1.17 | .00 | 4.00 | 1.17 | 1.17 - 1.17 | |
| tbody | 12.01 | 4.47 | 1.00 | 76.00 | 2.83 | 1.00 - 11.83 | |
| div | 93.88 | 65.17 | 1.00 | 870.00 | 58.50 | 13.03 - 144.52 | |
| Table and Div: Web Sites in Favorable SE Positions | |||||||
|---|---|---|---|---|---|---|---|
| Observed Element | % Found | Average | Min | Max | Median | 80 Percentile Range | |
| table | 79.90 | 12.82 | 1.00 | 211.00 | 14.71 | 1.54 - 28.41 | |
| td | 80.16 | 57.60 | 1.00 | 828.00 | 57.29 | 5.54 - 131.26 | |
| tr | 80.04 | 32.02 | 1.00 | 331.00 | 36.00 | 3.14 - 75.84 | |
| thead | 1.36 | 1.18 | .00 | 4.00 | 1.00 | 1.00 - 1.57 | |
| tfoot | .14 | .14 | .00 | 1.00 | .14 | .14 - .14 | |
| tbody | 14.72 | 4.10 | 1.00 | 48.00 | 6.43 | 1.00 - 10.66 | |
| div | 89.74 | 50.17 | 1.00 | 847.00 | 46.43 | 2.59 - 130.49 | |
The data shows that the Div tag is much more frequent than the Table tag and probably most Web sites use both tags. What is interesting with these results is very few Web sites use the option of describing the Table structure by using Thead and Tfoot tags while slightly more use the Tbody tag.
Related links:
