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.

Terms Disclaimer About Us Contact Us