8 Tables

1. 8 Tables

2. Learning Outcomes • Create a Table • Apply Attributes to Format Tables • Increase the Accessibility of a Table • Style a Table with CSS

3. <pre> • <pre>…</pre> • Preformatted Text • Presents Blocks of Text in Fixed-width Font • Renders Multiple Spaces

4. Tables • Used on Web Pages to Organize Tabular Information • Composed of Rows & Columns • Similar to a Spreadsheet • Table Cell is Intersection of a Specific Row & Column • Configured with table, tr, & td Elements

5. <table> • <table>…</table> • Structure to Contain & Align Content • Attributes • border=“” or “1” • Sets Thickness of Borders Displayed for Table Cells • Attribute Set to “” Will Make Borders “Invisible”

6. <colgroup> • <colgroup>…</colgroup> • Defines Groups of Table Columns for Formatting • Only Valid Inside <table> • Attributes • span=“#” • Specifies Number of Columns <colgroup> Should Span

7. <col> • <col /> • Defines One or More Columns of Table for Formatting • Only Valid Inside <table> or <colgroup> • Attributes • span=“#” • Specifies Number of Columns the Column Should Span

8. <tr> & <td> • <tr>…</tr> • Defines a Row in a Table • <td>…</td> • Defines Table Data (a Cell) in a Row • Table Data Cells Must Only Appear Within Table Rows

9. <td> • Attributes • colspan=“#” • Specifies How Many Columns the Cell Overlaps • rowspan=“#” • Specifies How Many Rows the Cell Overlaps

10. Nesting Tables • Nested Tables Must Reside in <td> <table> <tr> <td>Some text</td> <td> <table> <tr> <td>Table in a table</td> </tr> </table> </td> </tr> </table>

11. Table Accessibility • <th>…</th> • Specifies the Table Header for a Row • Identical to Table Data Cells Except: • Cells Contents are Bolded & Centered • Attributes • colspan=“#” • Specifies Number of Columns a Header Cell Overlaps • rowspan=“#” • Specifies Number of Rows a Header Cell Overlaps

12. Table Accessibility • <th>…</th> • Attributes • headers=“header_id” • Specifies One or More Header Cells a Cell is Related to • scope=“col | colgroup | row | rowgroup” • Specifies Whether Header Cell is a Header for a: • Column, Row, or Group of Columns or Rows

13. Table Accessibility • <caption>…</caption> • Attaches a Caption to a Table • Use text-align to Align the Caption • Use caption-side to Place the Caption

14. Table Row Groups • <thead>…</thead> • Designate Heading Section of a Table • <tbody>…</tbody> • Designate Body Section of a Table • <tfoot>…</tfoot> • Designate Footer Section of a Table

15. CSS & Tables • Cell Visual Control • padding • Specify Amount of Space Within Cell • border-spacing or border-collapse • Specify Amount of Space Between Cells

16. CSS & Tables • Cell Visual Control • :first-of-type • Applies to the first element of the specified type • :first-child • Applies to the first child of an element (CSS2 selector) • :last-of-type • Applies to the last element of the specified type

17. CSS & Tables • Cell Visual Control • :last-child • Applies to the last child of an element • :nth-of-type(n) • Applies to the “nth” Element of the Specified Type • Values: Number, Odd, or Even • Zebra Stripe a Table • tr:nth-of-type(even) { background-color: #eaeaea; }