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