HTML Tables

1
HTML Tables

• lttablegt lt/tablegt surround table
• lttrgt lt/trgt surround each row
• lttdgt lt/tdgt surround each cell
• ltthgt lt/thgt like lttdgt, but bold and centered by
  default (for table headings)
• ltcaptiongt lt/captiongt table title

No tag to define a column. Number of columns
determined by number of lttdgtlt/tdgt 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

with
without
3
Spanning Rows and Columns

• Can create irregular tables
• colspan attribute of td columns a cell spans

lttrgt lttd colspan2gtAlt/tdgt lt/trgt lttrgt
lttdgtBlt/tdgt lttdgtClt/tdgt lt/trgt
4
Spanning Rows and Columns

• rowspan attribute of td rows a cell spans

lttrgt lttdgtAlt/tdgt lttd rowspan2gtBlt/tdgt lt/trgt
lttrgt lttdgtClt/tdgt lt/trgt
29
5
Spanning Rows and Columns
6
Planning the Table
Anniversary
Gift
1st
Paper
8th
Pottery
9th
Happy
7
Using tables for layout
-------- message --------
8
Using tables for layout
9
Exercise
10
Exercise
2 pixel red border
5 pixels btwn text border
11
Exercise