Tables are fairly easy to create, if a bit tedious. A table is surrounded by <table> tags. The table contains rows (<tr>) which in turn are divided into cells (<td>). A <td> must be in a <tr> element, and a <TR&g t; must be in a <table> element. However, you can nest a table within table by putting an additional table element within a <td> element. (More about nesting tables later.)
To create a simple table that has three columns and two rows, like this...
| Row 1, Cell 1 | Row 1, Cell 2 | Row 1, Cell 3 |
| Row 2, Cell 1 | Row 2, Cell 2 | Row 2, Cell 3 |
...this is what the syntax will look like:
<table>
<tr>
<td>Row 1, Cell 1</TD>
<td>Row 1, Cell 2</TD>
<td>Row 1, Cell 3</TD>
</TR>
<tr>
<td>Row 2, Cell 1</TD>
<td>Row 2, Cell 2</TD>
<td>Row 2, Cell 3</TD>
</TR></TABLE>
In addition, tables can have a Table Head (<TH>), which is like a special case<td>, in that it prints its content in bold, centered; and a <CAPTION>, which appears above or below the table, but outside its border. (The CAPTION element must occur directly after the open-table tag, and may take an align attribute, either top, bottom, left, or right).
Note: Always remember to put in your </TABLE> tag at the end. All too often, people forget to put the close tag in, and then can't figure out why nothing is showing up on the entire page. First thing to check is whether or not you remembered your </TABLE> tag.
A couple of useful attributes for tables are COLSPAN and ROWSPAN, which appear in the <td> element. These permit cells to span rows and columns, allowing for more sophisticated tables.
Here's an example of the use of COLSPAN, to show a store's hours:
| Day of week | 9-12 | 12-2 | 2-5 |
| Monday | Open | Closed | Open |
| Wednesday | Closed all day | ||
| Friday | Open | Closed | Open |
Notice that next to Wednesday, it says "Closed all day", and that spans across all three columns. That's because we used COLSPAN. Here's the syntax of how it was used:
<table>
<tr>
<td>Day of week</td>
<td>9-12</td>
<td>12-2</td>
<td>2-5</td>
</tr>
<tr>
<td>Monday</td>
<td>Open</td>
<td>Closed</td>
<td>Open</td>
</tr>
<tr>
<td>Wednesday</td>
<td colspan=3>Closed all day</td>
</tr>
<tr>
<td>Friday</td>
<td>Open</td>
<td>Closed</td>
<td>Open</td>
</tr>
</table>
Notice in the line for Wednesday, we want that cell to span across three columns. So within the <td> tag, we add the COLSPAN attribute, and make it equal to the number of columns we want to span.
Note: This kind of advanced table is easier to create when you draw it out on a piece of paper first. Then you can figure out just what your spans will be.
You can probably guess how ROWSPAN is going to work now. It's identical in syntax to COLSPAN, but rather than spanning across vertical columns, you're spanning across horizontal rows.
Let's take the same example, but flip the table around a bit, focusing on the time of day rather than the day of the week.
| Time of day | Monday | Wednesday | Friday |
| 9-12 | Open | Closed all day | Open |
| 12-2 | Closed | Closed | |
| 2-5 | Open | Open |
Here's the syntax, using ROWSPAN:
<table>
<tr>
<td>Time of day</td>
<td>Monday</td>
<td>Wednesday</td>
<td>Friday</td>
</tr>
<tr>
<td>9-12</td>
<td>Open</td>
<td rowspan=3>Closed all day</td>
<td>Open</td>
</tr>
<tr>
<td>12-2</td>
<td>Closed</td>
<td>Closed</td>
</tr>
<tr>
<td>2-5</td>
<td>Open</td>
<td>Open</td>
</tr>
</table>
If you find it challenging to really wrap your brain around the concept of COLSPAN and ROWSPAN at first, don't worry, you're not alone. One of the easiest ways to figure out how to use COLSPAN and ROWSPAN is to practice. You might want to copy the syntax as it's shown here, paste it into your own page, and then change things around a little bit to see what happens.
You'll notice above that the first tag of every table is <table>. Depending on the browser that the person viewing your pages uses, the table's border will either default to border=1 (a standard-size border) or border=0 (no border). The way to as sure that the border will look the way you want it to is by using the border attribute.
Sizing
Web browsers automatically size a table's columns based on the amount of information contained in the table cells. Sometimes, you may want your table to be a particular size, either wider or more narrow than the contents of the cells dictates. This can be done in one of two ways.
The first way is to make the table size relative to the window size. Different computers have different size monitors, and you can tell the browser how wide to make the table. To do this, you add a width attribute to the table tag. Perhaps you want your table to take up half of the screen. The syntax looks like this:
<table border=1 width="50%">
<tr>
<td>This is a table that has a width set at 50%</td>
</tr>
</table>
And the table would look like this:
| This is a table that has a width set at 50% |
To really see how this works, resize your Netscape window now. The table's width will change as the size of your browser window changes.
The second way to adjust a table's size is by giving it a fixed width. The width of a table is measured in pixels, which is especially helpful when you're displaying a picture in a table.
The syntax looks like this (using a width of 200 as an example):
<table border=1 width=200>
<tr>
<td>This is a table that has a fixed width set at 200 pixels</td>
</tr>
</table>
And the table would look like this:
| This is a table that has a fixed width set at 200 pixels |
If you resize your Netscape window, the table will stay the same size.
In the same way that you can determine the width of the entire table, you can also determine the width of the cells within the table. Say, for example, you wanted to have a table where the first column was very narrow, but subsequent columns were wider. Here's an instance where you might want to do that:
| Time |
|
||
| 8 a.m. | Aspirin | Vitamin C | Ginseng |
| 12 p.m. | Zantac | Tylenol | Breath Assure |
| 7 p.m. | Aleve | Iron pill | Unisom |
The syntax would look like this:
<table border=1 width="100%">
<tr>
<td width="10%">Time</td>
<td colspan=3>Pills to take</td>
</tr>
<tr>
<td>8 a.m.</td>
<td>Aspirin</td>
<td>Vitamin C</td>
<td>Ginseng</td>
</tr>
<tr>
<td>12 p.m.</td>
<td>Zantac</td>
<td>Tylenol</td>
<td>Breath Assure</td>
</tr>
<tr>
<td>7 p.m.</td>
<td>Aleve</td>
<td>Iron pill</td>
<td>Unisom</td>
</tr>
</table>
Note: You can only have one width attribute per column. That is, if you wanted the 8 a.m. column to be 10% and the 12 p.m. column to be 25%, you can't do that. It usually defaults to the last width attribute that you've added to that column of the table.
Another neat thing you can do with tables is to put a table inside a table, called a nested table. The second, smaller table is simply inserted into a cell of the first, larger table.
A nested table might look like this:
My Veggie-Table
| Crucifers |
|
||||
| Starches | Corn |
Here is the syntax:
<TABLE border=1>
<tr>
<td>Crucifers</td>
<td>
<TABLE border=1>
<tr>
<td>Brussels Sprouts</td>
<td>Cauliflower</td>
</tr>
<tr>
<td>Broccoli</td>
<td>Cabbage</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Starches</td>
<td>Corn</td>
</tr>
</table>
Newer web browsers will allow you to change the background color of a table, either cell by cell, within a whole row, or within the whole table. You do that the same way you'd apply a background color to a page, except the commands will go into the TABLE tag (if you want to control the color of the whole table), the TR tag (if you want to control the color of a single row), or the TD tag (if you want to control the color of a single cell).
On to the final lesson.