Table Tags in HTML: A Complete Introduction

Table Tags in HTML: A Complete Introduction

byRAYS CODING -
0
In this HTML tutorial, we will discuss the HTML table, The HTML table is used to display the record in the tabular format.

HTML TUTORIAL

The basic structure of the HTML table

HTML tables are created by the <table> tag. In the HTML table tag, we use some important tags like "<thead>", "<tbody>", "<tfoot>", "<tr>", "<th>", "<td>" etc.


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>HTML Table</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
        <style>
            body{
                background:aliceblue;
            }
        </style>
    </head>
    <body>
        <table class="table table-striped">
            <thead>
            <tr>
                <th>Student Name</th>
                <th>Subject</th>
                <th>Grade</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>John Doe</td>
                <td>Mathematics</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Jane Smith</td>
                <td>Science</td>
                <td>B+</td>
            </tr>
            <tr>
                <td>Ben Smith</td>
                <td>Science</td>
                <td>A+</td>
            </tr>
            <tr>
                <td>Emily Smith</td>
                <td>Mathematics</td>
                <td>A+</td>
            </tr>
            <tr>
                <td>Emily Johnson</td>
                <td>History</td>
                <td>A-</td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <td>Total Students</td>
                <td></td>
                <td>5</td>
            </tr>
            </tfoot>
        </table>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    </body>
    </html>

Code Explanation

<table>:-  <Table> tag is the container for the entire table.
<tr>:-  <tr> defines a row in the table.
<th>:- <th> defines a header cell, typically displayed in bold and centered.
<td>:- <td> defines a standard data cell.
<thead>:- <thead> Groups the header content.
<tbody>:- <tbody> Groups the body content.
<tfoot>:- <tfoot> Groups the footer content.


HTML TUTORIAL


"<thead>", "<tbody>", "<tfoot>", "<tr>", "<th>", "<td>", apart from these tags some tags and attributes are used in "HTML Table", let's see


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>HTML Table</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
        <style>
            body {
                background: aliceblue;
            }
        </style>
    </head>
    <body>
        <table class="table table-striped">
            <caption>Sample Table with Grouped Content</caption>
            <thead>
                <tr>
                    <th>Student Name</th>
                    <th>Subject</th>
                    <th>Grade</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>John Doe</td>
                    <td>Mathematics</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td rowspan="2">Jane Smith</td>
                    <td>Science</td>
                    <td>B+</td>
                </tr>
                <tr>
                    <td>Ben Smith</td>
                    <td>Science</td>
                </tr>
                <tr>
                    <td>Emily Smith</td>
                    <td>Mathematics</td>
                    <td>A+</td>
                </tr>
                <tr>
                    <td>Emily Johnson</td>
                    <td>History</td>
                    <td>A-</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3">Total Students</td>
                </tr>
            </tfoot>
        </table>
       
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    </body>
    </html>

HTML TUTORIAL

Caption: Caption tag Adds a title or description to a table.
Rowspan: The Rowspan attribute merges a cell across multiple rows.
Colspan: The Colspan merges a cell across multiple columns.

Conclusion

Using an HTML table we can easily display records, Generally, an HTML table can display records saved in the database.
Tags

You may like these posts

Post a Comment

Previous Post Next Post

Recent in Technology

Responsive Advertisement