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

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%
3 | 4

    <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

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

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

### Colored Table Cells

Greetings
Stranger

    <table align=center width=50% border=1>
    <tr><td bgcolor=#ffdddd>Greetings</td></tr>
    <tr><td bgcolor=#ccffff>Stranger</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.