Tables, like lists, are ways to organize information on Web pages. For many years, they were also used to do layout and design but better methods have evolved for this so tables are now used primarily for what they've always been used for: placing data in rows and columns.
Simple table:
Source:
<table>
<tr>
<td>One</td>
<td>Two</td></tr>
<tr>
<td>Three</td>
<td>Four</td></tr>
</table>
Simple table parts:
<table> | |
begins the table |
<tr> | |
creates the first table row |
<td>one</td> | |
adds first data cell to row |
<td>two</td> | |
adds second data cell to row |
</tr> | |
ends the first table row |
<tr> | |
creates the second table row |
<td>three</td> | |
adds data cell to second row |
<td>four</td> | |
adds data cell to second row |
</tr> | |
ends the second table row |
</table> | |
ends table |
Table Border:
Source:
<style>
td {
border: #600 solid 10px; ;
}
</style>
<table>
<tr>
<td>One</td>
<td>Two</td></tr>
<tr>
<td>Three</td>
<td>Four</td></tr>
</table>
Source:
<style>
td {
border: #9cc solid 2px;
}
</style>
<table>
<tr>
<td>One</td>
<td>Two</td></tr>
<tr>
<td>Three</td>
<td>Four</td></tr>
</table>
Source:
<style>
td {
border: 0;
}
</style>
<table>
<tr>
<td>One</td>
<td>Two</td></tr>
<tr>
<td>Three</td>
<td>Four</td></tr>
</table>
Table Cell Padding:
Source:
<style>
td {
border: #000 solid 1px;
padding: 25px;
}
</style>
<table>
<tr>
<td>One</td>
<td>Two</td></tr>
<tr>
<td>Three</td>
<td>Four</td></tr>
</table>
Table Border Spacing:
Border Collapsed
Source:
<style>
table {
border-collapse: collapse;
}
table td {
border: #000 solid 1px; }
</style>
<table>
<tr>
<td>One</td>
<td>Two</td></tr>
<tr>
<td>Three</td>
<td>Four</td></tr>
</table>
Border Collapsed
Web page:
Border Separated
Source:
<style>
table {
border-collapse: separate;
border-spacing: 20px;
}
table td {
border: #000 solid 1px; }
</style>
<table>
<tr>
<td>One</td>
<td>Two</td></tr>
<tr>
<td>Three</td>
<td>Four</td></tr>
</table>
Border Separated
Web page:
Table Width:
Source:
<style>
table {
width: 200px;
}
table td {
border: #000 solid 1px; }
</style>
<table>
<tr>
<td>One</td>
<td>Two</td></tr>
<tr>
<td>Three</td>
<td>Four</td></tr>
</table>
More rows, columns and a caption:
Source:
<style>
table {
border-collapse: collapse;
}
table td {
border: #000 solid 1px;
padding: 10px; }
</style>
<table>
<caption>A Bunch of Numbers</caption>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
<td>Seven</td>
<td>Eight</td>
</tr>
<tr>
<td>Nine</td>
<td>Ten</td>
<td>Eleven</td>
<td>Twelve</td>
</tr>
<tr>
<td>Thirteen</td>
<td>Fourteen</td>
<td>Fifteen</td>
<td>Sixteen</td>
</tr>
</table>
Web page:
A Bunch of Numbers
One |
Two |
Three |
Four |
Five |
Six |
Seven |
Eight |
Nine |
Ten |
Eleven |
Twelve |
Thirteen |
Fourteen |
Fifteen |
Sixteen |
The colspan tag:
Source:
<style>
table {
border-collapse: collapse;
}
table td {
border: #000 solid 1px;
padding: 10px; }
</style>
<table>
<tr>
<td colspan="3">This row is spanning the three columns below it.</td></tr>
<tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td></tr>
<td>Four</td>
<td>Five</td>
<td>Six</td></tr>
</table>
Web page:
This row is spanning the three columns below it. |
One |
Two |
Three |
Four |
Five |
Six |
The rowspan tag:
Source:
<style>
table {
border-collapse: collapse;
}
table td {
border: #000 solid 1px;
padding: 10px; }
</style>
<table>
<tr>
<td rowspan="3">This column is spanning the three rows next to it.</td>
<td>One</td>
<td>Two</td>
<td>Three</td></tr>
<tr>
<td>Four</td>
<td>Five</td>
<td>Six</td></tr>
<tr>
<td>Seven</td>
<td>Eight</td>
<td>Nine</td></tr>
</table>
Web page:
This column is spanning the three rows next to it. |
One |
Two |
Three |
Four |
Five |
Six |
Seven |
Eight |
Nine |
Complex table with nested tables inside:
Source:
<style>
table {
border-collapse: collapse;
}
table td {
border: #000 solid 1px;
padding: 7px; }
</style>
<table border="1" cellspacing="5" cellpadding="5">
<tr>
<th colspan="2">Numbers</th>
<tr>
<td>1</td>
<td>2</td>
<td></td>
<th colspan="2">Letters</th>
<tr>
<td>3</td>
<td>4</td>
<td></td>
<td>A</td>
<td>B</td>
<td></td>
<th colspan="3">Colors</th>
<tr>
<td>5</td>
<td>6</td>
<td></td>
<td>C</td>
<td>D</td>
<td></td>
<td><img src="red.gif"></td>
<td><img src="green.gif"></td>
<td><img src="blue.gif"></td>
<td></td>
<th colspan="3">Stooges</th>
<tr>
<td colspan="2">
<table>
<tr>
<td>I</td>
<td>II</td>
<td>III</td>
<tr>
<td>IV</td>
<td>V</td>
<td>VI</td></table></td>
<td></td>
<td colspan="2">
<table>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</table></td>
<td></td>
<td><img src="cyan.gif"></td>
<td><img src="magenta.gif"></td>
<td><img src="yellow.gif"></td>
<td></td>
<td><img src="larry.gif"></td>
<td><img src="curly.gif" width="31" height="32" border="0"></td>
<td><img src="moe.gif"></td>
</table>