freecourses.digital
Lesson progress: 0 of 3 activities done
All lessons in HTML Basics for Beginners Lesson 6.1 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

Creating HTML tables

This lesson covers

  • When to use a table
  • The four core table tags
  • Building a table row by row
  • Why tables are not for page layout

Short answer

An HTML table shows data in rows and columns, like a price list or a schedule. <table> wraps it, <tr> makes each row, <th> makes header cells, and <td> makes data cells. Only use tables for tabular data, never to arrange a page layout.

When a table fits

Ask: would this make sense in a spreadsheet? If yes, a table fits.

  • Price lists and rate cards
  • Class or bus schedules
  • Comparison of plans or products
  • Results and scores

The four core tags

<table>
  <tr>
    <th>Item</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Pili tart</td>
    <td>₱25</td>
  </tr>
  <tr>
    <td>Pili nuts, 250 g</td>
    <td>₱180</td>
  </tr>
</table>
TagMeaning
<table>The whole table
<tr>Table row
<th>Table header cell, bold and centered by default
<td>Table data cell

Building row by row

HTML tables are written one row at a time, left to right. Each row should have the same number of cells. If row two has three cells and row three has two, the columns will not line up.

Tables are not for layout

Before CSS was common, people built whole websites with tables. That made pages hard to read on phones and confusing for screen readers, which announce row and column positions. Use CSS Flexbox or Grid for layout, and tables only for data.

Try it: build a price list

Add a third column called Stock and a new row for Pili brittle at ₱120. Keep the cell count equal in every row.

Live preview

Quick quiz

1. Which tag creates a row?
2. Which tag is a header cell?
3. Which content fits a table?
4. What happens if rows have different cell counts?

Common mistakes

  • Using tables for layout. It hurts mobile display and accessibility.
  • Uneven rows. Missing cells shift data into the wrong column.
  • Using td for headers. Headers need th so screen readers can link cells to them.

Your action

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

Key terms

<table>
The container for tabular data.
<tr>
A table row.
<th>
A header cell.
<td>
A data cell.
Tabular data
Information that fits rows and columns.

Questions beginners ask

How do I add borders?

Use CSS: border on th and td, plus border-collapse: collapse. The border attribute is outdated.

Can I paste a table from Excel?

Some editors convert it. Check the HTML for messy inline styles afterward.

How do tables work on phones?

Wrap wide tables in a container with overflow-x: auto so they scroll sideways.

Related lessons

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