Creating Tables

Complete HTML Course (Free)

About Lesson

This lesson will teach you how to create and style tables using HTML. You will learn the basic structure of tables, how to include headers and data, and ways to enhance the table’s appearance with CSS.

1. Why Use Tables?

Tables are used to organize and display data in rows and columns, making it easy for users to interpret information. They are ideal for presenting tabular data such as schedules, comparison charts, and financial reports.

2. Basic Structure of a Table

HTML tables are created using the <table> element, with rows defined by <tr> and cells by <td>. Headers are created using the <th> element.

Example of a Basic Table:

<!DOCTYPE html>
<html>
<head>
    <title>Basic Table</title>
</head>
<body>
    <h1>Student Grades</h1>
    <table border="1">
        <tr>
            <th>Name</th>
            <th>Subject</th>
            <th>Grade</th>
        </tr>
        <tr>
            <td>John Doe</td>
            <td>Mathematics</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>Science</td>
            <td>B</td>
        </tr>
    </table>
</body>
</html>

3. Key Table Elements

<table>:
- Defines the table container.
<tr> (Table Row):
- Defines a row within the table.
<th> (Table Header Cell):
- Represents header cells, typically bold and centered by default.
<td> (Table Data Cell):
- Represents standard data cells.
border Attribute:
- Adds a border around the table for visibility (use CSS for modern styling).

4. Adding a Caption to a Table

The <caption> element provides a title or description for the table.

Example:

<table border="1">
    <caption>Monthly Sales Report</caption>
    <tr>
        <th>Product</th>
        <th>Sales</th>
        <th>Revenue</th>
    </tr>
    <tr>
        <td>Widget A</td>
        <td>500</td>
        <td>$10,000</td>
    </tr>
</table>

5. Merging Cells

You can merge cells using the colspan and rowspan attributes.

colspan: Merges cells horizontally.
```
<td colspan="2">Merged Cell</td>
```
rowspan: Merges cells vertically.
```
<td rowspan="2">Merged Cell</td>
```

Example:

<table border="1">
    <tr>
        <th>Name</th>
        <th colspan="2">Performance</th>
    </tr>
    <tr>
        <td>John</td>
        <td>Excellent</td>
        <td>A</td>
    </tr>
</table>

6. Styling Tables with CSS

CSS can significantly enhance the appearance of a table.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Styled Table</title>
    <style>
        table {
            width: 80%;
            margin: 20px auto;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }
        th {
            background-color: #f4f4f4;
            font-weight: bold;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        tr:hover {
            background-color: #f1f1f1;
        }
    </style>
</head>
<body>
    <h1>Styled Table Example</h1>
    <table>
        <tr>
            <th>Item</th>
            <th>Price</th>
            <th>Quantity</th>
        </tr>
        <tr>
            <td>Apples</td>
            <td>$1.00</td>
            <td>5</td>
        </tr>
        <tr>
            <td>Bananas</td>
            <td>$0.50</td>
            <td>10</td>
        </tr>
    </table>
</body>
</html>

7. Responsive Tables

To make tables responsive, use CSS to enable horizontal scrolling on smaller screens.

Example:

<style>
    .table-container {
        overflow-x: auto;
    }
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid #ddd;
        padding: 8px;
    }
</style>

<div class="table-container">
    <table>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
        </tr>
    </table>
</div>

8. Advanced Features for Tables

Sorting Tables:
- Use JavaScript or libraries like DataTables to add sorting functionality.
Highlighting Rows:
- Add hover effects or color-code rows for better readability.
Accessibility:
- Use the scope attribute in <th> for better screen reader compatibility.
```
<th scope="col">Name</th>
```

9. Hands-On Activity: Create Your Own Table

Create a new HTML file named table_example.html.
Add a table displaying a list of items, their prices, and quantities.
Apply CSS to style the table with borders, hover effects, and responsive behavior.

Example Output: A styled table displaying data like products, prices, and quantities.

10. Best Practices for Creating Tables

Keep Tables Simple:
- Avoid cluttering with excessive data or styling.
Add Captions:
- Use <caption> for clarity and accessibility.
Enhance Readability:
- Use alternating row colors and padding.
Test Responsiveness:
- Ensure the table adapts to different screen sizes.

11. Summary

Tables organize data into rows and columns using <table>, <tr>, <th>, and <td>.
Use CSS to style and enhance table presentation.
Make tables responsive for better usability on mobile devices.
Use attributes like colspan and rowspan to merge cells.