HTML Table

HTML tables are used to display data in a tabular format, consisting of rows and columns. Here’s a basic breakdown of how to create and use tables in HTML:

Basic Structure

An HTML table is created with the <table> element. Inside this, you use:

<tr> (table row) to define a row in the table.
<td> (table data) to define a cell in the table row.
<th> (table header) to define a header cell in the table, which is typically bold and centered.

Example 1: Simple Table

Here’s a simple example of an HTML table:

<!DOCTYPE html>
<html>
<head>
    <title>Simple Table Example</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
        </tr>
        <tr>
            <td>John Doe</td>
            <td>30</td>
            <td>New York</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>25</td>
            <td>Los Angeles</td>
        </tr>
    </table>
</body>
</html>

Explanation

<table border="1">: Creates a table with a border. The border attribute is used here for simplicity, but using CSS is preferred for styling.
<tr>: Defines a new row in the table.
<th>: Defines a header cell. These are typically used in the first row.
<td>: Defines a standard cell in the table.

Example 2: Table with Attributes and Styling

For better control and styling, you can use CSS:

<!DOCTYPE html>
<html>
<head>
    <title>Styled Table Example</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
        </tr>
        <tr>
            <td>John Doe</td>
            <td>30</td>
            <td>New York</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>25</td>
            <td>Los Angeles</td>
        </tr>
    </table>
</body>
</html>

Explanation

border-collapse: collapse;: Ensures that table borders are collapsed into a single border.
th, td: Applies styles to both header and data cells.
background-color: #f2f2f2;: Adds a background color to header cells.

These examples should give you a good starting point for creating and styling tables in HTML. If you have any specific requirements or questions, feel free to ask!

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Disclaimer About Us