Learn HTML Basics to Advance in 7 Days: Day Five

• Day One
• Day Two
• Day Three
• Day Four
• Day Five
• Day Six
• Day Seven

HTML Tables

Welcome to Day Five of learning HTML. Today, we will explore HTML tables. Tables are used to organize data in rows and columns.

Tables are created using the <table> tag. Inside the table, rows are defined using the <tr> tag, and cells are defined using the <td> tag. Headers are defined using the <th> tag.

Basic Table Structure

Here is a simple example of a table:

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>24</td>
        <td>New York</td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>30</td>
        <td>Los Angeles</td>
    </tr>
</table>
                

In this example, we have a table with three columns (Name, Age, City) and two rows of data.

Table Elements

Let's look at some additional elements that can be used within a table:

• <caption> - Adds a caption or title to the table.
• <thead> - Groups the header content in the table.
• <tbody> - Groups the body content in the table.
• <tfoot> - Groups the footer content in the table.
• <colgroup> - Specifies a group of one or more columns in the table for formatting.
• <col> - Specifies column properties for each column within a colgroup element.

Here is an example using these elements:

<table>
    <caption>Employee Information</caption>
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Manager</td>
            <td>$5000</td>
        </tr>
        <tr>
            <td>Doe</td>
            <td>Developer</td>
            <td>$4500</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">Total Employees: 2</td>
        </tr>
    </tfoot>
</table>
                

This table includes a caption, header, body, and footer sections. The <td colspan="3"> attribute merges three columns into one cell in the footer.

Table Attributes

Tables can have various attributes to control their appearance and behavior. Here are some common table attributes:

• border - Specifies the border width of the table.
• cellpadding - Specifies the space between the cell content and the cell border.
• cellspacing - Specifies the space between cells.
• width - Specifies the width of the table.
• height - Specifies the height of the table.
• align - Specifies the alignment of the table (left, center, right).

Here is an example of a table using some of these attributes:

<table border="1" cellpadding="5" cellspacing="0" width="100%" height="200" align="center">
    <tr>
        <th>Product</th>
        <th>Price</th>
    </tr>
    <tr>
        <td>Laptop</td>
        <td>$800</td>
    </tr>
    <tr>
        <td>Phone</td>
        <td>$500</td>
    </tr>
</table>
                

This table has a border, padding inside cells, no space between cells, and is centered on the page with a specified width and height.

Advanced Table Elements

There are more advanced elements and attributes you can use to enhance your tables:

• scope - Specifies whether a header cell is for a column, row, or group of columns or rows.
• headers - Specifies the headers for each cell.
• rowspan - Specifies the number of rows a cell should span.
• colspan - Specifies the number of columns a cell should span.

Here is an example using some of these attributes:

<table border="1">
    <tr>
        <th scope="col">Month</th>
        <th scope="col">Savings</th>
        <th scope="col">Expenses</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$200</td>
        <td rowspan="2">$500</td>
    </tr>
    <tr>
        <td>February</td>
        <td>$300</td>
    </tr>
    <tr>
        <td colspan="2">Total Savings</td>
        <td>$500</td>
    </tr>
</table>
                

In this example, the "Expenses" cell spans two rows, and the "Total Savings" cell spans two columns.

Styling Tables

While we are not using CSS in this tutorial, it is important to note that CSS is the best way to style tables. You can control the appearance of tables, including borders, background colors, text alignment, and much more with CSS.

Here is an example of a simple CSS rule for tables:

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}
                

This CSS rule will collapse the table borders, set the table width to 100%, and style the table headers and cells with padding, border, and background color.

Conclusion

Today, we covered HTML tables, including basic table structure, table elements, table attributes, advanced table elements, and a brief introduction to styling tables with CSS. Tables are essential for displaying data in a structured format. Practice creating tables with different elements and attributes to become proficient in using HTML tables.

FAQ

What is the purpose of the <table> tag?

The <table> tag is used to create a table to organize data in rows and columns.

What are the main elements of a table?

The main elements of a table are <table>, <tr> (table row), <th> (table header), and <td> (table data).

How do you add a caption to a table?

Use the <caption> tag to add a caption or title to a table.

What are some common table attributes?

Common table attributes include border, cellpadding, cellspacing, width, height, and align.

How can you make a cell span multiple rows or columns?

Use the rowspan attribute to make a cell span multiple rows and the colspan attribute to make a cell span multiple columns.