HTML Tables - The Coding College

Welcome to The Coding College, where we guide you in mastering web development! In this post, we’ll explore HTML tables, their structure, and how to use them effectively for displaying tabular data on your website.

What Are HTML Tables?

HTML tables are used to organize data into rows and columns. They are ideal for presenting structured information, such as schedules, pricing lists, and reports, in a clear and readable format.

Basic Structure of an HTML Table

An HTML table is created using the <table> element, with rows defined by <tr> and data cells by <td>.

Basic Syntax

<table>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
    <tr>
        <td>Data 3</td>
        <td>Data 4</td>
    </tr>
</table>

Table Tags and Their Purposes

<table>: The container for the table.
<tr>: Defines a table row.
<td>: Defines a table data cell.
<th>: Defines a table header cell, typically bold and centered.
<caption>: Adds a title or description to the table.

Example: A Simple HTML Table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Tables Example | The Coding College</title>
</head>
<body>
    <h1>HTML Tables Example</h1>
    <table border="1">
        <caption>Student Grades</caption>
        <tr>
            <th>Name</th>
            <th>Subject</th>
            <th>Grade</th>
        </tr>
        <tr>
            <td>John</td>
            <td>Math</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Jane</td>
            <td>Science</td>
            <td>B</td>
        </tr>
    </table>
</body>
</html>

Adding Style to Tables

Tables can be styled with CSS for better readability and appearance.

Example: Styled Table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styled HTML Table | The Coding College</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f4f4f4;
        }
        tr:hover {
            background-color: #f1f1f1;
        }
    </style>
</head>
<body>
    <h1>Styled HTML Table</h1>
    <table>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
        </tr>
        <tr>
            <td>Sam</td>
            <td>25</td>
            <td>New York</td>
        </tr>
        <tr>
            <td>Anna</td>
            <td>22</td>
            <td>London</td>
        </tr>
    </table>
</body>
</html>

Advanced Table Features

Rowspan and Colspan
- Use rowspan to merge cells vertically and colspan to merge cells horizontally.

<table border="1">
    <tr>
        <th rowspan="2">Name</th>
        <th colspan="2">Scores</th>
    </tr>
    <tr>
        <td>Math</td>
        <td>Science</td>
    </tr>
    <tr>
        <td>John</td>
        <td>90</td>
        <td>85</td>
    </tr>
</table>

Table Borders and Spacing
- Adjust borders and spacing using CSS or attributes like border-spacing and border-collapse.

Best Practices for Using Tables

Use Tables for Tabular Data Only: Avoid using tables for layout purposes; use CSS instead.
Add Accessibility Features: Include the scope attribute in <th> tags to assist screen readers.
Keep It Simple: Avoid overly complex tables; break large datasets into smaller tables if needed.
Ensure Responsiveness: Use CSS media queries to make tables mobile-friendly.

Conclusion

HTML tables are a powerful tool for presenting data in a structured and visually appealing way. With the right styling and accessibility features, they can enhance the user experience on your website.

For more tutorials and tips, visit The Coding College and start building amazing web applications today!