Section 4: HTML Tables

Lesson 1: Creating Tables in HTML

HTML tables provide a structured way to present data in rows and columns. This lesson covers the creation of tables using the <table>, <tr>, <th>, and <td> elements, along with attributes for styling and structure.

1.1 Basic Table Structure

To create a basic table, you use the <table> tag to define the entire table, <tr> for rows, <th> for header cells, and <td> for data cells.

<table>

    <tr>

        <th>Header 1</th>

        <th>Header 2</th>

    </tr>

    <tr>

        <td>Data 1</td>

        <td>Data 2</td>

    </tr>

</table>

• <table>: Defines the entire table.

• <tr>: Represents a table row.

• <th>: Represents a table header cell.

• <td>: Represents a table data cell.

1.2 Table Attributes for Styling and Structure

Table attributes can be used to enhance the structure and style of tables:

• border: Specifies the border width.

• cellpadding: Adds padding within cells.

• cellspacing: Adds space between cells.

<table border="1" cellpadding="10" cellspacing="0">

    <!-- Table content goes here -->

</table>

Adjust these attributes based on your design preferences.

Lesson 2: Table Accessibility and Best Practices

Ensuring accessibility and applying best practices when creating tables enhances the user experience. This lesson covers adding captions and summaries, as well as styling tables with CSS.

2.1 Adding Captions and Summaries

 <table>

    <caption>Monthly Expenses</caption>

    <tr>

        <th>Category</th>

        <th>Amount</th>

    </tr>

    <tr>

        <td>Rent</td>

        <td>$1000</td>

    </tr>

</table>

<caption>: Adds a title or description for the table.

2.2 Styling Tables with CSS

<style>

    table {

        width: 100%;

        border-collapse: collapse;

    }

    th, td {

        border: 1px solid black;

        padding: 10px;

        text-align: left;

    }

    th {

        background-color: #f2f2f2;

    }

</style>

Apply CSS styles to enhance the visual presentation of your tables.

Creating accessible tables with clear captions, summaries, and proper styling ensures that users can understand and navigate the table content effectively. Experiment with different attributes and styles to achieve the desired table layout and appearance.