Current Location：How HTML > HTML Articles > Content

HTML Table

HTML Table

HTML tables are a fundamental component of web development, allowing developers to organize and display data in a structured format. In this comprehensive guide, we will explore various aspects of creating and styling HTML tables.

Basic Table Structure

Creating a basic HTML table involves using the <table>, <tr>, and <td> tags. The <table> tag defines the table itself, <tr> represents a row within the table, and <td> defines individual cells within each row.

<!DOCTYPE html>
<html>
<head>
    <title>Basic HTML Table</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
        </tr>
        <tr>
            <td>Cell 3</td>
            <td>Cell 4</td>
        </tr>
    </table>
</body>
</html>
HTML

Output:

HTML Table

Table Headers

To define headers for columns or rows in an HTML table, you can use the <th> tag. This tag is similar to <td>, but it indicates that the content should be treated as a header.

<!DOCTYPE html>
<html>
<head>
    <title>HTML Table with Headers</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
    </table>
</body>
</html>
HTML

Output:

HTML Table

Spanning Rows and Columns

You can merge multiple rows or columns in an HTML table using the rowspan and colspan attributes within the <td> or <th> tags.

<!DOCTYPE html>
<html>
<head>
    <title>Spanning Rows and Columns</title>
</head>
<body>
    <table border="1">
        <tr>
            <th colspan="2">Header 1 & 2</th>
        </tr>
        <tr>
            <td rowspan="2">Data 1</td>
            <td>Data 2</td>
        </tr>
    </table>
</body>
</html>
HTML

Output:

HTML Table

Styling Tables with CSS

CSS can be used to style HTML tables, making them visually appealing and enhancing readability. You can apply styles to elements like <table>, <tr>, <th>, and <td>.

<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: center;
        }
    </style>
</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>
HTML

Output:

HTML Table

Adding Borders and Background Colors

Borders and background colors can be added to different parts of an HTML table to improve its visual appearance and structure.

<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            width: 100%;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: center;
        }
        th {
            background-color: lightblue;
        }
        td {
            background-color: lightgrey;
        }
    </style>
</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>
HTML

Output:

HTML Table

Responsive Tables

Creating responsive tables ensures that they adapt well to different screen sizes. You can achieve responsiveness by using CSS properties like overflow-x and white-space.

<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            width: 100%;
            white-space: nowrap;
            overflow-x: auto;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
            <th>Header 4</th>
            <th>            <th>Header 5</th>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            <td>Data 4</td>
            <td>Data 5</td>
        </tr>
    </table>
</body>
</html>
HTML

Output:

HTML Table

Sorting Tables

Implementing table sorting functionality allows users to interact with the data dynamically. JavaScript libraries like DataTables can be used to enable sorting in HTML tables.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.css">
</head>
<body>
    <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John</td>
                <td>30</td>
            </tr>
            <tr>
                <td>Alice</td>
                <td>25</td>
            </tr>
        </tbody>
    </table>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
    <script>
        (document).ready(function() {('#example').DataTable();
        });
    </script>
</body>
</html>
HTML

Output:

HTML Table

Adding Links and Images

You can include hyperlinks and images within table cells to create interactive and visually appealing content.

<!DOCTYPE html>
<html>
<head>
    <title>HTML Table with Links and Images</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Image</th>
        </tr>
        <tr>
            <td><a href="https://how2html.com">Product A</a></td>
            <td>$20</td>
            <td><img src="image.jpg" alt="Product Image"></td>
        </tr>
    </table>
</body>
</html>
HTML

Output:

HTML Table

Nested Tables

Nested tables allow for more complex layouts and structures within an HTML table. You can place one table inside another to organize data hierarchically.

<!DOCTYPE html>
<html>
<head>
    <title>Nested HTML Tables</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>Category</th>
            <th>Details</th>
        </tr>
        <tr>
            <td>Category A</td>
            <td>
                <table border="1">
                    <tr>
                        <th>Subcategory</th>
                        <th>Quantity</th>
                    </tr>
                    <tr>
                        <td>Subcategory 1</td>
                        <td>10</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>
HTML

Output:

HTML Table

Table Accessibility

Ensuring that your HTML tables are accessible is crucial for users with disabilities. You can use attributes like scope, headers, and summary to improve accessibility.

<!DOCTYPE html>
<html>
<head>
    <title>Accessible HTML Table</title>
</head>
<body>
    <table border="1" summary="Sales data for the year">
        <caption>Sales Report</caption>
        <tr>
            <th scope="col">Month</th>
            <th scope="col">Revenue</th>
        </tr>
        <tr>
            <td headers="month">January</td>
            <td headers="revenue">$1000</td>
        </tr>
    </table>
</body>
</html>
HTML

Output:

HTML Table

These examples cover various aspects of working with HTML tables, from basic structure to advanced styling and functionality. By mastering these techniques, you can create dynamic and visually appealing tables for your web projects.

Like(2)

HTML Articles