zaro

How to Make an HTML Table?

Published in HTML Table Creation 2 mins read

To create an HTML table, you need to use specific HTML tags to structure the table's data into rows and columns. The fundamental tags are <table>, <tr>, and <td>.

Creating the Basic Table Structure

Here's how to build a basic HTML table:

  1. Start with the <table> tag: This tag defines the beginning and end of the table.

    <table>
    </table>
  2. Add table rows with the <tr> tag: Each <tr> tag represents a row in the table. Place these tags within the <table> tags.

    <table>
      <tr>
      </tr>
      <tr>
      </tr>
    </table>
  3. Include table data with the <td> tag: Each <td> tag represents a cell of data within a row. Place these inside the <tr> tags.

    <table>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
      <tr>
        <td>Data 3</td>
        <td>Data 4</td>
      </tr>
    </table>

Detailed Explanation

  • <table> Tag: The <table> element is the container for all the table’s contents. It's essential as it tells the browser where the table begins and ends. As mentioned in the reference, an HTML table is created with an opening <table> tag and a closing </table> tag.

  • <tr> Tag (Table Row): The <tr> (table row) element is used to define each horizontal row within the table. Data is added to the row using the <td> tag. You must enclose the <td> tags within <tr> tags to correctly construct a table row.

  • <td> Tag (Table Data): The <td> (table data) element represents a cell within a table row. It holds the actual data displayed in the table. The data content is placed between the opening and closing <td> tags.

Example HTML Table

Here's a complete example of an HTML table:

<!DOCTYPE html>
<html>
<head>
    <title>HTML Table Example</title>
</head>
<body>

    <h2>Simple Table</h2>
    <p>This is an example of a basic HTML table:</p>

    <table border="1">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <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>

</body>
</html>

Key points to remember:

  • Use <th> (table header) tags for header cells in the first row to define column headings.
  • The border attribute in the example table tag adds a visible border to the table for clarity.
  • You can use CSS to style tables for better visual appeal, controlling colors, spacing, and more.

In summary, to make an HTML table, create it using the <table> tag, organize the data into rows using <tr> tags, and add data into cells using <td> tags. Table row <tr> tags are used to create a row of data. The proper use of these tags will ensure a well-structured and properly functioning table on your webpage.