##HTML Design Principes ##Tables - For data rendering - Not for data structuring
##Explanation
- Tables have been part of HTML almost since HTML began. The idea was to make it possible to display tabular data, equivalent to a spreadsheet.
- This purpose is still valid. Using tables for tabular data is perfectly standards-compliant and makes a lot of sense from an accessibility standpoint.
- HTML tables should only be used for rendering data that belongs naturally in a grid, in other words where the data describe a number of objects that have the same properties.
- As the internet progressed and as people started doing more things online, designers started using tables to create multi-column website layouts.
- This was never the intention of those who created HTML standards, but it quickly caught on and table-based layouts became the norm online.
- Tables are less flexible than divs - Table contains different tags: the table tag being the wrapper, tr for each row and td for each cell. For readability, each tag is normally given its own line of code, with indention. Any developer maintaining that page in future has to go through a lot of code to understand its structure.
- Nested tables are code smell that a website is stuck in table hell. The number of lines of code is endless, and the complexity is overwhelming. Tables are far from clean code and don’t bring anything semantic to the content unless you’re dealing with actual tabular data.
- Excess code slows down development and raises maintenance costs. More lines of code mean larger file sizes, which mean longer download times. Because tables increase the code base, such structures likely contain more bugs than layouts with less code lines.
##Recommended
- HTML tables should only be used for rendering data that belongs naturally in a grid, in other words where the data describe a number of objects that have the same properties.
- Tables should be used whenever you have tabular data to display.This could include charts of data or statistics, as well as things like price charts, product lists etc.
- Use CSS for layout, it has its own advantage over tables as explained in the following example.
##Not Recommended
- Tables are semantically incorrect markup for layout.
- Tables prevent certain layouts from working within them (like height:100% for child elements of td tag).
- Tables make life difficult for those using screen readers.
- Tables lock you into the current design and make redesigns much harder.
##Example
To make html tables :
index.html
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td colspan="3" height="120px">....</td>
</tr>
<tr>
<td class="menu" valign="top">...</td>
<td class="content" valign="top">...</td>
<td class="aSide" valign="top">...</td>
</tr>
<tr>
<td colspan="3">...</td>
</tr>
</table>
</table>To make css work like tables :
index.html
<div id="header">...</div>
<div id="menu">...</div>
<div id="content">...</div>
<div id="aSide">...</div>
<div id="footer">...</div>##Further Readings