Webwork
/
Tables
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>
<tr>
<td>One</td>
<td>Two</td></tr>
<tr>
<td>Three</td>
<td>Four</td></tr>
</table>
Web page:
| One | Two |
| Three | Four |
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>
td {
border: #600 solid 10px; ;
}
</style>
<table>
<tr>
<td>One</td>
<td>Two</td></tr>
<tr>
<td>Three</td>
<td>Four</td></tr>
</table>
Web page:
| One | Two |
| Three | Four |
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>
td {
border: #9cc solid 2px;
}
</style>
<table>
<tr>
<td>One</td>
<td>Two</td></tr>
<tr>
<td>Three</td>
<td>Four</td></tr>
</table>
Web page:
| One | Two |
| Three | Four |
Source:
<style>
td {
border: 0;
}
</style>
<table>
<tr>
<td>One</td>
<td>Two</td></tr>
<tr>
<td>Three</td>
<td>Four</td></tr>
</table>
td {
border: 0;
}
</style>
<table>
<tr>
<td>One</td>
<td>Two</td></tr>
<tr>
<td>Three</td>
<td>Four</td></tr>
</table>
Web page:
| One | Two |
| Three | Four |
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>
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>
Web page:
| One | Two |
| Three | Four |
Table Border Spacing:
Border Collapsed
Source:
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>
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:
Web page:
| One | Two |
| Three | Four |
Border Separated
Source:
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>
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:
Web page:
| One | Two |
| Three | Four |
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>
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>
Web page:
| One | Two |
| Three | Four |
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>
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:
| 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>
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>
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>
<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>
Web page:
| Numbers | ||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | 2 | Letters | ||||||||||||||||||||||
| 3 | 4 | A | B | Colors | ||||||||||||||||||||
| 5 | 6 | C | D |  |
 |
 |
Stooges | |||||||||||||||||
|
|
 |
 |
 |
 |
 |
 |
|||||||||||||||||
