How to create a table by using HTML5 ?

Last Updated : 12 Apr, 2024

Creating a table in HTML5 involves using the <table> element to structure data into rows <tr>, with headers <th> and data cells <td>. Attributes like borders define visual properties.

Syntax:

<table> Contents... </table>

1.Using <table>, <tr>, <td> tags

Here we Define a table in HTML using <table>, rows with <tr>, and cells with <td>. Each <tr> contains data cells `<td>` arranged in rows and columns.

Example: In this example, we create a table with two rows and two columns. The table has a border, and its cells collapse with the border using CSS.

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        />
        <title>Table Example</title>
    </head>
    <body>
        <table border="1" 
               style=" border-collapse: collapse;">
            <tr>
                <td>Row 1, Column 1</td>
                <td>Row 1, Column 2</td>
            </tr>
            <tr>
                <td>Row 2, Column 1</td>
                <td>Row 2, Column 2</td>
            </tr>
        </table>
    </body>
</html>

Output:

Using , , tags Example O

2.Using <thead>, <tbody>, <th> for headers

In HTML, use <thead> for table headers, <tbody> for table body, and <th> for header cells. Organize content for improved accessibility and semantics.

Example: In this example we defines a table with headers and data rows. Each header cell represents a data category, and rows display corresponding values.

html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, 
          initial-scale=1.0"
        />
        <title>Table Example</title>
    </head>
    <body>
        <table border="1">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>City</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>John</td>
                    <td>30</td>
                    <td>New York</td>
                </tr>
                <tr>
                    <td>Jane</td>
                    <td>25</td>
                    <td>Los Angeles</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>