HTML Tutorial

<table> Tag in HTML | Creating Tables

The <table> tag in HTML is used to create a table. It defines a container for table rows and columns. The table element helps in organizing and presenting data in rows and columns, making it easier to read and compare information.

Key Points on <table> Tag:

The <table> tag is the outermost container for all table-related elements, including rows (<tr>), headers (<th>), and data cells (<td>).
Tables can be styled using CSS for improved presentation and readability.
The <caption> tag can be used inside the <table> tag to provide a title or description of the table.
Table rows (<tr>) group the individual data cells or header cells in the table.
Each column of data within a table is represented using <td>, and header cells are created using <th>.
Tables are typically used to display structured data, such as records or lists.

Syntax of <table> Tag:

Syntax Example

<table>
            <caption>Table Title</caption>
            <thead>...


        
        Example of <table> Tag in HTML:
        This example demonstrates how to use the <table> tag to create a simple table with data.
        
            Code Example
            
                
                <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>HTML Table Example</title>
        </head>
        <body>
        
            <table border="1">
                <caption>Student Information</caption>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Age</th>
                        <th>Grade</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>John Doe</td>
                        <td>20</td>
                        <td>A</td>
                    </tr>
                    <tr>
                        <td>Jane Smith</td>
                        <td>22</td>
                        <td>B</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="3">Total: 2 Students</td>
                    </tr>
                </tfoot>
            </table>
        
        </body>
        </html>
            
        
        
        
            Output
            
                
                    Student Information
                    
                        
                            Name
                            Age
                            Grade
                        
                    
                    
                        
                            John Doe
                            20
                            A
                        
                        
                            Jane Smith
                            22
                            B
                        
                    
                    
                        
                            Total: 2 Students
                        
                    
                
            
        
        
        
            The <table> tag is essential for displaying tabular data on the web. It helps organize data in a structured way using rows and columns. By combining it with other table elements like <thead>, <tbody>, and <tfoot>, you can create comprehensive tables for various data presentation purposes.

Student Information
Name	Age	Grade
John Doe	20	A
Jane Smith	22	B
Total: 2 Students

 

      
        
            
                ← Previous Topic
            
            
                 HTML svg Tag
            
        
        
        
            
                HTML tbody tag
            
            
                Next Topic →