HTML Table Basics

By Stephen Bucaro

Html tables aren't used just to display data. Use of an html table has become the most common method used for general webpage layout. Style Sheets can provide much more accurate web page layout, but the implementation of style sheets between different browser versions is inconsistent. So let's review html table coding basics.

You can follow along by using the Windows Notepad program to create a text file and type in the text indicated. After you save the text file, change the file extension to .htm and then double-click on the file name to bring it up in your Web browser.

The primary component of an html table is the "table data" element, represented by the <td></td> tag pair.

The table data tags enclose a single cell of the table. This cell may contain text, graphics, forms, or anything else, including entire Web pages. Understanding html tables would be much easier if the tags used were <tc>></tc> because you also create a table column when you use the table data tag pair.

If you use two pairs of tags, you create two columns. For example the html code below creates two columns, one containing the text "cell 1" and the other containing the text "cell2".

<td>cell 1</td><td>cell 2</td>

Table data columns cannot actually be coded as shown above. They can only exist within a table row. The tag pair <tr></tr> encloses a table row. So the table code would actually appear as:

<tr><td>cell 1</td><td>cell 2</td></tr>

You can have as many cells as you want in a table row, and you can have as many rows as you want in a table. In order for this code to actually work, it must be contained within a <table></table> tag pair.

The complete code for a table with two rows, each containing two cells is:

<table>
<tr><td>cell 1</td><td>cell 2</td></tr>
<tr><td>cell 3</td><td>cell 4</td></tr>
</table>

This code creates the table shown below:

cell 1	cell 2
cell 3	cell 4

This code could be written on a single line, or you could place a tag on each line of your file. Either way will work but the secret to being able to debug your html tables is to format your code consistently.

Before I show you a preferred method to format your code, let's look at the case of a table where the number of cells in each row is not the same. A table with two cells in the first row, and one cell in the second row would be coded as:

<tr><td>cell 1</td><td>cell 2</td></tr>
<tr><td colspan=2>cell 3</td></tr>
</table>

The code above creates the table shown below.

cell 1	cell 2
cell 3

Note the attribute contained within the <td> tag for the second row cell, colspan=2 defines the cell as spanning two columns.

Similarly, the code below has a <td> tag with a rowspan=2 attribute to define it as spanning two rows.

<table>
<tr><td rowspan=2>cell 1</td><td>cell 2</td></tr>
<tr><td>cell 3</td></tr>
</table>

The code above creates the table shown below.

The rowspan and colspan attributes can be very tricky to use. You should always make a test table before putting a table using these attributes into a design. Take the code above and experiment by putting in different rowspan and colspan attributes to see how it affects the layout.