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 >
Re-Vision.com

projects:
Simple Truths (and Complex Lies)

The Built World
Semblance Portrait Project
Back to Square One
Changing Chicago
Chicago's Reliance Building
US
Along the Mississippi River
The Work of Antoni Gaudí
Graffiti

places:
Morocco 2023
Beecher, Illinois
Iceland 2017
Cuba 2015
Providence, Rhode Island
Greece 2013
Eastern Europe 2013
Israel 2010
Paris, France
Puebla, Mexico 2009
Puerto Rico 2009
Barcelona 2007
Rome, Italy 2006

archive:
Graphics, sounds, and other ancient
items from the dawn of the Web.

FWIW:
Biography

©
Jay Boersma