HTML - Forms and Tables Part 2

Instructors: Jess, Carmen, and Eda

Forms and Tables

Before this session, please:

• Read Working with Tables: What Are HTML Tables Used For, and What Should They Not Be Used For? and take notes
• Complete all steps from Build a Final Exams Table, recording any questions or new concepts introduced
• Please complete Build a Book Catalog Table over the next few days

During this session, we’ll:

• Review notes
• We’ll work through key steps from Build a Final Exams Table and talk about HTML tables in practice
• We’ll talk through Build a Book Catalog Table to help prepare you to complete this lab solo

After this session, please:

• Read Working with HTML Tools: What Is an HTML Validator, and How Can It Help You Debug Your Code? and take notes
• Read Working with HTML Tools: How to Use the DOM Inspector and DevTools to Debug and Build Your Projects and take notes
• Read HTML Tables and Forms Review and take notes
• Complete HTML Tables and Forms Quiz solo to test your understanding
• Complete Build a Survey Form solo over the next week or so

Instructor notes

Working with Tables: What Are HTML Tables Used For, and What Should They Not Be Used For?

Today we add a new family of elements to our toolkit: HTML tables. They aren’t used as much as they used to be, but as a front-end developer you should still be comfortable with them. They were one of the earliest ways developers had for displaying data in a browser, going back to the 1990s.

Table: an HTML element used to display tabular data, meaning data that naturally fits into rows and columns. Think of a spreadsheet, a class schedule, sports standings, a pricing comparison, or a list of facts about something.

There are a handful of elements that work together inside a table, and they follow a simple hierarchy:

Structural sections (children of <table>):

• <thead>: the table head. Contains the header row(s).
• <tbody>: the table body. Contains the main data rows.
• <tfoot>: the table foot. Contains a footer row (like totals or a note).

Inside each of those sections:

• <tr>: a table row.

Inside each row:

• <th>: a table header cell. Used to label the row or column.
• <td>: a table data cell. Used for the actual data.

Here is the simplest possible table that uses all of these:

 1<table>
 2  <thead>
 3    <tr>
 4      <th>The title of this table</th>
 5    </tr>
 6  </thead>
 7  <tbody>
 8    <tr>
 9      <th>First Row</th>
10      <td>First Data Cell</td>
11    </tr>
12    <tr>
13      <th>Second Row</th>
14      <td>Second Data Cell</td>
15    </tr>
16  </tbody>
17  <tfoot>
18    <tr>
19      <th>The footer of this table, which might contain dates or sources.</th>
20    </tr>
21  </tfoot>
22</table>

A few things to notice from that example:

• The actual data always lives inside a <tr> (row)
• Inside that row, you have a <th> for the label and one or more <td> for the data
• The <thead>, <tbody>, and <tfoot> are wrappers that group rows together

What tables should NOT be used for:

• Page layout. Many years ago, developers used tables to position non-data elements on a page. This was never a best practice, and you should not do it. We have CSS flexbox and grid for layout now, which we’ll cover later.
• Replacing tables with divs. Some sites build their own “tables” out of <div> elements. This is possible but worse. Use the <table> element for tabular data because it carries semantic meaning that helps screen readers and other assistive tech understand the structure.

Recap: if your data has rows and columns, use a table. If it doesn’t, don’t.

Questions:

• What’s the difference between <th> and <td>, and when should I use each?
• If tables are old and not used as much, why bother learning them at all?