Tables

This Tables tutorial will guide you through the making of a table. First I will show you a very basic table, then I will explain the different tags and their attributes. After reading this you will be able to do complex tables.

Remember that tables don't just let you display things in table form, they are also very useful when designing the layout of a page, like grouping buttons, making text columns, etc. We'll start off at once with the simplest table possible.

First	Second
Third	Fourth

Let's take a look at the HTML code:

<table border=1>
<tr>
     <td>First</td>
     <td>Second</td>
</tr>
<tr>
     <td>Third</td>
     <td>Fourth</td>
</tr>
</table>

You don't have to indent your lines, but it will make the code easier to read if you do. Also try do some sort of grouping with the rows, also to make it easier to read.

This table consists of 2 columns, 2 rows and 4 cells. As you see it does only use three different tags, <table>, <tr> and <td>, these tags (with their matching end tags) are the most used and simplest <table> tags. Here's an explanation of the tags...

<table>

This tag simply defines that there should be a table. To start a table you should use <table>.

<table>   </table>

The border attribute is the one most used in the table tag. It will set the width of the table's border. In the above table we have set the border width to 1. Borders are very useful when you are building a table. Turn on the border and it will be much easier to spot errors and potential problems. When you are finished, simply set the border=0 and it's gone. Just don't forget to end your table with </table>

<table border=2>

You may also set a tables width, either in pixels or in percent.

<table width=400> or
<table width=70%>

To add extra space between the cells you use cellspacing attribute, the value is set in pixels.

<table cellspacing=10>

Similar to cellspacing is cellpadding, but this let you change the space between the "cell data" (usually text) and the border.

<table cellpadding=10>

If you want a caption centered above or below your table you use the <caption> tag directly after your <table> tag.

<caption align=top>CaptionName</caption> or
<caption align=bottom>CaptionName</caption>

<tr> and <td> - Rows and Columns

The <tr> tag starts a new row in a table, and </tr> ends it. The <td> tag (table data) defines the information that you place in each column. Information in each cell (or block) of a table, must be between the <td> and </td> tags.

After the <table> tag, put the <tr> tag to start a new row. Then put the <td> to start a new column. Now enter the item that should be displayed. Now end the the column with </td>. If you want another column, just do the same procedure again with the <td> tag. Ok, now end the row with </tr>. To add another row, do the whole thing again (see the HTML code below, additions is in bold).

<table border=1>
<tr>
     <td>First</td>
     <td>Second</td>
     <td>Another</td>
</tr>
<tr>
     <td>Third</td>
     <td>Fourth</td>
     <td>Another</td>
</tr>
<tr>
     <td>Third</td>
     <td>Fourth</td>
     <td>Another</td>
</tr>
</table>

This code will display the table below. It has one more column and one more row compared to the previous one.

First	Second	Another
Third	Fourth	Another
Third	Fourth	Another

You can use both the ALIGN and VALIGN attrbiutes in both the <TR> and the <TD>. The default alignments of table data is ALIGN=LEFT and VALIGN=MIDDLE. These are overridden by any alignments specified in the <TR> tag, and those alignments in turn are overridden by any alignments specified on a cell (the <TD> tag). ALIGN may have the values of left, center, and right. The allowed values for VALIGN are top, middle, bottom and baseline. Both these align attributes can be used in the <TR>, <TD> and <TH> tag. Notice that ALIGN may be used with the <CAPTION> tag also, then only top and bottom values are allowed.

If you want some text (or something else) inside a cell which you want to be as big as, for example, two cells (or two columns) you use the COLSPAN or ROWSPAN attribute in the <TH > or <TD> tags. COLSPAN specifies how many columns of the table this cell should span, and ROWSPAN specifies the number of rows the cell you span.

If you don't want your line to be broken because it doesn't fit the width of you cell, you should insert the attribute NOWRAP in the <TD> tag (works in table headings too). Now your cell shouldn't wrap, but be careful, the attribute can result in very wide cells.

Table Headings

You can have headings above your columns. This is done with the <th> tag between the <tr> tags like this. So if you want to add a header to each of the columns in our previous table you'll add this text before the first <tr> set. You can use the standard align values to change the location of the heading.

<tr>
     <th>Heading 1</th>
     <th>Heading 2</th>
     <th>Heading 3</th>
</tr>

Last updated 970625