Building Tables

Example: Basic Table

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

This example demonstrates a simple table with headers and rows. The <th> element is used for table headers, and the <td> element is used for table data.

Common Table Attributes

• border: Adds a border around the table.
• cellpadding: Adds padding inside table cells.
• cellspacing: Adds space between table cells.

Example: Styled Table

<table style="border: 1px solid black; border-collapse: collapse;">
    <tr>
        <th style="border: 1px solid black; padding: 5px;">Name</th>
        <th style="border: 1px solid black; padding: 5px;">Age</th>
        <th style="border: 1px solid black; padding: 5px;">City</th>
    </tr>
    <tr>
        <td style="border: 1px solid black; padding: 5px;">Alice</td>
        <td style="border: 1px solid black; padding: 5px;">25</td>
        <td style="border: 1px solid black; padding: 5px;">New York</td>
    </tr>
    <tr>
        <td style="border: 1px solid black; padding: 5px;">Bob</td>
        <td style="border: 1px solid black; padding: 5px;">30</td>
        <td style="border: 1px solid black; padding: 5px;">Los Angeles</td>
    </tr>
</table>
        

This example adds borders and padding to the table for better readability.

Practice: Try It Yourself

1. Project: Student Grades
   Create a table to display student names, subjects, and grades. Add headers and style the table using CSS.
2. Project: Product List
   Build a table to list products, prices, and availability. Use borders and padding for better presentation.

Continue Learning

• Next: Working with Links
• Previous: Creating Forms in HTML