Demonstration of tag Table

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>
January February March
This is cell 1 Cell 2 Another cell,
cell 3
A bottom caption
<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

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>

Label: