Steps on how to create a table using HTML

0 Comments

HTML

Steps on how to create a table using HTML

2025-01-25 16:25:54 • Views

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!

Please log in to like, share and comment!

Steps on how to create a table using HTML

Basic Structure

Explanation

Styling

Read More

How to fixe "error Failed to install the app. Command failed with exit code 1: gradlew.bat app:installDebug" in nodejs app

How to Legally Hack and Get Paid for It

Minimalism vs. Maximalism: Which Web Design Style Reigns Supreme?

Where to Buy Food in Forks WA, Fayetteville NC, and Florida

How to Handle Customer Service and Returns in Your Online Store

Join

Language

Steps on how to create a table using HTML

Basic Structure

Explanation

Styling

Read More

How to fixe "error Failed to install the app. Command failed with exit code 1: gradlew.bat app:installDebug" in nodejs app

How to Legally Hack and Get Paid for It

Minimalism vs. Maximalism: Which Web Design Style Reigns Supreme?

Where to Buy Food in Forks WA, Fayetteville NC, and Florida

How to Handle Customer Service and Returns in Your Online Store