Tables Lesson 3

1
Tables Lesson 3

• Borders, Spacing and Table Size

2
Table Borders...

• You can create Table Borders by adding the BORDER
  attribute to the ltTABLEgt tag.
• You can set the border to be any pixel size you
  want.
• An example of a table with a 5 pixel wide
  borderltTABLE BORDER5gt

3
Take a look at the border...
4
Table Spacing...

• You can set the spacing between cellsUse the
  CELLSPACING attribute within the ltTABLEgt
• For exampleltTABLE CELLSPACING5gt
• You can set the distance between the text or
  images within a given cell and the edge of the
  cell.
• For exampleltTABLE CELLPADDING5gt

5
For the visual learner...
Cellspacing
Cellpadding
Notice the Padding between the text and the
edge of the cell.
Notice the space between one cell and the next
cell
6
Take a look at the code...
7
Table Size/Width

• You can set the size of your table by adding the
  width attribute tag to the ltTABLEgt tag.
• The width can either be specified in pixels or in
  percentages.
• For exampleltTABLE WIDTH400gt or ltTABLE
  WIDTH100gt

8
Take a look at an example of setting the table
width...
Notice the table width is exactly 50 of the
width of the browser
9
You can also set the width of each column...

• To set the width of each column for the entire
  table, you must do so in the first row. You set
  the column widths by setting the width of each
  cell in the FIRST ROW.
• Do not change the width of the cells in the
  second row.
• Set the width by adding the WIDTH attribute to
  either your ltTDgt or ltTHgt tag.
• For exampleltTD WIDTH10gt

10
Take a look at setting different column widths...
Notice the Widths that have been set for the
columns
11
Your Assignment...

• Using the table you created from lesson 2, give
  your table the following
• Border size10
• Cell padding15
• Cell spacing20
• Table width75
• Column 1 width25
• Column 2 width25
• Column 3 width50