Tutorialspoint.dev

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:

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

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:

    <!DOCTYPE html>
    <html>
    <body>
    <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>

    Output :

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

    Example:

    <!DOCTYPE html>
    <html>
    <body>
    <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>

    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:

    <!DOCTYPE html>
    <html>
    <body>
    <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>

    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:

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

    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:

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

    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:



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

    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:

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

    Output:

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

    Example:

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

    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:

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

    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:

    <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>
       </td>
      </tr>
    </table>
    </body>
    </html>

    Output:

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



This article is attributed to GeeksforGeeks.org

tags:

HTML Web Technologies HTML and XML HTML-Basics Web technologies-HTML and XML HTML
Prev Next
More topics on HTML Programming

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter

Top Followed books

HTML How to align Placeholder Text ...
HTML HTML | Subscript and Superscri...
HTML HTML | Basics
HTML HTML | Canvas Basics
HTML HTML | Editors
HTML HTML | onmousemove Event Attri...