The Table Sampler
This is intended to be a tutorial by example of Tables. This covers
most of the new tags in tables, though it doesn't necessarily show
some of the really creative capabilities available in tables.
A basic 3x2 table
<table border>
<tr>
<td>A</td> <td>B</td> <td>C</td>
</tr>
<tr>
<td>D</td> <td>E</td> <td>F</td>
</tr>
</table>
Two demonstrations of rowspan
Item 1 |
Item 2 |
Item 3 |
Item 4 | Item 5 |
<table border>
<tr>
<td>Item 1</td>
<td rowspan=2>Item 2</td>
<td>Item 3</td>
</tr>
<tr>
<td>Item 4</td> <td>Item 5</td>
</tr>
</table>
Item 1 |
Item 2 | Item 3 | Item 4 |
Item 5 | Item 6 | Item 7 |
<table border>
<tr>
<td rowspan=2>Item 1</td>
<td>Item 2</td> <td>Item 3</td> <td>Item 4</td>
</tr>
<tr>
<td>Item 5</td> <td>Item 6</td> <td>Item 7</td>
</tr>
</table>
Demonstration of colspan
Item 1 |
Item 2 |
Item 3 | Item 4 | Item 5 |
<table border>
<tr>
<td>Item 1</td>
<td colspan=2>Item 2</td>
</tr>
<tr>
<td>Item 3</td> <td>Item 4</td> <td>Item 5</td>
</tr>
</table>
Demonstration of headers, <th>
Head1 | Head2 | Head3 |
A | B | C |
D | E | F |
<table border>
<tr>
<th>Head1</th> <th>Head2</th> <th>Head3</th>
</tr>
<tr>
<td>A</td> <td>B</td> <td>C</td>
</tr>
<tr>
<td>D</td> <td>E</td> <td>F</td>
</tr>
</table>
Demonstration of colspan and Headers
Head1 |
Head2 |
A | B | C | D |
E | F | G | H |
<table border>
<tr>
<th colspan=2>Head1</th>
<th colspan=2>Head2</th>
</tr>
<tr>
<td>A</td> <td>B</td> <td>C</td> <td>D</td>
</tr>
<tr>
<td>E</td> <td>F</td> <td>G</td> <td>H</td>
</tr>
</table>
Demonstration of multiple headers, colspan
Head1 |
Head2 |
Head 3 | Head 4 |
Head 5 | Head 6 |
A | B | C | D |
E | F | G | H |
<table border>
<tr>
<th colspan=2>Head1</th>
<th colspan=2>Head2</th>
</tr>
<tr>
<th>Head 3</th> <th>Head 4</th>
<th>Head 5</th> <th>Head 6</th>
</tr>
<tr>
<td>A</td> <td>B</td> <td>C</td> <td>D</td>
</tr>
<tr>
<td>E</td> <td>F</td> <td>G</td> <td>H</td>
</tr>
</table>
Demonstration of side headers
Head1 |
Item 1 | Item 2 | Item 3 |
Head2 |
Item 4 | Item 5 | Item 6 |
Head3 |
Item 7 | Item 8 | Item 9 |
<table border>
<tr><th>Head1</th>
<td>Item 1</td> <td>Item 2</td> <td>Item 3</td></tr>
<tr><th>Head2</th>
<td>Item 4</td> <td>Item 5</td> <td>Item 6</td></tr>
<tr><th>Head3</th>
<td>Item 7</td> <td>Item 8</td> <td>Item 9</td></tr>
</table>
Demonstration of side headers, rowspan
Head1 |
Item 1 | Item 2 | Item 3 | Item 4 |
Item 5 | Item 6 | Item 7 | Item 8 |
Head2 |
Item 9 | Item 10 | Item 3 | Item 11 |
<table border>
<tr><th rowspan=2>Head1</th>
<td>Item 1</td> <td>Item 2</td> <td>Item 3</td> <td>Item 4</td>
</tr>
<tr><td>Item 5</td> <td>Item 6</td> <td>Item 7</td> <td>Item 8</td>
</tr>
<tr><th>Head2</th>
<td>Item 9</td> <td>Item 10</td> <td>Item 3</td> <td>Item 11</td>
</tr>
</table>
Sample table, using all of these
| |
Average |
| Height | Weight |
Gender |
Males | 1.9 | 0.003 |
Females | 1.7 | 0.002 |
<table border>
<tr> <td><th rowspan=2></th>
<th colspan=2>Average</th></td>
</tr>
<tr> <td><th>Height</th><th>Weight</th></td>
</tr>
<tr> <th rowspan=2>Gender</th>
<th>Males</th><td>1.9</td><td>0.003</td>
</tr>
<tr> <th>Females</th><td>1.7</td><td>0.002</td>
</tr>
</table>
Clever uses of rowspan/colspan
<table border>
<tr>
<td align=center rowspan=2 colspan=2>A</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td align=center rowspan=2 colspan=2>C</td>
<td align=center rowspan=2 colspan=2>D</td>
</tr>
<tr>
</tr>
</table>
Adjusting margins and borders
A table without borders
Item 1 | Item 2 | Item 3 |
Item 4 | Item 5 |
<table>
<tr> <td>Item 1</td> <td rowspan=2>Item 2</td> <td>Item 3</td>
</tr>
<tr> <td>Item 4</td> <td>Item 5</td>
</tr>
</table>
A table with a border of 10
Item 1 | Item 2 |
Item 3 | Item 4 |
<table border=10>
<tr> <td>Item 1</td> <td> Item 2</td>
</tr>
<tr> <td>Item 3</td> <td>Item 4</td>
</tr>
</table>
cellpadding and cellspacing
<table border cellpadding=10 cellspacing=0>
<tr>
<td>A</td> <td>B</td> <td>C</td>
</tr>
<tr>
<td>D</td> <td>E</td> <td>F</td>
</tr>
</table>
<table border cellpadding=0 cellspacing=10>
<tr>
<td>A</td> <td>B</td> <td>C</td>
</tr>
<tr>
<td>D</td> <td>E</td> <td>F</td>
</tr>
</table>
<table border cellpadding=10 cellspacing=10>
<tr>
<td>A</td> <td>B</td> <td>C</td>
</tr>
<tr>
<td>D</td> <td>E</td> <td>F</td>
</tr>
</table>
<table border=5 cellpadding=10 cellspacing=10>
<tr>
<td>A</td> <td>B</td> <td>C</td>
</tr>
<tr>
<td>D</td> <td>E</td> <td>F</td>
</tr>
</table>
Alignments, Captions, Subtables
Demonstration of multiple lines in a table
January |
February |
March |
This is cell 1 |
Cell 2 |
Another cell, cell 3 |
Cell 4 |
and now this is cell 5 |
Cell 6 |
<table border>
<tr>
<th>January</th>
<th>February</th>
<th>March</th>
</tr>
<tr>
<td>This is cell 1</td>
<td>Cell 2</td>
<td>Another cell,<br> cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>and now this<br>is cell 5</td>
<td>Cell 6</td>
</tr>
</table>
align=left|right|center
can be applied to individual cells or whole rows
January |
February |
March |
all aligned center |
Cell 2 |
Another cell, cell 3 |
aligned right |
aligned to center |
default, aligned left |
<table border>
<tr>
<th>January</th>
<th>February</th>
<th>March</th>
</tr>
<tr align=center>
<td>all aligned center</td>
<td>Cell 2</td>
<td>Another cell,<br> cell 3</td>
</tr>
<tr>
<td align=right>aligned right</td>
<td align=center>aligned to center</td>
<td>default,<br>aligned left</td>
</tr>
</table>
valign=top|bottom|middle
can be applied to individual cells or whole rows
January |
February |
March |
all aligned to top |
and now this is cell 2 |
Cell 3 |
aligned to the top |
aligned to the bottom |
default alignment, center |
<table border>
<tr>
<th>January</th>
<th>February</th>
<th>March</th>
</tr>
<tr valign=top>
<td>all aligned to top</td>
<td>and now this<br>is cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td valign=top>aligned to the top</td>
<td valign=bottom>aligned to the bottom</td>
<td>default alignment,<br>center</td>
</tr>
</table>
caption=top|bottom
A top caption
January |
February |
March |
This is cell 1 |
Cell 2 |
Another cell, cell 3 |
<table border>
<caption align=top>A top caption</caption>
<tr>
<th>January</th>
<th>February</th>
<th>March</th>
</tr>
<tr>
<td>This is cell 1</td>
<td>Cell 2</td>
<td>Another cell,<br> cell 3</td>
</tr>
</table>
A bottom caption
January |
February |
March |
This is cell 1 |
Cell 2 |
Another cell, cell 3 |
<table border>
<caption align=bottom>A bottom caption</caption>
<tr>
<th>January</th>
<th>February</th>
<th>March</th>
</tr>
<tr>
<td>This is cell 1</td>
<td>Cell 2</td>
<td>Another cell,<br> cell 3</td>
</tr>
</table>
Nested Tables: Table ABCD is inside Table 123456
<table border>
<tr> <!-- row 1, table 1 -->
<td>1</td>
<td>2</td>
<td>3
<table border>
<tr> <!-- row 1, table 2 -->
<td>A</td>
<td>B</td>
</tr>
<tr> <!-- row 2, table 2 -->
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr> <!-- row 2, table 1 -->
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
Table Widths
Basic 50% width
<table border width="50%">
<tr><td>Width=50%</td><td>Width=50%</td>
</tr>
<tr><td>3</td><td>4</td>
</tr>
</table>
Item width affects cell size | 2 |
3 | 4 |
<table border width="50%">
<tr><td>Item width affects cell size</td><td>2</td>
</tr>
<tr><td>3</td><td>4</td>
</tr>
</table>
width=100% | This is item 2 |
3 | 4 |
<table border width="100%">
<tr><td>width=100%</td><td>This is item 2</td>
</tr>
<tr><td>3</td><td>4</td>
</tr>
</table>
Centering a table on a page
<center>
<table border width="50%">
<tr>
<td>A</td> <td>B</td> <td>C</td>
</tr>
<tr>
<td>D</td> <td>E</td> <td>F</td>
</tr>
</table>
</center>
Table Width & Nested Tables
<table border width="50%">
<tr><td>Item 1</td><td>Item 2</td>
</tr>
<tr><td>
<table border width=100%>
<tr><td>Item A</td><td>Item B</td>
</tr>
</table>
</td>
<td>Item 4</td>
</tr>
</table>
height=15%
<table border width="50%" height="15%">
<tr><td>height=5%</td> <td>Item 2</td>
</tr>
<tr><td>3</td><td>4</td>
</tr>
</table>
Copyright © 1995
Hagan Heller.
The information on these pages may be freely copied, so
long as they are not sold and this copyright information is included.