------------------------------------------------------------------------------
MC logo
Tables
[^] CSc 302 Outlines
------------------------------------------------------------------------------
<<Page Design Style Sheets>>
  1. Tables display data in guess what tabular format!
    1. Used for things that are really tables of data.
    2. Used to arrange stuff that we wouldn't normally think of as a table.
    3. Style sheets can be used instead.
  2. <table> <tr> <td> ... </td> ... </tr> </table> [ Simple Table ]
    1. A table is a series of rows (<tr> ... </tr>).
    2. Each row is a series of data items (<td> ... </td>).
    3. Each data section may contain other markup.
  3. Headers and captions. [ Like This ]
    1. <th> ... </th> is like <td> ... </td>, but formatted differently.
    2. <caption> ... </caption> must be the first thing inside the <table> ... </table>
  4. <table> tag attributes control the table as a whole. [ Table Alignment and Borders ]
    1. align attributes, left, right and center, like images.
    2. width also like images. The height attribute is not standard, but it usually works.
    3. border specifies the border width, default zero.
  5. <table> cell spacing attributes. [ Padding ]
    1. cellpadding space between content and cell border.
    2. cellspacing space between cells.
  6. Alignment in <tr> and <td>.[ Cell Alignment ]
    1. align: left, right, center justify and char. Char requires a char= or charoff= attribute.
    2. valign: top, middle, bottom and baseline.
  7. Spanning. A data item spanning multiple rows and columns, colspan and rowspan in <td>. [ Spanning ]
  8. Tables may appear as entries in tables. [ Nested tables ].
    1. Table entries may contain any XHTML.
    2. Can give relatively precise control over layout.
  9. Background colors. [ Colorful Tables ]
    1. The bgcolor attribute can be given to rows, data items, or the whole table.
    2. Space between items will not be filled with the row or item color. Very often, use cellspacing="0" with colors.
  10. Text will wrap around aligned tables. [ Wrapping ]
    1. Similar to images.
    2. Can be used to create an insert in a larger text.
  11. Grouping columns. <colgroup>...<col /> </colgroup>. [ Column Groups ]
    1. Supported by IE; not much else.
    2. Each <colgroup> ... </colgroup> defines a group of columns.
    3. May contain <col /> items to control individual columns.
    4. The number of columns <colgroup> controls is:
      1. The number of <col /> tags it contains, or, if empty,
      2. The span attribute of <colgroup>
    5. Control of a cell by most specific container.
      1. The attributes of <colgroup> control all cells in the column.
      2. The attributes of <col /> control that column and will override the same attribute in <colgroup>.
      3. Attributes of <tr> and then <th> or <td> will override <col />.
    6. The <col /> may contain a span attribute to allow it to control several columns.
    7. The <colgroup>, if present, must follow the <caption>, if present, or the <table> otherwise.
  12. Table sections: Head, foot and body. [ Row Groups ]
    1. Tags enclose groups of rows: <thead>, <tbody>, <tfoot>.
    2. The order is <thead>, <tfoot>, <tbody>.
    3. Must use all three,or none.
    4. Must follow the any <colgroup>
    5. Applies alignment and color attributes which apply to all effected slots.
  13. Table frame attribute: void, above, below, hsides, vsides, lhs, rhs, box or border. Interacts with the border attribute.
<<Page Design Style Sheets>>