WDD 130: Web Fundamentals

HTML: The Table Element

Overview

HTML table elements are used to display tabular data that offer a visual representation of data, allowing users to quickly compare and analyze different values.

Prepare

• Reference: The Table Element - MDN

Activity Instructions

1. In your browser, navigate to the "Try-It" section on the MDN page: The Table Element.
2. Ponder the HTML and CSS used to create the example table.
3. You will be modifying the existing table shown here

   

   to look like this with a new "Department" column.

   

4. In the HTML panel, add another column to the left of the existing table header (<thead>) section using a <th> and a column scope scope="col".
5. Insert the heading of "Department" into that new heading cell.
   Check Your Understanding

   <thead>
     <tr>
       <th scope="col">Department</th>
       <th scope="col">Person</th>
       <th scope="col">Most interest in</th>
       <th scope="col">Age</th>
     </tr>
   </thead>

6. Add another table heading cell (<th>) to the existing first row (<tr>) of the table's body (<tbody>)
7. Insert the text of "Accounting" into that new cell.
8. Modify that new cell to span all four rows in the table body using rowspan.
   Check Your Understanding

   <tbody>
     <tr>
       <th rowspan="4">Accounting</th>
       <th scope="row">Chris</th>
       <td>HTML tables</td>
       <td>22</td>
     </tr>

   Why do we want to use rowspan on that first cell?

   What is the role of the scope attribute in the table heading cells?

   Providing a scope to a header cell in a table, indicates whether it applies to a row or column. Using the scope attribute appropriately improves the accessibility and usability of tables for all users, especially those relying on assistive technologies like screen readers.

9. Now notice that the <tfoot> content is not lined up correctly.

   

   How can you fix this layout issue?
   Check Your Understanding

   <tfoot>
     <tr>
       <th scope="row" colspan="3">Average age</th>
       <td>33</td>
     </tr>
   </tfoot>

   The colspan value was changed from 2 to 3.
10. Change the style of the table to use a black background in the table header row with white text.
    Check Your Understanding

    thead th {
      background-color: #000; /* This is shorthand HEX notation for #000000 */
      color: #fff;
    }

11. Change the style of the table caption to be italic.
    Check Your Understanding

    caption {
      caption-side: bottom;
      padding: 10px;
      font-weight: 700;
      font-style: italic;
    }

    Note that the font-weight value was changed from the semantic "bold" to "700". Using 700 is more precise and explicit, especially if you're working with a font that has multiple weights.