Flowisetech Flowisetech
Home
Market
Groups
Pages
See More
Groups Pages Market Events Blogs Funding Offers Jobs Courses Study Cycle Movies Games Merits

Our Information Center

 Terms and Conditions Legal & Business Law Agreement Child Safety & Policy Referral Tearms About Us Flowisetech Earning Guide Terms of Use Privacy Policy Help FAQs Community Guidelines Our Purpose Withdrawal Terms Verification Terms Community Policy
2K Views

Steps on how to create a table using HTML

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

  1. <table>: The container for the entire table.
  2. <thead>: Contains the table header rows.
  3. <th>: Defines a header cell, typically bold and centered.
  4. <tbody>: Contains the main content of the table.
  5. <tr>: Defines a single row in the table.
  6. <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!
Upgrade to Pro
Choose the Plan That's Right for You
Upgrade
Categories
Read More
Flowisetech Hi , For easy access