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:

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.

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.

One way to make a test table is to add a border attribute to the table so that you can actually see the cell borders. For example <table border="1">. Then when you are ready to put the page containing the table into production, you can remove the border attribute if you prefer.

<table border="1">
<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 with cell borders shown below.

The Rules Attribute

The rules attribute allows you to set the display of verticle or horizontal borders between the cells in a table.

<table rules="cols">
<tr><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td></tr>
<tr><td>Cell 4</td><td>Cell 5</td><td>Cell 6</td></tr>
<tr><td>Cell 7</td><td>Cell 8</td><td>Cell 9</td></tr>
</table>

Above: The rules attribute set to cols

<table rules="rows">
<tr><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td></tr>
<tr><td>Cell 4</td><td>Cell 5</td><td>Cell 6</td></tr>
<tr><td>Cell 7</td><td>Cell 8</td><td>Cell 9</td></tr>
</table>

Above: The rules attribute set to rows

Note: The rules attribute set to all is the default value. The rules attribute set to none has the same effect as setting the border attribute to 0.

Table Code Formatting

Because table cells can contain a large amount of text and images, you should not just enter the table's tags inline into the html code as required. Defining and troubleshooting tables will be much easier if you keep all your table tags to the left margin of your html and format your webpage's code using indents 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>

Any variation of this format is also good. The point is to keep all your table related tags to the left, the first thing on a line, so that you don't have to search for them in the html code. This will make it much easier to edit or debug your tables.

Adding a Title to a Table

You can add a title to a table by simply placing the title text in a paragraph element directly above the table. However, using that method, the title text may not be the same width as the table. The caption element can be used to provide a title for a table.

<table border="1" width="200">
<caption>
Table Caption or Title
</caption>
<tr>
  <td>Cell 1</td>
  <td>Cell 2</td>
  <td>Cell 3</td>
</tr><tr>
  <td>Cell 4</td>
  <td>Cell 5</td>
  <td>Cell 6</td>
</tr><tr>
  <td>Cell 7</td>
  <td>Cell 8</td>
  <td>Cell 9</td>
</tr>
</table>

Using the caption element will cause the title text to be the same width as the table. You can use only one caption element, and it must be placed directly after the opening table tag, before the first table row tag.

Troubleshooting Tables

One common problem with tables, is the table being unexpectedly stretched way out of proportion. The size that you specify in a table height or width attribute specifies the MINIMUM size. A table cell will stretch out to go around whatever content that you place inside a cell. The most common cause of a table stretching out of proportion is that a line of text, possibly the text for a link, that contains no spaces that the browser can use for a line break.

One 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".

Browsers opperate on the principle of horizontal flow, the page is layed out in horizonal rows. The browser sometimes gets confused when you ask it to do anything involving vertical layout, for example when you use the table rowspan attribute.

One way to design a table is to first code an empty table, where each cell contains only text to identify the cell and give the table tag a border="1" attribute. Then after you have the table looking the way you want, replace the cell identifying text with the final contents of the table and set the border="0".

Learn more at amazon.com

More HTML Code:
• Web Page Template
• The HTML Head Tag
• HTML Horizontal Rule
• HTML abbr and acronym Tag
• HTML Editors
• How to Write and Run HTML
• Block and Inline HTML Elements
• HTML Textarea Basics
• Make an HTML Element Editable
• Easy Code to Add Yahoo Site Search to Your Website