Current Location：How HTML > HTML Articles > Content

HTML Table

HTML Table

HTML tables are used to display data in a tabular format. They consist of rows and columns that can be used to organize and present data in a structured manner. In this article, we will explore various aspects of using HTML tables, including creating tables, adding rows and columns, merging cells, and applying styles.

Creating a Simple Table

To create a simple table in HTML, you can use the <table>, <tr>, and <td> tags. The <table> tag defines the table, <tr> defines a row, and <td> defines a cell.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
    <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
    </tr>
    <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
    </tr>
</table>
</body>
</html>

Output:

HTML Table

Adding Headers

You can use the <th> tag to define header cells in a table. Header cells are typically displayed in bold.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>
</body>
</html>

Output:

HTML Table

Spanning Rows and Columns

You can use the rowspan and colspan attributes to span multiple rows or columns in a table cell.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
    <tr>
        <td rowspan="2">Cell 1</td>
        <td>Cell 2</td>
    </tr>
    <tr>
        <td>Cell 3</td>
    </tr>
</table>
</body>
</html>

Output:

HTML Table

Adding Borders and Styles

You can use CSS to style your tables, including adding borders, setting background colors, and changing text alignment.

<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }
    th, td {
        border: 1px solid black;
        padding: 8px;
        text-align: center;
    }
</style>

Using Tables for Layout

Although tables are primarily used for displaying tabular data, they can also be used for layout purposes by nesting tables within tables.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
    <tr>
        <td>
            <table>
                <tr>
                    <td>Header 1</td>
                    <td>Header 2</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                </tr>
            </table>
        </td>
        <td>Content</td>
    </tr>
</table>
</body>
</html>

Output:

HTML Table

Adding Captions

You can use the <caption> tag to add a caption to your table, which will be displayed above the table.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
    <caption>Sample Table</caption>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>
</body>
</html>

Output:

HTML Table

Grouping Rows and Columns

You can use the <thead>, <tbody>, and <tfoot> tags to group the header, body, and footer sections of a table, respectively.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Footer 1</td>
            <td>Footer 2</td>
        </tr>
    </tfoot>
</table>
</body>
</html>

Output:

HTML Table

Adding Background Colors

You can use CSS to add background colors to your table cells, headers, rows, or the entire table.

<style>
    th {
        background-color: #f2f2f2;
    }
    td {
        background-color: #e6e6e6;
    }
</style>

Sorting Tables

You can use JavaScript libraries like DataTables to enable sorting, searching, and pagination in your tables.

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script>
    (document).ready(function() {('#myTable').DataTable();
    });
</script>
</head>
<body>
<table id="myTable">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Jane</td>
            <td>30</td>
        </tr>
    </tbody>
</table>
</body>
</html>

Output:

HTML Table

Responsive Tables

You can make your tables responsive using CSS frameworks like Bootstrap, which will enable horizontal scrolling on smaller screens.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
    .table-responsive {
        overflow-x: auto;
    }
</style>
</head>
<body>
<div class="table-responsive">
    <table class="table">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
    </table>
</div>
</body>
</html>

Output:

HTML Table

Summary

In this article, we have explored various aspects of using HTML tables, including creating tables, adding headers, spanning rows and columns, applying styles, using tables for layout, adding captions, grouping rows and columns, adding background colors, sorting tables, and making tables responsive. HTML tables are a versatile tool for displaying data in a structured and organized manner.

Like(0)

HTML Articles