freecourses.digital
Lesson progress: 0 of 3 activities done
All lessons in HTML Basics for Beginners Lesson 6.2 of 34

Module 1: Introduction to HTML

  1. 1.1What is HTML?
  2. 1.2How websites work: HTML, CSS, and JavaScript
  3. 1.3HTML elements, tags, and attributes
  4. 1.4Setting up your first HTML file

Module 2: HTML Document Structure

  1. 2.1The basic HTML document
  2. 2.2DOCTYPE, html, head, and body explained
  3. 2.3The page title and metadata
  4. 2.4Writing your first webpage

Module 3: Text and Content Elements

  1. 3.1HTML headings: h1 to h6
  2. 3.2Paragraphs and line breaks
  3. 3.3Bold, emphasis, and text formatting
  4. 3.4Ordered and unordered lists

Module 4: Links and Navigation

  1. 4.1Creating links with the a tag
  2. 4.2Relative URLs and absolute URLs
  3. 4.3Linking to sections within a page
  4. 4.4Building basic website navigation

Module 5: Images and Embedded Content

  1. 5.1Adding images with the img tag
  2. 5.2Image paths and file locations
  3. 5.3Alternative text and image accessibility
  4. 5.4Embedding videos and external content

Module 6: Tables and Data

  1. 6.1Creating HTML tables
  2. 6.2Table rows, headers, and cells
  3. 6.3Organizing tabular data accessibly

Module 7: Forms and User Input

  1. 7.1Understanding HTML forms
  2. 7.2Text fields, email fields, and text areas
  3. 7.3Labels, buttons, and required fields
  4. 7.4Basic form structure and submission

Module 8: Semantic HTML and Accessibility

  1. 8.1What is semantic HTML?
  2. 8.2header, nav, main, section, and footer
  3. 8.3Using HTML to improve accessibility

Module 9: HTML for SEO

  1. 9.1HTML title tags and meta descriptions
  2. 9.2Heading hierarchy and content structure
  3. 9.3Canonical links, robots directives, and basic metadata

Module 10: Practice Project and Validation

  1. 10.1Build a simple HTML website

Table rows, headers, and cells

Inside this lesson

  • Grouping rows with thead, tbody, and tfoot
  • Adding a caption
  • Merging cells with colspan
  • Merging cells with rowspan

Short answer

Bigger tables are easier to read and style when you group rows. <thead> holds header rows, <tbody> holds data rows, and <tfoot> holds totals. <caption> gives the table a title. colspan and rowspan let one cell stretch across columns or rows.

thead, tbody, tfoot, and caption

<table>
  <caption>Pili tart orders, first week of June</caption>
  <thead>
    <tr><th>Day</th><th>Boxes</th><th>Sales</th></tr>
  </thead>
  <tbody>
    <tr><td>Monday</td><td>12</td><td>₱3,600</td></tr>
    <tr><td>Tuesday</td><td>9</td><td>₱2,700</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Total</td><td>21</td><td>₱6,300</td></tr>
  </tfoot>
</table>

The caption must be the first child of the table. When a long table is printed, browsers can repeat the thead on each page.

colspan: stretch across columns

<tr>
  <th colspan="2">Room type</th>
  <th>Rate</th>
</tr>

colspan="2" makes one cell as wide as two columns. That row now needs one fewer cell.

rowspan: stretch down rows

<tr>
  <th rowspan="2">Weekend</th>
  <td>Saturday</td>
  <td>₱2,500</td>
</tr>
<tr>
  <td>Sunday</td>
  <td>₱2,500</td>
</tr>

The Weekend cell covers two rows, so the next row starts one cell shorter. Draw the table on paper before coding merged cells. It saves a lot of confusion.

Keep merging simple

Merged cells are harder for screen readers and harder to fit on small screens. If a table needs many merges, consider splitting it into two simple tables.

Try it: add structure

Wrap the rows in thead, tbody, and tfoot, add a caption, and make the Total label span two columns.

Live preview

Quick quiz

1. Which element holds totals?
2. Where must caption go?
3. colspan="3" does what?
4. After a rowspan="2" cell, the next row has?

Common mistakes

  • Forgetting to remove a cell after colspan. The row grows too wide and columns shift.
  • Caption in the wrong place. It must be the first element inside table.
  • Overusing merged cells. Complex tables confuse screen readers.

Your action

Tick each item when you can do it. Your progress saves on this device.

Key terms

<thead>
Groups header rows.
<tbody>
Groups the main data rows.
<tfoot>
Groups footer rows like totals.
<caption>
A visible title for a table.
colspan
Makes a cell span several columns.
rowspan
Makes a cell span several rows.

Questions beginners ask

Is tbody required?

Browsers add it automatically, but writing it keeps your code clear.

Can a table have two tbody elements?

Yes. Use them to group sections, like one per month.

Does caption help SEO?

It helps readers and screen readers first. It also gives search engines context.

Related lessons

Need a website built or fixed while you practice? The team at Remar Digital can help.