In HTML, the <table> element is used to create tables. Tables are used to organize and display data in rows and columns. 

Here's the basic structure of an HTML table:

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <!-- Add more header cells if needed -->
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <!-- Add more data cells if needed -->
    </tr>
    <!-- Add more rows if needed -->
</table>
  • <table>: The main container for the entire table.
  • <tr>: Represents a table row. Should be placed within the <table> element.
  • <th>: Represents a table header cell. Typically used in the first row to label columns.
  • <td>: Represents a table data cell. Contains the actual data for each row and column.

Here's an example of a simple HTML table:

<!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>
</head>
<body>

    <h2>Student Grades</h2>

    <table border="1">
        <tr>
            <th>Name</th>
            <th>Math</th>
            <th>Science</th>
            <th>English</th>
        </tr>
        <tr>
            <td>John Doe</td>
            <td>90</td>
            <td>85</td>
            <td>92</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>88</td>
            <td>92</td>
            <td>95</td>
        </tr>
    </table>

</body>
</html>

in this example:

  • The table has three rows (<tr>): one for headers and two for data.
  • The first row contains table header cells (<th>) to label each column.
  • The following rows contain table data cells (<td>) with the actual data.

Attributes like border in the <table> tag are optional and used for visual styling (setting the border of the table in this case). You can customize the appearance of the table using CSS for more complex layouts and styling.