HTML · Quick Reference

Lesson 16 — Table Structure Cheat Sheet

HTML

In one line: These three sectioning elements divide a table into logical regions:

Key Ideas

1thead, tbody, tfoot. These three sectioning elements divide a table into logical regions:

2The scope Attribute. The scope attribute on <th> tells screen readers whether a header applies to a column, row, or group of columns/rows. It dramatically improves accessibility on c...

3Column Groups. The <colgroup> element (and its children <col>) let you apply styling to entire columns without adding classes to every cell. Place it immediately after th...

4Long Table Scrolling. For long data tables on mobile, wrap the table in a container with overflow-x: auto to allow horizontal scrolling without breaking the page layout. This is far better ...

Code Examples

<table>
  <caption>Q3 Sales Report</caption>

  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col">Units Sold</th>
      <th scope="col">Revenue</th>
    </t...

<table>
  <caption>Browser Support</caption>

  <!-- style columns without touching every td -->
  <colgroup>
    <col style="width: 40%">  <!-- Feature column -->
    <col style="background: rgba(45,232,19...

<!-- HTML -->
<div class="table-wrap">
  <table>
    <!-- ... lots of columns -->
  </table>
</div>

/* CSS */
.table-wrap {
  overflow-x: auto;         /* horizontal scroll */
  -webkit-overflow-scrolling: touc...