Problem with HTML tables?

HTML Tables can be frustrating, they require a lot of HTML[Define] to make and if you don`t close a <tr> or a <td> your whole page layout can fall apart.

An easy way to identify the problem is by displaying the borders of the table, this often highlights the cause of the HTML table problem. To do this add the following code to the opening <table> tag...

border="1"

Other ways to solve HTML table problems

If the above technique doesn`t help, make sure you have closed all <tr> and <tr> and they are ordered correctly. Now this might seem obvious but it is the number one reason for HTML table problems. This also can be quite a task if you have a large HTML page, so this is probably a good time to format it so you can read it easily, like this...

<table>
<tr>
<td>Table cell contents goes here</td>
<td>Table cell contents goes here</td>
<td>Table cell contents goes here</td>
</tr>
<tr>
<td>Table cell contents goes here</td>
<td>Table cell contents goes here</td>
<td>Table cell contents goes here</td>
</tr>
</table>

Formatting your HTML like this will allow you to spot problems in your table code because you can see where new table rows start and finish without actually having to read the code.

The reason HTML tables can be problematic is they are often used to produce a web page layout, when they were actually designed to display rows of data, for example a table of sports results. The most effective way to make a web page layout is using CSS[Define].

Learn more about CSS.