Page 2
Lab 5
Page 2
Basically, tables are boxes, divided into rows and columns, which let you organize just about anything on your web page. If the information you want to display is too complicated for a list, or you can't get a group of pictures to align properly, a well-designed table may be the solution.
| Here's a table with two rows and three columns | ||
| Column 1 | Column 2 | Column 3 |
After we cover the basic tags, we're going to show you a lot of different options that let you customize your table to fit your needs. At first the number of options may seem overwhelming, but once you've created a table of your own, you will appreciate the freedom they give you.
Here is one of the most basic tables you can create:
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
It doesn't look much like a table, since it doesn't have any fancy borders, headings, or shading, but it is a good place to start since it doesn't require you to include any extra attributes or tags.
Here's the HTML code that created that particular table:
<TABLE> <TR> <TD>1</TD> <TD>2</TD> <TD>3</TD> </TR> <TR> <TD>4</TD> <TD>5</TD> <TD>6</TD> </TR> <TR> <TD>7</TD> <TD>8</TD> <TD>9</TD> </TR> </TABLE>
Notice how each number is surrounded by <TD></TD>. This creates a cell. Every three of these cells are also surrounded by <TR></TR>. This creates a row. You can use the following steps to re-create this table within the BODY of one of your web pages:
That's all it takes to make a table. Your browser will count up the number of rows and the number of columns in the largest row and make a table of the appropriate size. Just remember that in the final table, every row will have as many columns as the largest row regardless of how many you typed in. Extra cells will just appear blank.
As you saw above, there are only three basic tags you need to know. Here are a few more details about each of them:
Every table must be surrounded by the <TABLE> and </TABLE> tags. Whenever your browser encounters a table, it pauses to read in everything between these two tags before deciding how to arrange and display it. If you forget either one of them, your table will not show up at all!
The <TABLE> tag has quite a few attributes. You never need to include any of them, but here are a few of the more useful ones:
| Attribute | Description |
|---|---|
| BORDER | Tables, by default, have no visible borders. If you would like your table to have a border, assign this attribute to a value (in pixels). BORDER=1 (or just BORDER) will give your table a very thin border. BORDER=5 is much thicker. |
| CELLSPACING | This attribute controls how much space (in pixels) there is between cells. Default cellspacing is 1, but you can use this attribute to raise or lower it (e.g. CELLSPACING=0). |
| CELLPADDING | Cellpadding is the space between a cell's borders and content. In tables with borders, you may want to set CELLPADDING=5 to avoid having text touch the edges of the cells. |
| WIDTH | WIDTH can be assigned either a number of pixels or a percentage of the width of the window. For example, WIDTH=80% will result in a table that is always 80% as wide as the browser window. WIDTH=80 will result in a table that is always 80 pixels wide. |
| BGCOLOR | The BGCOLOR attribute controls the default background color of every cell in your table. As with the BGCOLOR attribute in the <BODY> tag, BGCOLOR can only be assigned a built-in color or RGB value (e.g. BGCOLOR="blue"). If no BGCOLOR is specified, the table will have the same background color as the page. |
Every row you create within your table must be surrounded by <TR> and </TR> tags. Here are some of the attributes you can include:
| Attribute | Description |
|---|---|
| ALIGN | This attribute will control the horizontal alignment in the text of each cell in that row. Its default is LEFT, but you can set it to CENTER or RIGHT. |
| VALIGN | This attribute will control the vertical alignment in the text of each cell in that row. Its default is MIDDLE, but you can set it to TOP or BOTTOM. |
| BGCOLOR | The BGCOLOR attribute controls the default background color of every cell in the row. As with the BGCOLOR attribute in the <TABLE> tag, BGCOLOR can only be assigned a built-in color or RGB value (e.g. BGCOLOR="blue"). If no BGCOLOR is specified, the row will have the same background color as the table. |
All text within your table should be surrounded by <TD> (or <TH>) and </TD> (or </TH>). These tags create the actual data cells, and thus have a lot of optional attributes to help you customize your table:
| Attribute | Description |
|---|---|
| ALIGN | This attribute will control the horizontal alignment in the text in the cell. Its default is LEFT, but you can set it to CENTER or RIGHT. |
| VALIGN | This attribute will control the vertical alignment in the text in the cell. Its default is MIDDLE, but you can set it to TOP or BOTTOM. |
| BGCOLOR | The BGCOLOR attribute controls the background color of this cell. As with the BGCOLOR attribute in the <TABLE> tag, BGCOLOR can only be assigned a built-in color or RGB value (e.g. BGCOLOR="blue"). If no BGCOLOR is specified, the cell will have the same background color as the row. |
| ROWSPAN | ROWSPAN controls how many rows the cell occupies, allowing you to merge the cells of three rows into one tall cell. The default is 1, but you can raise this attribute to be anything up to the number of remaining rows. For example, ROWSPAN=3 will cause the cell to be 3 rows high. When you have set a cell to occupy more than one row, you will usually be filling fewer cells in the next few rows. If, for example, you set ROWSPAN=4 on one cell in a table that is 5 columns wide, the next 3 rows would have 4 columns to fill instead of 5. |
| COLSPAN | COLSPAN controls how many columns the cell occupies, allowing you to merge the cells of three columns into one long cell. The default is 1, but you can raise this attribute to be anything (if you raise it above the number of remaining columns, it will create new ones on the right). For example, COLSPAN=3 will cause the cell to be 3 rows long. |
There are two other tag pairs which can be used within tables:
Here is a sample table created to display a schedule:
| Time | Monday | Tuesday | Wednesday | Thursday | Friday |
|---|---|---|---|---|---|
| 9:00 | MAT 104 | MAT 104 | MAT 104 | ||
| 10:00 | PHI 201 | PHI 201 | |||
| 11:00 | COS 111 | COS 111 | COS 111 | ||
| Noon | L U N C H | ||||
Notice that it uses many of the attributes we described above, especially ROWSPAN and COLSPAN. The HTML code that created this table is listed below. If you examine this code closely, you'll notice that the fourth row (11:00) seems to be missing a few cells. This is because the third row has two cells with ROWSPAN=2 which means they each automatically take up a cell in the fourth row as well.
| HTML code for Schedule | |
|---|---|
<TABLE BORDER=1 CELLPADDING=5>
<CAPTION><H3>Schedule</H3></CAPTION>
<TR BGCOLOR=SILVER>
<TH BGCOLOR=BEIGE>Time</TH>
<TH>Monday</TH>
<TH>Tuesday</TH>
<TH>Wednesday</TH>
<TH>Thursday</TH>
<TH>Friday</TH>
</TR>
<TR ALIGN=CENTER VALIGN=MIDDLE>
<TD BGCOLOR=BEIGE>9:00</TD>
<TD>MAT 104</TD>
<TD></TD>
<TD>MAT 104</TD>
<TD></TD>
<TD>MAT 104</TD>
</TR>
|
<TR ALIGN=CENTER VALIGN=MIDDLE>
<TD BGCOLOR=BEIGE>10:00</TD>
<TD></TD>
<TD ROWSPAN=2>PHI 201</TD>
<TD></TD>
<TD ROWSPAN=2>PHI 201</TD>
<TD></TD>
</TR>
<TR ALIGN=CENTER VALIGN=MIDDLE>
<TD BGCOLOR=BEIGE>11:00</TD>
<TD>COS 111</TD>
<TD>COS 111</TD>
<TD>COS 111</TD>
</TR>
<TR ALIGN=CENTER VALIGN=MIDDLE>
<TD BGCOLOR=BEIGE>Noon</TD>
<TD COLSPAN=5 BGCOLOR=TURQUOISE>
L U N C H</TD>
</TR>
</TABLE>
|
| Time | Monday | Tuesday | Wednesday | Thursday | Friday |
|---|---|---|---|---|---|
| 9:00 | MAT 104 | MAT 104 | MAT 104 | ||
| 10:00 | PHI 201 | PHI 201 | |||
| 11:00 | COS 111 | PHI 201 | COS 111 | PHI 201 | COS 111 |
| Noon | L U N C H | L U N C H | L U N C H | L U N C H | L U N C H |
| PREVIOUS | 1 | 2 | 3 | 4 | 5 | NEXT |