Lesson Outcomes

After completing this lesson, learners will be able to:

• Define HTML tables.
• Identify the main elements used to create tables.
• Explain how rows, columns, and cells are structured.
• Create simple tables using HTML.
• Apply table tags correctly in HTML code.

Overview

Tables in HTML are used to organise and display data in a structured format using rows and columns.

They are useful for presenting:

• Data sets
• Schedules
• Lists of information
• Reports

HTML tables make it easier to read and understand structured information on web pages.

1. What is an HTML Table?

An HTML table is used to display data in a grid format.

It consists of:

• Rows
• Columns
• Cells

Tables are created using specific HTML tags that define their structure.

2. Basic Table Structure

An HTML table is created using the following main tags:

1. <table> → Defines the table
2. <tr> → Defines a table row
3. <td> → Defines a table cell
4. <th> → Defines a table header

Example of a Simple Table

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
</table>

3. Table Elements Explained

3.1 <table>

• Defines the entire table
• Wraps all table content

3.2 <tr> (Table Row)

• Represents a row in the table
• Contains table cells

3.3 <td> (Table Data)

• Represents a standard cell
• Contains actual data

3.4 <th> (Table Header)

• Represents a header cell
• Usually displayed in bold
• Used to label columns or rows

4. Table Structure

Tables are organised into rows and columns.

• Each row is created using <tr>
• Each cell inside a row is created using <td> or <th>

Example Structure

• Row 1 → Headers
• Row 2 → Data
• Row 3 → Data

This structure helps present information clearly.

5. Table Attributes (Basic)

Tables can include attributes to control appearance.

Examples include:

• border → adds a border to the table
• width → sets the width of the table
• cellpadding → adds space inside cells
• cellspacing → adds space between cells

Example:

<table border="1">

6. Importance of Tables

Tables are important because they:

• Organise data clearly
• Improve readability
• Present structured information
• Help compare values

They are commonly used in:

• Reports
• Timetables
• Data presentations

Key Notes

• HTML tables display data in rows and columns.
• The <table> tag defines the table.
• <tr> creates rows, <td> creates data cells, and <th> creates header cells.
• Tables help organise and present information clearly.
• Attributes can be used to adjust table appearance.
• Tables are useful for structured data presentation.