HTML Tables
They're daunting, they're fancy-looking, but they're quite
simple to create.
Here are the tags you need to use to create a table.
Take a look at the HTML source for this page to see how the
table below is structured.
Table tags
| Tag |
Meaning |
| <TABLE> |
opens the table |
| <CAPTION> |
the "title" of the table |
| <TR> |
Table Row. Starts a new row (going across) of cells. |
| <TH> |
Table Header. Boldfaces the cell. |
| <TD> |
Table Data. The information that goes in a cell. |
When creating a table, be careful to have the correct number of cells
per row. You can have some interesting results if you
misplace or add just one extra set of <TD> and </TD> tags!
- Make a table of your own. Use the following data:
- CMC, 4 floors, 8 labs
- Willis, 3 floors, 1 lab
- LDC, 3 floors, 2 labs
- Now replace "LDC" with "Language and Dining Center" and see
how the cell sizes adjust automatically.
- Give your table a name.
- Link the cell that contains "CMC" with the following address: http://www.mathcs.carleton.edu/
- Add an extra cell to the "Willis" row. Enter in the word "kiwi". In the "LDC" row, add an empty cell and then a cell with the
information "taxi". (That is, <TD></TD><TD>taxi</TD>) How did the table change?
But wait! That's not all! Here is a guide that includes many attributes that
come in handy with tables. This is a slightly more confusing one with more information. You have to scroll down a bit to get to the section on tables.
Let's go through a few of these attributes. First, notice on the table on this page that there is a border, as well as a BORDER attribute in the source code. As the secode site listed in the paragraph above mentions, borders can range from 0 (no border) to 9999. Some of those sizes are ridiculous.
- In your table above, put in a border of 0. Then try 1. Then 5. Then 99. Silly, huh? If you do the max, 9999, good luck trying to find your data! Pick an appropriate border and stick with it.
- What do you think the numbers represent?
That wasn't so bad. Now how about colspan? Colspan is simply how many columns you want that cell to span. For example, if you say "COLSPAN=2", that cell would take up the space of itself and the next one.
- Copy and paste your table, so you have two identical tables on your page. Remove the bogus information inserted in the last from the first set of instructions.
- Remove the number of floors from the "Willis" set, but use "COLSPAN=2" to adjust for it. For a good example of this in practice, go to the math/cs homepage, click Lab Information on the side, then Lab Schedules, then November. Notice the colspanning.
Read the information on "Cell Padding" in the second tutorial mentioned above.
- Use some padding in your second table, around the building names.
- How do you get 10 pixels worth of padding?
Previous lab <----:----> Next lab