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>
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>
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>
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>
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>
Web page:
One Two
Three Four

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:
One Two
Three Four
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:
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>
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>
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>
Web page:
Numbers
1 2 Letters
3 4 A B Colors
5 6 C D Stooges
I II III
IV V VI
a b c
d e f
Previous | Webwork Table of Contents | Next >
photographs:

Semblance Portrait Project
The Built World
Greece
Hungary/Czech Republic
Poland
Graffiti
Simple Truths
Israel


Paris
Puebla, Mexico
Spain
Along the Mississippi
Italy
Santa Fe
The Reliance Building
Providence
archive:

Webwork
The Web Page from Hell
The Portals Project
Transition
Insights
Internet Spelling Guide
Ape Silverback (Primate Ruminations)
Revenge of the Movie Poster
GIFs 4 Us
The Web Rules
Webpix
Backgrounds 4 Us
Webpaper
Digital Sketches
Fonts
Sounds
© Jay Boersma