Mastering HTML Tables: A Comprehensive Guide with Examples

• HTML tables are essential for organizing and presenting data in a structured format on web pages.
• With various elements such as rows, cells, headings, and data, HTML tables provide a flexible way to display information.
• In this article, we'll explore how to create tables, manipulate rows and cells, format headings and data, and conclude with a small project demonstrating the use of table tags.

Creating Tables:

Tables in HTML are created using the <table> tag.

<table>
  <!-- Table content goes here -->
</table>
        

This tag acts as a container for all table-related elements.

Table Rows and Cells Example

Rows (<tr>) and cells (<td>) form the basic structure of a table.

<table
        <tr>
            <td>Sl No.</td>
            <td>Name</td>
            <td>Age</td>
        </tr>
        <tr>
            <td>1.</td>
            <td>Virat Kohli</td>
            <td>35</td>
        </tr>
        <tr>
            <td>2.</td>
            <td>Rohit Sharma</td>
            <td>36</td>
        </tr>
    </table>

Each <tr> tag represents a table row, and each <td> tag represents a table cell within that row.

Table Headings and Data

Table headings are defined using the <th> tag within a <thead> section.

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>30</td>
    </tr>
  </tbody>
</table>
        

In this example, <thead> contains the table headers (<th>), while <tbody> contains the table data (<td>).

Small Project: Student Grade Table

Let's create a simple table to display student grades using HTML.

<table>
  <thead>
    <tr>
      <th>Student Name</th>
      <th>Mathematics</th>
      <th>Science</th>
      <th>English</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>90</td>
      <td>85</td>
      <td>92</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>95</td>
      <td>88</td>
      <td>90</td>
    </tr>
  </tbody>
</table>
        

This table displays student names along with their grades in three subjects: Mathematics, Science, and English.

Note:

HTML tables are powerful tools for structuring and presenting tabular data on web pages. By understanding the basic structure of tables, including rows, cells, headings, and data, developers can create visually appealing and organized displays of information. Experiment with different table layouts and features to effectively convey data to your users. Incorporate tables into your projects to enhance data presentation and user experience. Happy coding!