HTML Tables

1
HTML Tables

• Introduction to Tables
• Table Format
• Table Captions
• Table Example
• Excercise

2
Introduction to Tables

• Why Tables?
• Organized layout of information
• Allows good organization of webpage
• Can be used to replace static frames

3
Table Format
ltTABLE optionsgt ltTR optionsgt ltTH optionsgt
lt/THgt ltTD optionsgt lt/TDgt lt/TRgt lt/TABLEgt
4
lttablegt options
border 0/1 cellpadding 0.. cellspacing
0.. width 0..100 / x (x is a pixel value)
5
Examples

• lttable border"1"gt lttrgtltthgtYearlt/thgtltthgtSaleslt/thgt
  lt/trgt lttrgtlttdgt2000lt/tdgtlttdgt18Mlt/tdgtlt/trgt
  lttrgtlttdgt2001lt/tdgtlttdgt25Mlt/tdgtlt/trgt
  lttrgtlttdgt2002lt/tdgtlttdgt36Mlt/tdgtlt/trgt lt/tablegt
• If you add the following
• lttable border"1" cellpadding"10"gt

6
Examples

• By contrast the cellspacing attribute sets the
  space between the cells. Setting the cell spacing
  to 10
• lttable border"1" cellpadding"10"
  cellspacing"10"gt
• has the effect

7
Examples

• Table Width
• You can set the width of the table using the
  width attribute. The value is either the width in
  pixels or a percentage value representing the
  percentage of the space available between the
  left and right margins. For instance to set the
  width to 80 of the margins
• lttable border"1" cellpadding"10" width"80"gt

8
lttrgt options (table row)
align leftcenterright valign
topmiddlebottom
9
Examples
You can change alignment using the align
attribute, which can be added to each cell or to
the row (tr element). It is used with the values
"left", "center" or "right" lttable border"1"
cellpadding"10" width"80"gt lttr
align"center"gt ltthgtYearlt/thgtltthgtSaleslt/thgtlt/trgt
lttr align"center"gtlttdgt2000lt/tdgtlttdgt18Mlt/tdgtlt/tr
gt lttr align"center"gtlttdgt2001lt/tdgtlttdgt25Mlt/tdgtlt/t
rgt lttr align"center"gtlttdgt2002lt/tdgtlttdgt36Mlt/tdgtlt/
trgt lt/tablegt
10
ltthgt options (table header)
rowspan 0.. colspan 0.. bgcolor rgb
colour codecolour
11
Examples
lttable border"1" cellpadding"10"
width"80"gt lttr align"center"gt ltth
rowspan"2"gtYearlt/thgtltth colspan"3"gtSaleslt/thgtlt/t
rgt lttr align"center"gtltthgtNorthlt/thgtltthgtSouthlt/thgt
ltthgtTotallt/thgtlt/trgt lttr align"center"gt lttdgt2000lt/
tdgtlttdgt10Mlt/tdgtlttdgt8Mlt/tdgtlttdgt18Mlt/tdgt lt/trgt
lttr align"center"gtlttdgt2001lt/tdgtlttdgt14Mlt/tdgtlttdgt
11Mlt/tdgtlttdgt25Mlt/tdgt lt/trgt lt/tablegt
12
Example
13
lttdgt options (table data)
width 0..100 bgcolor rgb colour
codecolour align leftcenterright valign
topmiddlebottom
14
Example
lttable border1" cellspacing10"
cellpadding"10"gt lttrgt ltth bgcolor"CCCC99"gtYearlt
/thgt ltth bgcolor"CCCC99"gtSaleslt/thgt lt/trgt lttrgt lt
td bgcolor"FFFF66"gt2000lt/tdgt lttd
bgcolor"FFFF66"gt18Mlt/tdgt lt/trgt lttrgt lttd
bgcolor"FFFF66"gt2001lt/tdgt lttd
bgcolor"FFFF66"gt25Mlt/tdgt lt/trgt lttrgt lttd
bgcolor"FFFF66"gt2002lt/tdgt lttd
bgcolor"FFFF66"gt36Mlt/tdgt lt/trgt lt/tablegt