Creating an HTML table is a fundamental aspect of web development, allowing you to organize and present data in a structured manner. In this example, I’ll guide you through creating an HTML table, explaining each step along the way.

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Table Example</title>
    <style>
        /* Adding some basic styling for demonstration purposes */
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 8px;
            border: 1px solid #dddddd;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>

<h2>Sample HTML Table</h2>

<table>
    <caption>Monthly Sales Report</caption>
    <thead>
        <tr>
            <th>Month</th>
            <th>Product A</th>
            <th>Product B</th>
            <th>Product C</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>January</td>
            <td>$1000</td>
            <td>$1500</td>
            <td>$800</td>
        </tr>
        <tr>
            <td>February</td>
            <td>$1200</td>
            <td>$1600</td>
            <td>$900</td>
        </tr>
        <tr>
            <td>March</td>
            <td>$1100</td>
            <td>$1400</td>
            <td>$850</td>
        </tr>
    </tbody>
</table>

</body>
</html>

Let’s break down the code:

  • <!DOCTYPE html>: This declaration specifies the HTML version being used.
  • <html lang="en">: This tag defines the document as HTML and sets the language to English.
  • <head>: This section contains metadata such as character encoding and viewport settings.
  • <title>: Sets the title of the HTML document, which appears in the browser tab.
  • <style>: This tag is used to define internal CSS styles for the document.
  • table: Defines the start of the table.
  • border-collapse: collapse;: This CSS property ensures that there is no space between table cells, creating a cleaner look.
  • th, td: These selectors target table header and table data cells respectively.
  • border: 1px solid #dddddd;: This line sets a border around each cell, helping to visually separate them.
  • caption: Adds a caption to the table.
  • <thead>: Defines the start of the table header section.
  • <tr>: Represents a table row.
  • <th>: Defines a table header cell.
  • <tbody>: Defines the start of the table body section.
  • <td>: Defines a table data cell.

In this example, I’ve created a simple table to display a monthly sales report. Each row represents a month, and each column represents the sales amount for a specific product. The table is enclosed within the <table> tags, with <thead> for the header row and <tbody> for the data rows. The table cells are defined using <th> for header cells and <td> for data cells.