PHOTOGRAPHY AND GRAPHICS BY JAY BOERSMA
|
 Table Samples |
|
|
A very simple table followed by the HTML that created it:
One Two Three Four
<table border="1"> begins the table and specifies border size <tr> creates the first horizontal table row <td>one</td> adds first data cell to row <td>two</td> adds second data cell to row </tr> ends the first horizontal table row <tr> creates the second horizontal table row <td>three</td> adds data cell to second row <td>four</td> adds data cell to second row </tr> ends the second horizontal table row </table> ends table
The same table set for 50% of screen width:
One Two Three Four <table border="1" width="50%">
The same table set for 600-pixel screen width:
One Two Three Four <table border="1" width="600">
...with a border of 5:
One Two Three Four <table border="5">
...with a border of 0:
One Two Three Four <table border="0">
...with the word "one" aligned=right in the cell:
One Two Three Four <td align="right">one</td>
...with the letters A, B and C aligned=center in the cell
and the word "Two" vertically-aligned bottom:
A
B
C
Two Three Four <td align="center">A<br>B<br>C</td>
<td valign="bottom">Two</td>
...with cellspacing set to 10:
One Two Three Four <table border="1" cellspacing="10">
...with cellpadding set to 10:
One Two Three Four <table border="1" cellpadding="10">
A single-cell table as a pushbutton:
PUSH <p>
<table border="10" cellpadding="5">
<tr><td align="center">
<b><a href="button.html">PUSH</a></b>
</td></tr>
</table>
A table with a few more rows, columns, and a caption:
Table of Numbers One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen Sixteen <caption align="top"> Table of Numbers
The colspan (column span) tag:
Table of Numbers One/Two/Three/Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen/Sixteen <td align="center" colspan="4"> One/Two/Three/Four
<td align="center" colspan="2"> Fifteen/Sixteen
The rowspan (row span) tag:
Table of Numbers One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen Sixteen <td align="center" rowspan="3"> One
<td align="center" rowspan="3"> Ten
Combining several of the above table tags
- non-breaking spaces, ( ) used to populate empty cells:
Table of Numbers Odd Even One-digit Two-digit One-digit Two-digit One Three Eleven Thirteen Two Four Ten Twelve Five Seven Fifteen Seventeen Six Eight Fourteen Sixteen Nine Nineteen Twenty-one Eighteen Twenty
A table with other tables inside:
Numbers 1 2 Letters 3 4 A B Colors 5 6 C D Stooges
I II III IV V VI
a b c d e f <Previous | Webwork Table of Contents | Next>
