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