Table Nomenclature

You need to understand all these terms (see reading below):

  • row
  • column
  • cell
  • padding
  • spacing
  • border

Read the following:

  • Castro, HTML for the WWW, chapter 14: pages 217-218, 220-221, 226-227, 230-233, 240
  • HTML Source Tutorial on Basic Tables which covers basic code, attributes, alignment, and tabel & cell width.
  • HTML Source Tutorial on Advanced Tables especially the sections on headers, colspan and rowspan.

Objective

We want to create a table like the one below:


Six Nations championship table from the BBC web site.

Instructions

  1. Open Dreamweaver, make your site h:\www, and create a new file.
    Title it Table Practice and save with the filename table.htm .

  2. Click the Design View button

  3. Select Insert —> Table

  4. count number of rows (10)
    count number of columns (7)
    table width can be either in pixels (fixed) or % of browser window (moveable -liquid) (400)
    cell padding (4)
    Cell spacing (0) This will give a single pixel border.
    border (1) so that we can see where the lines are.

  5. In the top row we want all the cells joined together to form a single cell.
    Select the row by positioning the cursor at the extreme left and clicking once, comme ca:

    In "Properties pane:Row" section click the "merges selected cells using spans" button. All 7 cells are merged together to form a single cell across the table.
    Repeat for the row underneath

  6. Type in "Six Nations Championship" into the first cell.
    In "Properties pane:Row" section choose Horz -> Center (the text centers), then
    check Header box (text bolds).

  7. In the next row, type in "September 23, 2002" and right align the cell contents.

  8. In row #4, enter "P, W, D, L, PTS" into successsive cells as in the table (notice how the cells expand).
    Select cells #1 & #2 and merge them together.
    Select the row and then center the cell's contents as before in #5

  9. Enter results into the next 6 rows

  10. For the last row, merge all the cells and select Insert —> Horizontal Rule to put in an HR.

  11. Now we want to center all the numbers in each row.
    Select the row, then Properties: Row: Horz ->Center
    What code is produced when you align:center compared with horiz:center ?
    Now left align the country - select appropriate cell and then
    Properties: Cell: Horz ->Left

  12. Save the file.