Note that We open the table with the <table> tag. By adding the border ="1" attribute, we
can see the border (a border ="0" would turn the table border off and all you would see is
the data inside of the table. This is (sometimes) a desirable effect.) Next, we open the
table row with the <tr> and then the table data cell <td>. Enter the Data ("A") and
close the table data </td> and then the table row </tr> and then the table
HTML tables have five tags:
<table> is the opening table tags.
<tr> starts a table row.
<td> starts a table data cell.
<th> starts a table header.
<caption> is where you place a caption above or below the table.
Open the table <table>. Set the border="1" so you can see it. The border can be set from 0 on up.
The higher the number the wider the border! Next, add a caption at the bottom of my
table. Captions are optional, but if you are going to use one, it must be placed right
after the open table tag. The Caption tag has only one attribute - align. It can be set to
either top or bottom. This will place the caption above or below the actual table. Now we're
ready to start the first row with <tr>. (As a rule, I leave my <tr> tags
on a line by themselves. This make it easier to read the HTML code and easier to modify
the code at some future date. Trust me on this one, you won't regret it! Next, I'm going
to open my first header cell <th> tag. Header cells are the same as data cells <td> except that
a header cell is in bold and centered in the cell. You could use a <td> and add a <b>
and <center> tag, but <th> is a lot easier! In the table below, notice the Boys cell is above the Girls cell.
Stack your cells one below the other, even though they are horizontal in your table. This method has
served me well through the years, making it easier to see and modify. After the last cell in the row
is added, terminate the row with the end row tag </tr>. Start the same process over and over again
until the table is built. If you know how to copy and paste, complete your first row and copy it
over again for each row in your table. (Warning! Save and test your row before coping it!)
A Complex Table
*Bagrable is an award winning
language developed by Ray LePine
In the table below notce the first cell in this complex table is two rows high, we have
merged these two cells together. The table attribute to do this is
rowspan="2". The second cell on the top row is two columns wide,
the table attribute for this is colspan="2". And the lower right
cell is four rows high: rowspan="4". Code:
This table is three columns wide and six rows high. Look at the first row in the code.
It has only two <td> tags (the second is a <th> but that still count as a tag!) How
is that possible? Look more closely at the second tag and you'll see why, the second tag has a
colspan="2" that means this second tag spans two columns, thus setting the column count for
the first row to three columns wide. See it?
Also notice the first <td> has a rowspan="2". That means this <td> will be the
first <td> in the first row as well as the first <td> in the second row. Look
now at your second row and you can see there are only two <td> tags there. These are the second and
third <td>'s in that row, making the column count for the second row three as well.
The third row in the table has all three <td> tags, but the last <td> has a rowspan="4".
That means for this row and the next three rows in this <td> will be the last cell in each row.
The fourth, fifth, and sixth rows have only two <td> tags in each - the first and second cells. The
Last cell has already been defined in row three.
Try coding this table:
Web Page Design: Exercise 6
Let's add content to the Products page:
Copy this image to the images folder if it is not already there:
NOTE: You may have to remove the  from the name of the copied image.
For example, Doodad.gif may copy over to the images folder as Doodad.gif
Add this content to the Products page between the Main Page Comments:
<table border='0' cellspacing='0' cellpadding='5' width='600'>
<td> <img src='images/DooDad.gif'> </td>
<td valign='top'> <b>DooDad</b> </td>
A Doodad is a long plank with four square blocks on a rod suspended, on
three legs, above the plank.
<td valign='top' align='right'> <b>$45.99</b> </td>
<td> <img src='images/Gadget.gif'> </td>
<td valign='top'> <b>Gadget</b> </td>
A Gadget is a round thing with legs connected to two loops on top
of another round cylinder thing.
<td valign='top' align='right'> <b>$599.00</b> </td>
<td> <img src='images/Widget.gif'> </td>
<td valign='top'> <b>Widget</b> </td>
A Widget is three long slender slats and a shorter fat slat on top of
a pole connected to a rod with a small wheel connected to a large wheel
<td valign='top' align='right'> <b>$399.00</b> </td>