In this lesson, you'll learn how to create simple and structured tables in HTML using the <table> tag. Tables are essential for organizing data in a clear and readable format, making your web pages more informative and user-friendly.

What Is an HTML Table?

An HTML table is a structured arrangement of data made up of rows and columns. Tables are commonly used to display information such as schedules, pricing plans, comparison charts, and more.

The primary HTML tags used to create tables are:

• <table>: Defines the table.
• <tr>: Defines a table row.
• <td>: Defines a table cell (data).

Basic Structure of an HTML Table

Understanding the basic structure of an HTML table is crucial for effectively displaying data. Here's the fundamental structure:

<table>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

• <table>: Begins the table.
• <tr>: Starts a new row.
• <td>: Adds a cell to the row.
• </tr>: Ends the row.
• </table>: Ends the table.

Examples of Creating Basic HTML Tables

Let's explore two practical examples of creating basic HTML tables.

1. Simple 2x2 Table: Displaying Team Members

This example demonstrates a straightforward table with two rows and two columns. It's ideal for displaying basic information in a grid format.

Explanation:

• First <tr> (Row): Contains two <td> cells with headers "Member Name" and "Role".
• Subsequent <tr> Tags: Each represents a team member with their respective roles.
• Result: A neatly organized table listing team members and their roles.

Note: Here, we haven't added any styles for the table. We can add style like border, etc. to enhance the table.

Understanding the basics of HTML tables is essential for presenting structured data on your web pages. In the next lesson, we'll dive into HTML Table Headers, where you'll learn how to define headers for your tables to improve readability and accessibility.