HTML Tables

Introduction

In this chapter, you will learn about HTML tables, which are used to display data in a tabular format. Tables are an essential part of web design, allowing you to organize information into rows and columns. Understanding how to create and style tables is crucial for presenting data clearly and effectively. We will cover a real-world use case of displaying student information.

Basic Table Structure

An HTML table is defined with the <table> tag. Each table is divided into rows (<tr>), and each row is divided into cells. There are two types of table cells: header cells (<th>) and standard cells (<td>).

Syntax

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
    </tr>
    <tr>
        <td>Data 4</td>
        <td>Data 5</td>
        <td>Data 6</td>
    </tr>
</table>

Example of a Simple Table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple HTML Table</title>
</head>
<body>
    <h1>Simple HTML Table</h1>
    <table border="1">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
        </tr>
        <tr>
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
        </tr>
    </table>
</body>
</html>

Table Attributes

Border

The border attribute specifies the width of the table border.

Example

<table border="1">
    ...
</table>

Cell Padding

The cellpadding attribute specifies the space between the cell content and its borders.

Example

<table border="1" cellpadding="10">
    ...
</table>

Cell Spacing

The cellspacing attribute specifies the space between the cells.

Example

<table border="1" cellspacing="5">
    ...
</table>

Table Caption

The <caption> tag defines a title or caption for the table.

Example

<table border="1">
    <caption>Table Caption</caption>
    ...
</table>

Advanced Table Features

Colspan

The colspan attribute allows a cell to span multiple columns.

Example

<tr>
    <td colspan="2">This cell spans two columns</td>
</tr>

Rowspan

The rowspan attribute allows a cell to span multiple rows.

Example

<tr>
    <td rowspan="2">This cell spans two rows</td>
    <td>Data 1</td>
</tr>
<tr>
    <td>Data 2</td>
</tr>

Styling Tables with CSS

You can use CSS to style tables and make them more visually appealing.

Example

<!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</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>
    <h1>Styled HTML Table</h1>
    <table>
        <caption>Table with CSS Styling</caption>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
        </tr>
        <tr>
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
        </tr>
    </table>
</body>
</html>

Real-World Use Case: Student Information Table

A common use case for HTML tables is displaying student information in a tabular format. The table can include student ID, first name, last name, age, and roll number.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student Information</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
        }
        th {
            background-color: #f4f4f4;
            text-align: left;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        tr:hover {
            background-color: #f1f1f1;
        }
    </style>
</head>
<body>
    <h1>Student Information</h1>
    <table>
        <caption>Student Information Table</caption>
        <tr>
            <th>ID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
            <th>Roll No</th>
        </tr>
        <tr>
            <td>1</td>
            <td>John</td>
            <td>Doe</td>
            <td>20</td>
            <td>101</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Jane</td>
            <td>Smith</td>
            <td>21</td>
            <td>102</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Emily</td>
            <td>Johnson</td>
            <td>22</td>
            <td>103</td>
        </tr>
    </table>
</body>
</html>

Conclusion

HTML tables are used for organizing and presenting data in a structured format. By using the <table>, <tr>, <th>, and <td> tags along with various attributes and CSS, you can create complex and visually appealing tables. Understanding how to use and style tables effectively is essential for web development. The real-world example of a student information table demonstrates how tables can be used to display useful information in an organized manner.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top