tables

the basics
Tables are a feature of HTML that allow data to be organized into rows and columns. Not only are they useful for displaying data in an organized form, but also extremely valuable for making your site's layout look organized. This is what a table with a 2-pixel border, 2 rows, and 2 columns looks like:

You can make tables with an unlimited number of rows and columns. The border can be invisible or any thickness you specify, though, if a border is required, a size of 1 pixel generally looks best.

html code
Tables are divided into rows, which contain columns. All rows and columns are contained within a <table> tag, ending with </table>. Rows begin with <tr> and end with </tr>, and colums, contained by rows, begin with <td> and end with </td>.

This is what the HTML code for the above table looks like:

<table border=2>
<tr>
<td>Column 1, Row 1</td>
<td>Column 2, Row 1</td>
</tr>
<tr>
<td>Column 1, Row 2</td>
<td>Column 2, Row 2</td>
</tr>
</table>


We'll look at those tags in more detail below.

<table>
The <table> tag tells the browser to begin a new table. It's basic attributes set the table width, space between cells, and border thickness.

Attributes:

• border=n - Sets the size (in pixels) of the border around the table and around the cells in the table. (A cell is an area in a table that has both a row and a column.) If n is 0, then there will be no border.
• width=n - Sets the total pixel width of the table. All cells will be readjusted or clipped to fit in the set width. This value can also be a percentage value such as "80%", in which case the table automatically resizes to fit comfortably within the browser's window.
• cellpadding=n - Controls the amount of space between each cell's border and it's content. One or two is a good number, otherwise the table will look crammed, like the above example.
• cellspacing=n - Controls the amount of space between cells. The only visible difference between this and cellpadding is that if borders are defined in the table, cellspacing defines the space in between cell borders.

<tr>
The <tr> tag begins a new row. If it is not located within a <table> tag, the browser will ignore it.

Attributes:

• height=n - Forces the browser to make this row n pixels high, regardless of the content contained.

<td>
Every row contains n columns, where the actual content is displayed. Within a <tr> tag, <td> begins a new row and </td> ends one. Depending on the browser, text inside of a <table> tag that is not contained in a <td> tag may or may not be displayed.

Attributes:

• width=n - Forces this cell to be n pixels wide. If the <table> tag has a set width, and this value is greater, then the cell will be the same length as the table width.
• align=n - Sets the alignment of text in the table cell. Default is "Center". Valid values are "Left", "Center", and "Right".
• valign=n - Sets the vertical alignment of text in the table cell. Default is "Middle". Valid values are "Top", "Middle", and "Bottom".

table layout
Using the basic attributes of the table tags, you can have precise control over the table's layout. In this example, a table 400 pixels wide will be created with two rows. The first will have one column, the second will have two. The whole table will have a 1 pixel border around it.

Looking at the above table, you can see two problems. First, there are two columns in the first row, when we only wanted one. Second, the first column in both rows are longer than the second. We can fix both these problems, but first take a look at the HTML for the table.

<table border=1 width=400>
<tr>
<td>Table Header</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>


Columns in a vertical line will always have the same width, so row 1, column 1 will be as wide as row 2, column 1. We can't change this, but we can set a specific width for each column. The table is 400 pixels long, so each column should take up 200 pixels for them to be even. This is easy to do; we simply add a width=200 attribute to the <td> tags, like so:

<table border=1 width=400>
<tr>
<td>Table Header</td>
</tr>
<tr>
<td width=200>Data 1</td>
<td width=200>Data 2</td>
</tr>
</table>


Ok, this is where it gets tricky. Every row must have the same number of columns, so it's logically impossible to have row 1 with 1 column and row 2 with 2 columns. However, we can still fix this, using a table trick created specifically for problems like this: The colspan=n parameter of the <td> tag. It fakes the browser into thinking that the single cell is n columns wide:

Looks good! Take a look at the HTML for it; you'll notice I also centered the data and compacted the borders. We've added a lot of whitespace to make it easier to read:

<table border=0 width=400 cellspacing=0>
<tr>
<td colspan=2 align="center">Table Header</td>
</tr>

<tr>
<td width=200 align="center">Data 1</td>
<td width=200 align="center">Data 2</td>
</tr>
</table>


That was pretty painless, and the results look much better. Next, we'll look at some examples of applications for tables.

a site map
Not only can tables be used to organize lists of data, they are very effective in laying out your site. One application of this is a list of links, such as a table including links to all the pages in a site. We'll start with a pretty generic table:

Site Map
Home	Products

adding items
There isn't much point to a site map with only two items, so we should add some more, as well as highlighting the table's header and removing the visible borders. It's easy to add rows for more items:

<table width=300 border=0>

<tr><td colspan=2>
<center><font size=+1 color="red">Site Map</font></center>
</td></tr>

<tr>

<td width=150 align="center">
<a href="index.html">Home</a>
</td>

<td width=150 align="center">
<a href="products.html">Products</a>
</td>

</tr>


<tr>

<td width=150 align="center">
<a href="links.html">Links</a>
</td>

<td width=150 align="center">
<a href="contact.html">Contact Us</a>
</td>

</tr>

</table>


We've just added one extra <tr> row here, but normally there would be several. This is our finished example:

Site Map Home Products Links Contact Us

creating sidebars

One of the greatest uses of tables is creating sidebars, navbars, or whatever you want to call the strips running down the size of a page. Usually they contain links used in navigating the site. For this example, the sitebar will contain the site map created above.

The first step is making a new HTML file and calling it "index.html" or whatever you want. It should contain all the normal HTML tags, <html>, <body>, etc. As soon as the body begins, insert a <table> tag with border=0 and begin a new row. Inside this row is contained the entire page. The first column has the sidebar and the second contains the rest of the page's content.

Begin the first column (set its width to 300 pixels or so, but be aware that you'll need to change the size of the site map table to reflect the sidebar) and paste in the HTML for the sidebar, found above. If you'd like, go ahead and change the item names to whatever you want. When you are done, close the column with </td> and begin another column. This one will contain the body of the page.

The content of the page is irrelevant for now; just fill it with some scribbling and a header or two. Once you've finished, close the column, row, and table, then put in the </body> and </html> tags.

The page is now finished and ready for testing! Click here to view the file we ended up with. If you decide to incorporate this into your site, one option you might consider is putting up a small background image to show a clean border between the site map and the page content. This is done frequently to make the page look more organized and less cluttered.

Click here to go back to the table of contents.