Using Tables for Layout

1
Using Tables for Layout

• INP150 Session 8

2
Layout

• Map out your page
• Design with paper and pencil
• Determine number of rows and columns you need
• Determine how many rows or columns that will span
  more than one space
• Determine the number of pixels in column width
  (600 is full table width)
• Create a skeleton with only tables defined
• Put in content

3
(No Transcript)
4
Layout

• Specify width of whole table as well as
  individual cells

5
Defining A Simple Table

• lttablegtlt/table gt
• The ending tag is not optional
• ltthgt -- Table header tag merely centers text and
  makes it bold
• ltcaption. lt/captiongt allows you to caption a
  table and align"direction" (top, bottom, left or
  right) allows you to place the caption

6
Table Borders

• lttable border"n"gt creates a border
• 0 makes sure it doesnt show
• Hint Use a border when you are creating tables
  then remove it when you are done

7
Setting the Width of the Table

• In the lttdgt or lttablegt tag, type width"n", where
  n is the desired width of the cell or of the
  entire table, in pixels

8
Details of Setting the Width

• Browsers automatically calculate table sizes
  based on elements
• Setting it by hand eliminates miscalculations
• Set it as width of columns, their elements,
  borders, and padding
• The size of a cell or table can be a percentage
  of the table or browser
• You cant make a table too small for its
  contents, the browser wont let you
• Only done for first column unless cells span
  columns
• There is also a height tag but it isnt well
  supported

9
Spanning a Cell Across Columns

• Often used for headlines with pictures and
  multi-column text.
• colspan"n" is placed in the row which will span
  columns. This n is equal to the number of columns
  you wish to span, if it is not equal to the
  maximum number of columns, you must define
  additional cells to make up the difference.

10
Spanning a Cell Across Rows

• Analogous concept to spanning cells over more
  than one column, but done in the opposite
  direction.
• rowspan"n" is placed in the row which will span
  columns. This n is equal to the number of columns
  you wish to span, if it is not equal to the
  maximum number of columns, you must define
  additional cells to make up the difference.

11
Spanning a Cell Across Rows

• If you define a rowspan of 2, you will not need
  to define the corresponding cell in the next row.
• If you define a rowspan of 3, you will not need
  to define the corresponding cells in the next two
  rows.

12
Aligning a Cells Contents

• By default, a cells contents are aligned two
  ways
• Horizontally to the left and vertically in the
  middle.
• The align "direction " (left, center or right)
  and valign"direction" (top, middle, bottom or
  baseline) tags let you change this.

13
Aligning Cells

• These attributes can be placed in the following
  tags
• tr
• td
• thead
• tfoot
• tbody
• colgroup
• col

14
Controlling Space in and Around Cells

• Cell spacing adds space between cells , making
  the table bigger without changing the size of
  individual cells (default is 2 pixels)
• Cell padding adds space between cell contents
  and its border pushing the borders of a cell
  outward (default is 1 pixel)
• Both types of padding should be eliminated when
  using cells for layout
• lttable width"480" cellspacing"0"
  cellpadding"4" border"0"gt

15
Packing Cells

• To eliminate space between the contents of one
  cell and the next, use cellspacing"0"
  cellpadding"0". This is the most common value in
  a table used for layout.
• Set the border"0".

16
Nesting Tables

• Create inner table
• Create outer table
• Put a word like PLACEHOLDER in cell that will
  house inner table
• Test both table separately
• Replace the word PLACEHOLDER with the inner table

17
Nesting Considerations

1. Nesting tables slows a page considerably
2. nbsp -- can be used to make sure a cell will
   display if it is empty
3. Change the background of the inner table to see
   how nesting is working
4. You will need two lt/tablegt tags

18
Changing Cell Colors

• In lttdgt tag, type bgcolor and a named color or
  rrggbb
• bgcolor can be in individual cells or grouping
  tags

lttrgt lttd bgcolor"339966" valign"top"gt
19
Background Images

• Treated differently in NETSCAPE and Internet
  Explorer

lttd bgcolor"339966" background"schoolfish.jpg"
valign"top"gt