The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Basic Table Structure

Next ►
►

In this lesson, we will explore the basic structure of HTML tables. Tables are used to display data in a tabular format, which is organized into rows and columns. Understanding how to create and structure tables is essential for presenting data clearly and effectively.

Key Concepts

  1. Table Tags: The primary tags used to create a table are <table>, <tr>, <th>, and <td>.
  2. Table Rows: Rows are defined using the <tr> tag.
  3. Table Headers: Headers are defined using the <th> tag.
  4. Table Data: Data cells are defined using the <td> tag.

Basic Table Tags

  • <table>: Defines the table.
  • <tr>: Defines a table row.
  • <th>: Defines a table header cell.
  • <td>: Defines a table data cell.

Example of a Basic Table

Let's create a simple table to understand the structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Table Structure</title>
</head>
<body>
    <h1>Basic Table Example</h1>
    <table border="1">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
        <tr>
            <td>Row 1, Cell 1</td>
            <td>Row 1, Cell 2</td>
            <td>Row 1, Cell 3</td>
        </tr>
        <tr>
            <td>Row 2, Cell 1</td>
            <td>Row 2, Cell 2</td>
            <td>Row 2, Cell 3</td>
        </tr>
    </table>
</body>
</html>

Explanation

  • <table border="1">: The border attribute is used to add a border to the table for better visibility.
  • <tr>: Each <tr> tag represents a row in the table.
  • <th>: The <th> tags within the first row define the table headers.
  • <td>: The <td> tags define the data cells in each row.

Practical Exercise

Create a table with the following structure:

Name Age Occupation
John Doe 30 Software Engineer
Jane Smith 25 Graphic Designer
Emily Jones 35 Project Manager

Solution

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Exercise</title>
</head>
<body>
    <h1>People Information</h1>
    <table border="1">
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Occupation</th>
        </tr>
        <tr>
            <td>John Doe</td>
            <td>30</td>
            <td>Software Engineer</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>25</td>
            <td>Graphic Designer</td>
        </tr>
        <tr>
            <td>Emily Jones</td>
            <td>35</td>
            <td>Project Manager</td>
        </tr>
    </table>
</body>
</html>

Common Mistakes

  1. Missing Closing Tags: Ensure that all table tags (<table>, <tr>, <th>, <td>) are properly closed.
  2. Incorrect Nesting: Make sure that <th> and <td> tags are nested within <tr> tags.

Summary

In this lesson, we covered the basic structure of HTML tables, including the essential tags and their usage. We also provided a practical example and an exercise to reinforce the concepts. Understanding how to create and structure tables is fundamental for displaying data in a clear and organized manner.

Next, we will delve into more advanced table features, such as headers and footers, in the following lesson.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved