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

A B C
D E F 
<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
HeightWeight
Gender Males1.90.003
Females1.70.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

A 1 2
3 4
C D 
<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

A B C
D E F 

<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>
A B C
D E F 
<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>
A B C
D E F 
<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>

A B C
D E F 

<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

1 2 3
A B
C D
4 5 6 
<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

Width=50%Width=50%
34 
<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 size2
34 

<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
34 

<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

A B C
D E F 
<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

Item 1Item 2
Item AItem B
Item 4 
<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%

height=5% Item 2
34 

<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.