Tables

Videos

Examples from Videos

Notes

Tables allow you to make sets of rows and columns, and place any HTML content inside. You can have tables within your document like this one:

Our First Table
Cell One	Cell Two

Or tables can be used as a grand formatting tool for your entire page.

There is a group of tags associated with tables. The first is the <table> tag. It has a corresponding end tag, and it indicates that the content inside will be formatted according to table rules.

Each Table is then divided into a series of rows. You must first divide the table into rows before you create individual cells. To create rows, we use the TR (for Table Row) tag:

You can create as many rows as you like. In the colored table above we have two rows

Within each row, we can then divide the rows into cells. The tag for creating a cell is <td> (TD for Table Data). You can create as many cells within a row as you like. Content (i.e. text, images, etc) must be in a cell. You cannot just put it in a row without a cell.

<table>
<tr>
<td>This is the First Cell</td>
<td>This is the Second Cell</td>
</tr>
</table>

If you have multiple rows, there must be the same number of cells in each rows. If you want to have fewer cells in one row, you can use the colspan attribute. This means that a cell will span several columns. In the First Table example above, our first row spans two columns. The code looks like this:

<table>
<tr>
<td colspan=2><center>Our First Table</td>
</tr>

<tr>
<td>Cell One</td>
<td>Cell Two</td>
</tr>
</table>

Notice that there are two sets of TDs in the second row, and only one in the first row. The number of columns in a table is determined by the number of columns in the row with the most columns. Every other row must have that many columns made up by the colspans of each cell (default is one).

There is also a rowspan option where you can make a cell stretch vertically over multiple rows. An example would look like this:

This is the first TD	This is the second TD
	This is the third TD

The code for that looks like this:

<table border=1>
<tr>
<td rowspan=2>This is the first TD</td>
<td>This is  the second TD</td>
</tr>
<tr>
<td>This is the third TD</td>
</tr>
</table>

Notice that we only have one TD in the second row. This is because the first cell is filled by the cell from the first row that stretches down into the second row.

With that out of the way, we can look at some simpler attributes.

border - this attribute is used in the table tag. It allows you to put a border around the table. The little tables above have a border of 1. The value is given in pixels.
```
<table border="1">
```
. Be cautious about using borders. They tend to look very dated if used in the default way. CSS gives more options for table borders which may help you look a bit more modern.
cellpadding - this is also used in the table tag. It indicates the size of an invisible buffer zone in each cell.
cellspacing - this is used in the table tag. It indicates how far cells should be spaced from each other and increases the border between cells.
height and width - The height of a row is determined by the height of the highest cell in that row. The width of a column is determined by the width of the content in the widest cell in that column. If you want to set the height or width yourself, you can do that. It can be set in the TD tag, and can be set with a pixel or percent value. For example this table:

This is the First Cell cell 2

comes from this code
```
<table border="1">
<tr height="100">
<td width="50%">This is the First Cell</td>
<td width="50%">cell 2</td>
</tr>
</table>
```
You CANNOT create cells in the same column that have different widths, nor cells in the same row with different heights.
bgcolor - this can be used in the table, tr, or td tag. it sets the background color for the corresponding object (the whole table, the row, or a cell). It works the same as the bgcolor attribute of the body tag.
```
<table><tr background="red"><td>...
```
background - like bgcolor, this works in the table, tr, and td tag. It will tile an image in the background of the corresponding object.
```
<table><tr><td background="images/bg.gif">
```
valign - within each cell, content can be aligned vertically to the top, center, or bottom. This attribute is placed in the TD tag.

Bottom top
```
<table border=1>
<tr>
<td valign="bottom" height="100">Bottom</td>
<td valign="top">top</td>
</tr>
</table>
```
align - this is like valign, but it aligns horizontally. The entire content of the cell is aligned as specified. The options are left, right, and center.