Tables

Basics

Tables begin with a very simple command:

<table> </table>

That is just the outline, however. Tables are made up of columns and rows.

In HTML, rows are created, and then cells are inserted into the rows. You never create a column; a column is defined by the cells.

A row is created with this command:

<tr> </tr>

"Tr" stands for "Table Row."

Inside the table row, you place table cells. Each cell has this tag:

<td> </td>

You can put multiple cells inside any row. The number of cells you put in decides how many columns there are. In a standard table, every row should have the same number of cells.

In the end, a table with two rows and three columns would look like this:

That will create a table that could look like this:

If you accidentally leave out the third set of "td"s in the second row, it would look like this:

Basic Table Attributes

When creating a table, there are a few basic attributes you should consider using.

• Width: you can set the width of your table in pixels (e.g., "600") or percent of the current area (e.g., "75%"). If you want your table to have a set width compared to the rest of the content of the web page, then use pixels. If you want your table to grow or shrink depending on the size of the viewer's window, then use percent.
• Cellpadding: this creates extra space around the text inside each cell
• Cellspacing: this creates extra space between cells.
• Border: A normal border is 1 pixel, as shown above. Setting the border to more than 1 will create a dramatic "raised frame" effect, which is considered bad style. Setting the border to "0" will make the table frame invisible, a popular way to create layouts in web pages.
• BgColor: a background color will appear throughout the table (as opposed to only within table cells).

Live HTML Exercise

In the following live exercise, try adding various values to the attributes in the "table" command.

1. try changing the width to values between 50 and 750
2. try changing the cellspacing to values between 0 and 10
3. try changing the cellpadding to values between 0 and 10
4. try changing the border to values between 0 and 20
5. try changing the bgcolor; use colors "pink", "lightgreen", and "violet"; more colors here.

Adding Text & Controlling Widths

When you add text to a table cell, the cell will automatically expand in size. Columns without text will shrink to almost nothing. This is how text added to one cell would look.

Can you see how the first column has suddenly expanded to take up most of the table, and the blank cells have shrunk to tiny areas? Try it in the Live HTML Exercise below. Where you see the "X" in the top left cell, start typing more and more text. See how the cell/column expands?

Live HTML Exercise

Most people don't want their columns to change like that. You can control this problem with "width" attributes added to the "td" command. You should add them to at least one cell in each column. In the Live Exercise below, I added width to the last (right side) column only. notice that I used a number in pixels; you can also use percent, if you wish. Try adding text to the top left cell now. Then try adding "width" attributes to all three cells in the first row.

NOTE: if you use pixels as the width, the widths must add up to the table width. If you use % (percentages), they must add up to 100%.

Live HTML Exercise

Other Table Features

There are other things you can do to make a table look nicer.

Table Row Attributes

• <tr bgcolor="lightblue"> - this will add a background color only inside the cells of that row.
• <tr align="center"> - this will center all text within each cell of that row.
• <tr height="60"> - this will increase the height of the row. You should use pixels, not percent. If you use this, you may also want to use the attribute valign="top/middle/bottom" so the text goes where you want it vertically.

Table Cell Attributes

• <td bgcolor="lightblue"> - this will add a background color only inside the one cell.
• <td align="center"> - this will center all text within the one cell.
• <td height="60"> - this also will increase the height of the whole row. You should use pixels, not percent. If you use this, you may also want to use the attribute valign="top/middle/bottom" so the text goes where you want it vertically.

You can go ahead and try these out in the Live Exercise above.

Colspan & Rowspan

Sometimes you want to "merge" cells with one another. For example, what if you want the top row to be one cell, while the other rows have three cells each? For that, you would use the colspan attribute for the "tr" command:

<td colspan="3"> This goes all the way across the table </td>

Of course, you must then only have ONE "td" cell/column in that row, otherwise the table will look funny.

That looks like this:

Similarly, you can do a rowspan command to "merge" cells up and down. If you do this, then you must subtract one "td" cell/column from the affected rows below it.

Live HTML Exercises

You have now learned most of what you need to make tables in HTML. I provide two exercises below--one for a table with colspan, another with a table using rowspan, so you can get an idea what they are like, and you can play with them. Try out anything and everything about tables that you have learned!

And:

Now You Know

Now you know how to make a table. Time to get ready to create pages in a web page editor.