Why Nested Tables Are Bad

Using nested tables may seem like the easier route to take when designing a website, but they are not recommended for a number of reasons. First, they require a longer load time which will effect your overall page load . The longer your page takes to load, the more likely someone will go elsewhere. Second, tables can also cause issues for screen readers (those with vision difficulties) and the printing of your pages.

The most important reason however on why you should not use a nested tables is simply because it is not flexible. The world is now mobilized, meaning that mobile devices (tablets, cell phones, netbooks) are being used to access your website and when using a nested table, these devices will have a difficult time displaying complex table structures in their limited viewing area.

Using CSS is actually the better route to take as it is universally supported and offers greater flexibility. It allows you to define a printable area, accommodate accessibility (screens readers) and make changes in a much faster way.

Nested Table Example

<table>
<tr>
<td>First cell in first table. The cell to the right has the second table in it.</td>
<td>
    <table>
    <tr><td>nested table</td></tr>
    <tr><td>nested table</td></tr>
    </table>
</td>
</tr>
</table>

Using CSS Instead

<style>
th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica,
sans-serif;
color: #6D929B;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA url(images/bg_header.jpg) no-repeat;
}
 
th.nobg {
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
}
th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff url(images/bullet1.gif) no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica,
sans-serif;
}
 
th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa url(images/bullet2.gif) no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica,
sans-serif;
color: #B4AA9D;
}
td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 6px 6px 6px 12px;
color: #6D929B;
}
td.alt {
background: #F5FAFA;
color: #B4AA9D;
}
</style>

<table id="mytable" cellspacing="0" summary="This is a CSS Table">

<caption>This is a CSS Table</caption>
<tr>
  <th scope="col" abbr="Title" class="nobg">Title</th>
  <th scope="col" abbr="Header 1">Header 1</th>
  <th scope="col" abbr="Header 2">Header 2</th>
  <th scope="col" abbr="Header 3">Header 3</th>
</tr>
<tr>
  <th scope="row" class="spec">Cell</th>
  <td>Cell 1</td>
  <td>Cell 2</td>
  <td>Cell 3</td>
</tr>