HTML | Tables

A table is an arrangement of data in rows and columns, or possibly in a more complex structure. Tables are widely used in communication, research, and data analysis.

  • Tables are useful for various tasks such as presenting text information and numerical data.
  • Tables can be used to compare two or more items in tabular form layout.
  • Tables are used to create databases.

Defining Tables in HTML
An HTML table is defined with the “table” tag. Each table row is defined with the “tr” tag. A table header is defined with the “th” tag. By default, table headings are bold and centered. A table data/cell is defined with the “td” tag.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
  
    <table style="width:100%">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Priya</td>
            <td>Sharma</td>
            <td>24</td>
        </tr>
        <tr>
            <td>Arun</td>
            <td>Singh</td>
            <td>32</td>
        </tr>
        <tr>
            <td>Sam</td>
            <td>Watson</td>
            <td>41</td>
        </tr>
    </table>
  
</body>
  
</html>

chevron_right


Output:

Important Table options in HTML:

  1. Adding a border to a HTML Table: A border is set using the CSS border property. If you do not specify a border for the table, it will be displayed without borders.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            table, th, td {
                border: 1px solid black;
            }
        </style>
    </head>
      
    <body>
        <table style="width:100%">
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Priya</td>
                <td>Sharma</td>
                <td>24</td>
            </tr>
            <tr>
                <td>Arun</td>
                <td>Singh</td>
                <td>32</td>
            </tr>
            <tr>
                <td>Sam</td>
                <td>Watson</td>
                <td>41</td>
            </tr>
        </table>
    </body>
      
    </html>

    chevron_right

    
    

    Output :

  2. Adding Collapsed Borders in a HTML Table: For borders to collapse into one border, add the CSS border-collapse property.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            table, th, td {
                border: 1px solid black;
                border-collapse: collapse;
            }
        </style>
    </head>
      
    <body>
      
        <table style="width:100%">
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Priya</td>
                <td>Sharma</td>
                <td>24</td>
            </tr>
            <tr>
                <td>Arun</td>
                <td>Singh</td>
                <td>32</td>
            </tr>
            <tr>
                <td>Sam</td>
                <td>Watson</td>
                <td>41</td>
            </tr>
        </table>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

  3. Adding Cell Padding in a HTML Table: Cell padding specifies the space between the cell content and its borders.If we do not specify a padding, the table cells will be displayed without padding.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            table, th, td {
                border: 1px solid black;
                border-collapse: collapse;
            }
              
            th, td {
                padding: 20px;
            }
        </style>
    </head>
      
    <body>
      
        <table style="width:100%">
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Priya</td>
                <td>Sharma</td>
                <td>24</td>
            </tr>
            <tr>
                <td>Arun</td>
                <td>Singh</td>
                <td>32</td>
            </tr>
            <tr>
                <td>Sam</td>
                <td>Watson</td>
                <td>41</td>
            </tr>
        </table>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

  4. Adding Left Align Headings in a HTML Table : By default the table headings are bold and centered. To left-align the table headings,we must use the CSS text-align property.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
      
    <head>
        <style>
            table, th, td {
                border: 1px solid black;
                border-collapse: collapse;
            }
              
            th, td {
                padding: 20px;
            }
              
            th {
                text-align: left;
            }
        </style>
    </head>
      
    <body>
      
        <table style="width:100%">
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Priya</td>
                <td>Sharma</td>
                <td>24</td>
            </tr>
            <tr>
                <td>Arun</td>
                <td>Singh</td>
                <td>32</td>
            </tr>
            <tr>
                <td>Sam</td>
                <td>Watson</td>
                <td>41</td>
            </tr>
        </table>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

  5. Adding Border Spacing in a HTML Table: Border spacing specifies the space between the cells. To set the border spacing for a table,we must use the CSS border-spacing property.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
      
    <head>
        <style>
            table, th, td {
                border: 1px solid black;
            }
              
            table {
                border-spacing: 5px;
            }
        </style>
    </head>
      
    <body>
      
        <table style="width:100%">
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Priya</td>
                <td>Sharma</td>
                <td>24</td>
            </tr>
            <tr>
                <td>Arun</td>
                <td>Singh</td>
                <td>32</td>
            </tr>
            <tr>
                <td>Sam</td>
                <td>Watson</td>
                <td>41</td>
            </tr>
        </table>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

  6. Adding Cells that Span Many Columns in HTMl Tables : To make a cell span more than one column, we must use the colspan attribute.
    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            table, th, td {
                border: 1px solid black;
                border-collapse: collapse;
            }
              
            th, td {
                padding: 5px;
                text-align: left;
            }
        </style>
    </head>
      
    <body>
      
        <h2>Cell that spans two columns:</h2>
        <table style="width:100%">
            <tr>
                <th>Name</th>
                <th colspan="2">Telephone</th>
            </tr>
            <tr>
                <td>Vikas Rawat</td>
                <td>9125577854</td>
                <td>8565557785</td>
            </tr>
        </table>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

  7. Adding Cells that Span Many Rows in HTML Tables: To make a cell span more than one row,we must use the rowspan attribute:
    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            table, th, td {
                border: 1px solid black;
                border-collapse: collapse;
            }
              
            th, td {
                padding: 5px;
                text-align: left;
            }
        </style>
    </head>
      
    <body>
      
        <h2>Cell that spans two rows:</h2>
        <table style="width:100%">
            <tr>
                <th>Name:</th>
                <td>Vikas Rawat</td>
            </tr>
            <tr>
                <th rowspan="2">Telephone:</th>
                <td>9125577854</td>
            </tr>
            <tr>
                <td>8565557785</td>
            </tr>
        </table>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

  8. Adding a Caption in a HTML Table: To add a caption to a table, we must use the “caption” tag.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
      
    <head>
        <style>
            table, th, td {
                border: 1px solid black;
                border-collapse: collapse;
            }
              
            th, td {
                padding: 20px;
            }
              
            th {
                text-align: left;
            }
        </style>
    </head>
      
    <body>
      
        <table style="width:100%">
            <caption>DETAILS</caption>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Priya</td>
                <td>Sharma</td>
                <td>24</td>
            </tr>
            <tr>
                <td>Arun</td>
                <td>Singh</td>
                <td>32</td>
            </tr>
            <tr>
                <td>Sam</td>
                <td>Watson</td>
                <td>41</td>
            </tr>
        </table>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

  9. Adding a Background Colour To a Table in HTML: A color can be added as a background in HTML table using the “background-color” option.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            table, th, td {
                border: 1px solid black;
                border-collapse: collapse;
            }
              
            th, td {
                padding: 5px;
                text-align: left;
            }
              
            table#t01 {
                width: 100%;
                background-color: #f2f2d1;
            }
        </style>
    </head>
      
    <body>
      
        <table style="width:100%">
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Priya</td>
                <td>Sharma</td>
                <td>24</td>
            </tr>
            <tr>
                <td>Arun</td>
                <td>Singh</td>
                <td>32</td>
            </tr>
            <tr>
                <td>Sam</td>
                <td>Watson</td>
                <td>41</td>
            </tr>
        </table>
      
        <br />
        <br />
      
        <table id="t01">
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Priya</td>
                <td>Sharma</td>
                <td>24</td>
            </tr>
            <tr>
                <td>Arun</td>
                <td>Singh</td>
                <td>32</td>
            </tr>
            <tr>
                <td>Sam</td>
                <td>Watson</td>
                <td>41</td>
      
            </tr>
        </table>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

  10. Creating Nested Tables in HTML: Nesting tables simply means making a Table inside another Table. Nesting tables can lead to complex tables layouts, which are visually interesting and have the potential of introducing errors.
    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <body>
        <table border=5 bordercolor=black>
            <tr>
                <td>
                    Fisrt Column of Outer Table
                </td>
                  
                <td>
                    <table border=5 bordercolor=grey>
                        <tr>
                            <td>
                                First row of Inner Table
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Second row of Inner Table
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

This article is contributed by Shubrodeep Banerjee. If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above.



My Personal Notes arrow_drop_up

I am a technology enthusiast who has a keen interest in programming I am pursuing Engineering in Computer Science from GEU, Dehradun I like to unwind by watching movies and English sitcomsI have a keen interest in music

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : yashpandey2002