Steps on how to create a table using HTML

Posté 2025-01-25 16:25:54

740

Creating a table in HTML involves using the <table> element along with other related elements like <tr> for table rows, <th> for table headers, and <td> for table data cells. Here's an example of how to create a simple table:

Basic Structure

<!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>
        table {
            width: 50%;
            border-collapse: collapse;
            margin: 20px auto;
            font-family: Arial, sans-serif;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }
        th {
            background-color: #f4f4f4;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center;">HTML Table Example</h1>
    <table>
        <thead>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row 1, Cell 1</td>
                <td>Row 1, Cell 2</td>
                <td>Row 1, Cell 3</td>
            </tr>
            <tr>
                <td>Row 2, Cell 1</td>
                <td>Row 2, Cell 2</td>
                <td>Row 2, Cell 3</td>
            </tr>
            <tr>
                <td>Row 3, Cell 1</td>
                <td>Row 3, Cell 2</td>
                <td>Row 3, Cell 3</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Explanation

<table>: The container for the entire table.
<thead>: Contains the table header rows.
<th>: Defines a header cell, typically bold and centered.
<tbody>: Contains the main content of the table.
<tr>: Defines a single row in the table.
<td>: Defines a single data cell.

Styling

You can style your table with CSS, as shown in the example. This includes adding borders, padding, and background colors for a cleaner look.

Let me know if you'd like additional features like merged cells, captions, or advanced styling!

Connectez-vous pour aimer, partager et commenter!