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.

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Table Example</title>
        /* 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;

<h2>Sample HTML Table</h2>

    <caption>Monthly Sales Report</caption>
            <th>Product A</th>
            <th>Product B</th>
            <th>Product C</th>


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.