HTML Tables
CSE 190 M (Web Programming) Spring 2007
University of Washington
Reading: Sebesta Ch. 2 section 2.8
Except where otherwise noted, the contents of this presentation are © Copyright 2007 Marty Stepp and are licensed under the Creative Commons Attribution 2.5 License.
<table>
<tr><td>1,1</td><td>1,2</td></tr>
<tr><td>2,1</td><td>2,2</td></tr>
</table>
table defines the overall table, tr each row, and td each cell's data
<table>
<caption>My important data</caption>
<tr><th>Column 1</th><th>Column 2</th></tr>
<tr><td>1,1</td><td>1,2</td></tr>
<tr><td>2,1</td><td>2,2</td></tr>
</table>
My important data
| Column 1 | Column 2 |
|---|
| 1,1 | 1,2 |
| 2,1 | 2,2 |
th cells in a row are considered headers; by default, they appear bold- a
caption at the start of the table labels its meaning
Styling tables
table { border: 2px solid black; caption-side: bottom; }
tr { font-style: italic; }
td { background-color: yellow; text-align: center; width: 30%; }
My important data
| Column 1 | Column 2 |
|---|
| 1,1 | 1,2 |
| 2,1 | 2,2 |
- all standard CSS styles can be applied to a table, row, or cell
- table specific CSS properties:
table, td, th { border: 2px solid black; }
table { border-collapse: collapse; }
Without border-collapse
| Column 1 | Column 2 |
|---|
| 1,1 | 1,2 |
| 2,1 | 2,2 |
With border-collapse
| Column 1 | Column 2 |
|---|
| 1,1 | 1,2 |
| 2,1 | 2,2 |
- by default, the overall table has a separate border from each cell inside
- the
border-collapse property merges these borders into one
The rowspan and colspan attributes
<table>
<tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
<tr><td colspan="2">1,1-1,2</td>
<td rowspan="3">1,3-3,3</td></tr>
<tr><td>2,1</td><td>2,2</td></tr>
<tr><td>3,1</td><td>3,2</td></tr>
</table>
| Column 1 | Column 2 | Column 3 |
|---|
| 1,1-1,2 | 1,3-3,3 |
| 2,1 | 2,2 |
| 3,1 | 3,2 |
colspan makes a cell occupy multiple columns; rowspan multiple rows
<table>
<col style="background-color: pink" />
<colgroup style="background-color: yellow">
<col /><col /></colgroup>
<tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
<tr><td>1,1</td><td>1,2</td><td>1,3</td></tr>
<tr><td>2,1</td><td>2,2</td><td>2,3</td></tr></table>
| Column 1 | Column 2 | Column 3 |
|---|
| 1,1 | 1,2 | 1,3 |
| 2,1 | 2,2 | 2,3 |
col tag can be used to define styles that apply to an entire columncolgroup tag group several columns to apply a style to all of them
Don't use tables for layout!
- (borderless) tables appear to be an easy way to achieve grid-like page layouts
- many "newbie" web pages do this (including several of Marty's web pages)
- but, a
table has semantics; it should be used only when you are actually representing a table of data
- instead of tables, use divs, widths/margins, floats, etc. to perform layout
- tables should not be used for layout!
- tables should not be used for layout!
- tables should not be used for layout!