A BASIC 3X2 TABLE
A | B | C |
D | E | F |
<table border="1"> <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="1"> <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="1"> <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="1"> <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="1"> <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="1"> <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="1"> <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="1"> <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="1"> <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="1"> <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>
A TABLE WITHOUT BORDERS
Item 1 | Item 2 | Item 3 |
Item 4 | Item 5 |
<table border="0"> <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="1" 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="1" 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="1" 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>
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="1"> <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="1"> <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="1"> <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
January | February | March |
---|---|---|
This is cell 1 | Cell 2 | Another cell, cell 3 |
<table border="1"> <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 |
<table border="1"> <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
|
||||
4 | 5 | 6 |
<table border="1"> <tr> <!-- ROW 1, TABLE 1 --> <td>1</td> <td>2</td> <td>3 <table border="1"> <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>
BASIC 50% WIDTH
Width=50% | Width=50% |
3 | 4 |
<table border="1" 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="1" 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="1" 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="1" 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 AND NESTED TABLES
Item 1 | Item 2 | ||
|
Item 4 |
<table border="1" width="50%"> <tr><td>Item 1</td><td>Item 2</td> </tr> <tr><td> <table border="1" width="100%"> <tr><td>Item A</td><td>Item B</td> </tr> </table> </td> <td>Item 4</td> </tr> </table>
HEIGHT=15%
height=15% | Item 2 |
3 | 4 |
<table border="1" width="50%" height="15%"> <tr><td>height=15%</td> <td>Item 2</td> </tr> <tr><td>3</td><td>4</td> </tr> </table>