1

HTML Tables

• <table> … </table> surround table • <tr> … </tr> surround each row• <td> … </td> surround each cell• <th> … </th> like <td>, but bold and

centered by default (for table headings)• <caption> … </caption> table title

No tag to define a column. Number of columns determined by number of <td></td> pairs in a given row.

2

Tables and CSS

• Use CSS to format tables

• background-color, color, font-family, padding, margin, border, text-align … all work with tables and cells

• border-collapse: collapse;

without with

3

Spanning Rows and Columns

• Can create “irregular” tables • colspan attribute of td: # columns a cell spans

<tr> <td colspan=2>A</td></tr>

<tr> <td>B</td> <td>C</td></tr>

4

Spanning Rows and Columns

• rowspan attribute of td: # rows a cell spans

<tr> <td>A</td> <td rowspan=2>B</td></tr>

<tr> <td>C</td></tr>

4

Spanning Rows and Columns

5

Planning the Table

Anniversary Gift

1st Paper

8th

9th

Pottery

Happy…6

Using tables for layout

-------- message --------

7

Using tables for layout

8

Exercise

Exercise

2 pixel red

border5 pixels btwn text & border

Exercise