FullStackEngineering.ioFullStackEngineering.io

For Clients

  • Post Jobs
  • Browse Talent
  • Explore Services

For Talent

  • Job Search
  • Talent Verification
  • Offer Services
  • Explore Courses

Company

  • Contact Us
  • Terms and Conditions
  • Privacy Policy
Full Stack Engineering Logo

© 2024 FullStackEngineering.io

HTML in 1 Day: Chapter 6: Tables

Shahin Mannan
By Shahin Mannan on

June 1, 2024

  • Frontend Development

Creating and Styling Tables

Tables are a powerful way to organize and display data on web pages. In this chapter, you'll learn how to create tables using HTML, style them for better readability, and use advanced features to enhance their functionality.

Creating a Basic Table

The basic structure of an HTML table involves the <table>, <tr>, <th>, and <td> tags.

  • <table>: Defines the table.
  • <tr>: Defines a table row.
  • <th>: Defines a header cell.
  • <td>: Defines a standard data cell.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Table</title>
</head>
<body>
    <h1>Basic 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 Styling

Using CSS, you can style tables to improve their appearance and readability.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styled Table</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        tr:hover {
            background-color: #f1f1f1;
        }
        th {
            background-color: #4CAF50;
            color: white;
        }
    </style>
</head>
<body>
    <h1>Styled Table</h1>
    <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>
</body>
</html>

Advanced Table Features

Tables can also include advanced features like merging cells using colspan and rowspan.

Example: Merging Cells

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

Practical Exercise

  1. Create a New HTML File: Save it as tables.html.
  2. Add a Basic Table: Create a table with three columns and three rows.
  3. Style the Table: Use CSS to style the table for better readability.
  4. Add Advanced Features: Include examples of colspan and rowspan to merge cells.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tables</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        tr:hover {
            background-color: #f1f1f1;
        }
        th {
            background-color: #4CAF50;
            color: white;
        }
    </style>
</head>
<body>
    <h1>Tables</h1>
    
    <h2>Basic Table</h2>
    <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>

    <h2>Styled Table</h2>
    <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>
    
    <h2>Advanced Table</h2>
    <table border="1">
        <tr>
            <th colspan="2">Merged Header</th>
            <th>Header 3</th>
        </tr>
        <tr>
            <td rowspan="2">Merged Cell</td>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
        <tr>
            <td>Data 3</td>
            <td>Data 4</td>
        </tr>
    </table>
</body>
</html>

Save and open this file in your browser to see the tables in action.

Key Takeaways

  • The <table>, <tr>, <th>, and <td> tags are used to create tables.
  • CSS can be used to style tables for better readability.
  • Advanced features like colspan and rowspan allow for merging cells in tables.

Next Steps

In the next chapter, we’ll explore how to create and use forms in HTML, enabling user interaction and data collection. Keep practicing to master creating and styling tables in HTML.

Please Sign In to post a comment.

Comments (0)