HTML Data Tables

The HTML table element allows web developers to arrange data into rows and columns. Use semantic table sections to differentiate data contents from heading declarations.

Status: Coming Soon

We are crafting this tutorial

Our team is working on interactive diagrams, code challenges, and exercises for HTML Data Tables. Check back soon for the full guide!

What You'll Learn

1Structuring grids using <table>, table rows (<tr>), and cells (<td>)
2Defining header cells (<th>) for column descriptions
3Merging grids: Spanning columns (colspan) and rows (rowspan)
4Segmenting large table datasets: <thead>, <tbody>, and <tfoot>
5Writing structured captions (<caption>) for table labeling and SEO accessibility

sandbox.html

<table>
  <caption>CodeX Cider Syllabus</caption>
  <thead>
    <tr>
      <th>Subject</th>
      <th>Lessons</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML5 Structure</td>
      <td>10 Lessons</td>
      <td>Under Construction</td>
    </tr>
    <tr>
      <td>CSS3 Styling</td>
      <td>10 Lessons</td>
      <td>Coming Soon</td>
    </tr>
  </tbody>
</table>

Interactive playground coming soon

Next LessonLists Setup