HTML 5 - 3.4 : Table and display

HTML5 tables provide a structured way to organize and display tabular data on web pages. Tables consist of rows (defined by the <tr> tag) containing multiple cells. Each table includes a caption element for descriptive titles, a header section for column labels, and a body section for data rows. A table footer can also be included for summary information or totals.

Creating a basic table structure uses semantic HTML5 tags including <table> for the container, <thead> for header rows, <tbody> for data rows, and <tfoot> for footer content. Header cells use the <th> tag while data cells use <td> tags. This semantic structure improves accessibility and allows styling specific table sections with CSS.

Advanced table features include the rowspan attribute, which allows a single cell to occupy multiple rows, and the colspan attribute, which spans a cell across multiple columns. These attributes eliminate repetitive data and create more elegant table layouts. For example, a conference schedule can use rowspan to display a single course name spanning two room columns, while colspan can display a footer message spanning multiple columns for emphasis.

HTML5 tables form the foundation for displaying structured information, from pricing comparisons to event schedules. While CSS styling is typically applied for visual enhancement, the semantic HTML structure ensures proper data representation and accessibility for all users.

Summary

This HTML5 lesson teaches how to create and render data tables using semantic HTML tags. The instructor demonstrates a practical conference schedule example, explaining the structure with caption, thead, tbody, and tfoot elements, along with th and td cells. The lesson covers rowspan and colspan attributes to efficiently manage data without unnecessary repetition, ultimately showing how proper HTML table markup provides a clean, semantic foundation for tabular content.

Key points

  • Table structure uses &lt;table&gt;, &lt;thead&gt;, &lt;tbody&gt;, and &lt;tfoot&gt; tags for semantic organization of rows and sections
  • &lt;th&gt; elements define header cells within table rows, while &lt;td&gt; elements define data cells in the body and footer sections
  • &lt;caption&gt; tag provides a descriptive title for the table (example: 'Conference by Team')
  • rowspan attribute merges multiple consecutive rows in a single column to avoid repeating identical data across rows
  • colspan attribute spans a single cell across multiple columns to group related data horizontally
  • Styling and visual presentation of tables are handled separately by CSS, not HTML itself

FAQ

What is the difference between &lt;th&gt; and &lt;td&gt; tags in a table?

&lt;th&gt; (table header) tags contain header cells and are typically placed in the &lt;thead&gt; section, while &lt;td&gt; (table data) tags contain regular data cells in the &lt;tbody&gt; or &lt;tfoot&gt; sections.

How do you prevent data repetition in HTML tables?

Use the rowspan attribute to extend a cell vertically across multiple rows, so you only list the data once instead of repeating it in each row where it applies.

What is the purpose of &lt;caption&gt; in a table?

The &lt;caption&gt; tag provides a descriptive title or heading for the entire table, such as 'Conference by Team,' and is placed as the first child element inside the &lt;table&gt; tag.