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
Use CSS to Format

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

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

8. <col> <col /> Attributes
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

9. <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

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

11. <th> <th>…</th> Attributes
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. <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 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

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

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 :first-child
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 :nth-of-type(n)
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; }