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 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).
More HTML Code:
• Set Form Controls Tab Order With tabindex Attribute
• Adding Space Around an Image
• HTML Text Tags Basics
• How to Troubleshoot an HTML Table
• HTML Image Basics
• Easy Code to Add Bing Site Search to Your Website
• HTML5 Input Type - URL
• HTML5 role Attribute
• Use fieldset to Organize Form Elements
• HTML abbr and acronym Tag
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
