How to Troubleshoot an HTML Table

By Stephen Bucaro

The most common problem with tables is the table being unexpectedly stretched way out of proportion. The most common cause this a line of text, possibly the text for a link, that contains no spaces that the browser can use to implement a line break. Remember the value that you specify in a table's height or width attribute controls the MINIMUM size. A table cell will stretch to contain whatever content that you place inside the cell.

Another common problem with tables is cell contents not being positioned the way you want them to be. By default, content is positioned in the center of the cell. You can add the align attribute to a cell's td tag, and assign it the value left, center, or right to position the cell's contents horizontally. You can add the valign attribute to a cell's td tag, and assign it the value top, middle, or bottom to position the cell's contents vertically.

Although the align and valign attributes are supported in all major browsers, they are not supported in HTML5. You'll need to either make sure your DOCTYPE specifies an HTML 4.0 DTD or use the CSS text-align and vertical-align properties instead.

Another common problem with tables not being displayed the way you want them to be is caused by missing or extra <tr></tr> or <td></td> tags. Unfortunately most WYSIWYG webpage design tools through in tons of extra tags and make no effort what-so-ever to format the html code. The only way to solve this problem, is to get into Code View and format the code manually. The table's tags should be formatted as shown below.

<table>
  <tr>
    <td>
      Cell Contents
    </td>
    <td>
      Cell Contents
    </td>
  </tr>
  <tr>
    <td>
      Cell Contents
    </td>
    <td>
      Cell Contents
    </td>
  </tr>
</table>

Note that all the tags are moved to the left side of the page and specific tags are indented to clarify the structure of the table. The text that is most indented is the contents of the cells. Also note how the opening and closing td tags are nested withing the opening and closing tr tags. This allows you to identify the table structure tags to make sure missing or extra <tr></tr> or <td></td> tags.

Unfortunately, with most WYSIWYG webpage design tools, your formatting will be destroyed the moment you close the Code View window.

Another problem with WYSIWYG webpage design tools is that they like to throw in <br /td> tags (line break) and &nbsp; tags wherever they feel like it. This adds possibly undesirable space within a table cell. One way to fix this problem is to, again, get into Code View window and delete those extraneous tags manually.

Another way to troubleshoot a table is to temporarily give the table tag a border="1" attribute. This allows you to see the cell borders. Then after you have the table looking the way you want, set the border="0".

One way to prevent html table layout problems to begin with is to first code a table, where each cell contains text to identify the cell and give the table tag a border="1" attribute. Then add each cell's contents, one cell at a time, and view the results of each addition. Then when something goes awry, you'll discover it immediately and you'll know precely where the code that caused the problem is located. Then after you have completed the table and its looking the way you want, remove the cell identifying text and set the border="0" (if desired).

RSS Feed

 Follow @Stephen Bucaro

 General Web Design
 HTML Design
 Graphics Design
 CSS Quick Reference
 Easy Cascading Style Sheets
 Java Script Quick Reference
 Easy Java Script Code
 Web Design Tools
 Coding Issues