QUICK LINKS

TABLES

Tables are often HTML’s version of designing the layout of a webpage. Often, when CSS isn’t in use, one large table will be used to place elements on a page. Otherwise, tables are generally only used to present data.

As with many tags, creating a table begins with the straightforward <table> tag and ends with </table>. The table is then set up using table rows and table data tags. The <tr> tag designates the beginning of a table row, and each <td> tag within designates a cell of table data. Each is then closed with </td> and </tr> respectively.

For example, a basic 3x3 table would be written as follows:

<table>
<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>

The text between the <td> and </td> would then appear in the cell. This can be changed to an image or any other type of content. The table, as written above, would look like this.

As you can see by the example, the table itself isn’t actually visible. This can be changed by adding a border, within the <table> tag. Changing the code to the following will make the table appear.

<table border=”1”>
<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>

There is also the ability to add the width attribute within the table tag, in order to set the exact width of the table, either in pixels or a percentage. It would simply appear so:

<table width=”500px”> or <table width=”100%”>

There are two other attributes for the table tag that will define the layout of individual cells. They are cellpadding, which defines the space between the cell wall and cell content, and cellspacing, which defines the space between cells. These are both defined with pixels.

Lets see how these look visually.

<table border=”1” cellpadding=”25”>
<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>

<table border=”1” cellspacing=”25”>
<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>

In a browser, they appear like this.

Last but not least, within the <td> tag are the attributes colspan and rowspan, as well as align and valign. Colspan and rowspan define how many cells the content should fill, where align and valign, or vertical align, determine where in a cell the content should appear.

The following code shows all four in action:

<table border=”1”>
<tr><td rowspan=”2”>Cell 1 and Cell 2</td><td>Cell 3</td></tr>
<tr><td colspan=”2”>Cell 4 and 7</td><td>Cell 5</td><td>Cell 6</td></tr>
<tr><td align=”right”>Cell 8</td><td valign=”bottom”>Cell 9</td></tr>
</table>

The align attribute includes left, center, and right. The valign attribute includes top, middle, and bottom.

Quick Reference

<table> and </table>
Begin and end a table

<tr> and </tr>
Designate a table row

<td> and </td>
Designate table data

border=“10px or 10%”
Set in the table tag to create a border

width=“10px or 10%”
Set in the table tag to determine the width

cellpadding=“10px ”
Set in the table tag to determine the space between cell wall and content

cellspacing=“10px”
Set in the table tag to determine the space between cells

colspan=“2”
Set in the td tag to make cell content span multiple columns

rowspan=“2”
Set in the td tag to make cell content span multiple rows

align=“left”
Set in the td tag to set alignment of content (includes center and right)

valign=“top”
Set in the td tag to set vertical alignment of content (includes middle and bottom)