HTML Tables

Tables are used to organize and display data in rows and columns. In this tutorial, you will learn about the essential tags and attributes to create tables in HTML.

1. Basic Structure of an HTML Table

An HTML table is created using the <table> tag. Each row is defined with the <tr> tag, and data within a row is placed inside <td> (table data) or <th> (table header) tags. Here's an example:

        <table>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
            </tr>
        </table>
    

2. Example: Simple Table

Below is a simple table example:

Header 1	Header 2	Header 3
Data 1	Data 2	Data 3
Data 4	Data 5	Data 6

3. Adding Rows and Columns

You can add more rows using the <tr> tag and additional columns using <td>. Example:

        <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>
    

4. Styling Tables

Tables can be styled to enhance their appearance. Here are some tips:

• Use border to add table borders.
• Apply background-color for headers or alternating rows.
• Use padding for better spacing within cells.
• Add :hover effects for interactive rows.

5. Practical Example

Create a table to display student details:

        <table>
            <tr>
                <th>Roll No</th>
                <th>Name</th>
                <th>Grade</th>
            </tr>
            <tr>
                <td>1</td>
                <td>Alice</td>
                <td>A</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Bob</td>
                <td>B</td>
            </tr>
        </table>
    

Roll No	Name	Grade
1	Alice	A
2	Bob	B

Written By: Muhammad Shoaib Khan Marwat (MSKM) | https://codebacha.blogspot.com/