B08 - Tables

• B08a: - (0:41)
  • History
    • Tables were created for displaying information suited for tables - tabular data.
    • Similar to an Excel spreadsheet in how it displays information.
    • Used for page layout prior to CSS and still used for that purpose in a few sites.
• B08b: - (2:54)
  • Essential table tags
    • <table> - all table elements are nested within the table element.
    • <tr> - table row. Every row must have this tag. The individual cells are nested within it.
    • <td> - "table data" - essentially a cell as in an Excel spreadsheet.
    • <th> - a special form of td cell: contents are centered and text is made bold.
• B08c: - (1:53)
  • Examples of tables in use and nested tables:
    • A nested table goes entirely inside a single cell of the table it is nested within.
    • LA Public Library
    • Skole Minor League Baseball
• B08d: - (2:18)
  • The table tag's attributes:
    • border
    • width
    • cellpadding
      • distance between cell contents and cell wall.
    • cellspacing
      • distance between cells.
    • The above are deprecated in html5 and the same appearance is supposed to be accomplished using CSS, but you will still see these attributes.
• B08e: - (3:29)
  • td and th attributes
    • There are several but I will discuss only:
      • colspan
        • Allows a cell to extend into more than one column.
        • The default is 1
        • If colspan=2 is used, then there needs to be one less td or th tag in that row.
      • rowspan
        • Allows a cell to extend into more than one row.
        • The default is 1
        • If rowspan=2 is used, then there needs to be one less td or th tag in the second row.
• B08f: - (6:13)
  • Assignment:
    • Create a file named:
      • yourlastname_B08.html
    • Create a table as seen in the video.
    • Give the table tag the following attributes and values:
      • border=1
      • width=60%
        • This means the table will fill 60% of the width of the browser window.
    • The top row's only cell spans all four columns and is bold and centered.
      • Accomplish the bold and centering using one of the tags discussed above, do not use the <strong> or <b> tags to make their text bold.
      • The second row's cells are also bold and centered (but are not spanned). Use the same method to make their contents bold and centered.
    • Put three cities that are in each continent into the cells each column as per video.
      • You can use the same cities used in the list items exercise if you like.

© 2014 Dan Hitchcock Vaughan and licensors