HTML CSS - Tables

Creating and styling tables in HTML

Tables are used to display data in a structured format consisting of rows and columns. In HTML, tables are created using the <table> element along with various child elements. This tutorial covers how to create and style tables in HTML.

Basic Table Structure

A basic HTML table consists of the following elements:

• <table>: Defines the table.
• <tr>: Defines a table row.
• <th>: Defines a table header cell.
• <td>: Defines a table data cell.

Here is an example of a basic table:

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
    </tr>
    <tr>
        <td>John</td>
        <td>30</td>
        <td>New York</td>
    </tr>
    <tr>
        <td>Jane</td>
        <td>25</td>
        <td>Los Angeles</td>
    </tr>
</table>
            

This will produce the following table:

Adding a Table Caption

You can add a caption to a table using the <caption> element, which provides a brief description of the table's content. Here is an example:

<table>
    <caption>User Information</caption>
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
    </tr>
    <tr>
        <td>John</td>
        <td>30</td>
        <td>New York</td>
    </tr>
    <tr>
        <td>Jane</td>
        <td>25</td>
        <td>Los Angeles</td>
    </tr>
</table>
            

Table Headers

Table headers are defined using the <th> element. They are typically used to specify column headings and are styled differently from regular table cells. You can use the scope attribute to indicate whether a header applies to a column or a row:

<table>
    <tr>
        <th scope="col">Name</th>
        <th scope="col">Age</th>
        <th scope="col">City</th>
    </tr>
    <tr>
        <td>John</td>
        <td>30</td>
        <td>New York</td>
    </tr>
    <tr>
        <td>Jane</td>
        <td>25</td>
        <td>Los Angeles</td>
    </tr>
</table>
            

Styling Tables with CSS

CSS can be used to enhance the appearance of tables. Here are some common styles you can apply to tables:

<style>
    table {
        width: 100%;
        border-collapse: collapse;
        margin: 20px 0;
    }

    table, th, td {
        border: 1px solid #ddd;
    }

    th, td {
        padding: 8px;
        text-align: left;
    }

    th {
        background-color: #f4f4f4;
    }
</style>
            

This CSS code sets the width of the table to 100%, collapses the borders, adds padding to the cells, and sets a background color for the header cells.

Spanning Rows and Columns

You can use the rowspan and colspan attributes to make a cell span multiple rows or columns:

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
    </tr>
    <tr>
        <td rowspan="2">John</td>
        <td>30</td>
        <td>New York</td>
    </tr>
    <tr>
        <td>31</td>
        <td>Boston</td>
    </tr>
    <tr>
        <td colspan="2">Jane</td>
        <td>25</td>
    </tr>
</table>
            

This will produce the following table with cells spanning multiple rows and columns:

Summary

In this tutorial, you learned how to create and style tables in HTML. You explored the basic structure of tables using the <table>, <tr>, <th>, and <td> elements. You also learned how to add captions, use table headers, style tables with CSS, and span rows and columns. Understanding how to use tables is essential for displaying data in a structured and organized manner on web pages.