HTML Tables

In this tutorial, you'll learn how to display tabular data using HTML tables.

Tables are created to present various information or data on a web page in a beautiful way in the form of a table. Tables are also used to create web page layouts.
The <table> … </table> tag is used to display tables.

Creating Tables in HTML

Table tags, <table> … </table> tags are used to create tables on web pages. But to create a full table you have to use some more tags along with the table tags. The tags are –

  • <tr> … </tr> – This tag is used to create rows in a table.
  • <th> … </th> – Table headings are created using this tag. By default, this tag causes the text to be positioned in the center of the table cell.
  • <td> … </td> – This tag is used to create cells in a table. Each tag of <td> … </td> on a table creates a new cell.

Below is an example using all tags –

Code Example:
Run Code >> 
<!DOCTYPE html>
<html>
  <head>
    <title> Creating Tables in HTML </title>
  </head>
<body>
  <table>
    <tr>
      <th>Name</th>
      <th>City</th>
      <th>Phone</th>
    </tr>
    <tr>
      <td>Jhon</td>
      <td>Dallas</td>
      <td>369852147</td>
    </tr>
    <tr>
      <td>Peter</td>
      <td>New York</td>
      <td>741258963</td>
    </tr>
  </table>
</body>
</html>

Result:

Name City Phone
Jhon Dallas 369852147
Peter New York 741258963

Here the <tr> tag creates rows in the table, the <th> tag creates columns in each row and the <td> tag creates the table headings.

Table Attributes

The following are some of the attributes that are used to make a table look attractive – border, align, width, cellspacing, cellpadding, and bgcolor.

Border Attribute

If at any time you do not specify a border attribute, the browser will show you a table without borders. See an example below using the Border attribute –

Code Example:
Run Code >> 
<!DOCTYPE html>
<html>
  <head>
    <title> Creating Tables Border Attribute </title>
  </head>
<body>
  <table border="2">
    <tr>
      <th>Name</th>
      <th>City</th>
      <th>Phone</th>
    </tr>
    <tr>
      <td>Jhon</td>
      <td>Dallas</td>
      <td>369852147</td>
    </tr>
    <tr>
      <td>Peter</td>
      <td>New York</td>
      <td>741258963</td>
    </tr>
  </table>
</body>
</html>

Output:

Name City Phone
Jhon Dallas 369852147
Peter New York 741258963
Note : As you can see in the example above, there is only a border around <table>. But the <th> and <td> elements have no borders. To set borders on the <table>, <th> and <td> elements, you need to specify a border property in each of them individually.
Table border-collapse property

The CSS border-collapse property is used to display a border, simply around all the cells in the whole table.

Code Example:
Run Code >> 
<!DOCTYPE html>
<html>
  <head>
    <title> Creating Tables border-collapse property </title>
    <style>
    	table, th, td {
          border: 2px solid red;
          border-collapse: collapse;
          padding:5px;
        }
    </style>
  </head>
<body>
  <table>
    <tr>
      <th>Name</th>
      <th>City</th>
      <th>Phone</th>
    </tr>
    <tr>
      <td>Jhon</td>
      <td>Dallas</td>
      <td>369852147</td>
    </tr>
    <tr>
      <td>Peter</td>
      <td>New York</td>
      <td>741258963</td>
    </tr>
  </table>
</body>
</html>
Align Attribute

Normally a table is displayed on the left side of the website, but you can display the table on the right or in the middle of the website if you wish. Using the align attribute you can display the table to the right, left, or center. The align attribute syntax is –

<table align=”value”></table>

Here left, right or center can be used as value. See the example below –

Code Example:
Run Code >> 
<!DOCTYPE html>
<html>
  <head>
    <title> Creating Tables Align Attribute </title>
       <style>
    	table, th, td {
          border: 2px solid red;
          border-collapse: collapse;
          padding:5px;
        }
    </style>
  </head>
<body>
  <table align="center">
    <tr>
      <th>Name</th>
      <th>City</th>
      <th>Phone</th>
    </tr>
    <tr>
      <td>Jhon</td>
      <td>Dallas</td>
      <td>369852147</td>
    </tr>
    <tr>
      <td>Peter</td>
      <td>New York</td>
      <td>741258963</td>
    </tr>
  </table>
</body>
</html>
Note : By default, a table appears on the left side of the website.
Adding Border Space

The space between the border of a cell in a table and the border of an adjacent cell is called a border space. Border spaces on tables are determined using the CSS border-spacing property.

Code Example:
Run Code >> 
<!DOCTYPE html>
<html>
  <head>
    <title>Adding Border Space </title>
       <style>
        table {
            border-spacing: 20px;
            border: 2px solid blue;
        }
    	th, td {
           border: 2px solid red;
           padding:5px;
        }
    </style>
  </head>
<body>
  <table align="center">
    <tr>
      <th>Name</th>
      <th>City</th>
      <th>Phone</th>
    </tr>
    <tr>
      <td>Jhon</td>
      <td>Dallas</td>
      <td>369852147</td>
    </tr>
    <tr>
      <td>Peter</td>
      <td>New York</td>
      <td>741258963</td>
    </tr>
  </table>
</body>
</html>
Note : If the CSS border-collapse property is used on the table, the CSS border-spacing property will not be affected
Colspan Attribute

Multiple cells are created in a table using the colspan attribute.

Code Example:
Run Code >> 
<!DOCTYPE html>
<html>
  <head>
    <title>Adding Border Space </title>
       <style>
         table {
            border-spacing: 20px;
            border: 2px solid blue;
        }
    	th, td {
           border: 2px solid red;
           padding:5px;
        }
    </style>
  </head>
<body>
  <table>
    <tr>
      <th>No.</th>
      <th colspan="2">First & last name</th>
    </tr>
    <tr>
      <td>01</td>
      <td>Peter </td>
      <td>Parker</td>
    </tr>
    <tr>
      <td>02</td>
      <td>John</td>
      <td>Carter</td>
    </tr>
  </table>
</body>
</html>
Rowspan Attribute

Rowspan attributes can be used to create multiple table rows in a table.

Code Example:
Run Code >> 
<!DOCTYPE html>
<html>
  <head>
    <title>Adding Border Space </title>
       <style>
         table {
            border-spacing: 20px;
            border: 2px solid blue;
         }
    	th, td {
          border: 2px solid red;
          padding:5px;
        }
    </style>
  </head>
<body>
  <table>
    <tr>
      <th>Name:</th>
      <td>Bill Gates</td>
    </tr>
    <tr>
      <th rowspan="2">Telephone:</th>
      <td>147852369</td> 
    </tr>
    <tr>
      <td>963258741</td>
    </tr>
  </table>
</body>
</html>

Adding Captions to Tables

Captions are created on tables using the <caption> tag. See the example below.

Code Example:
Run Code >> 
<!DOCTYPE html>
<html>
  <head>
    <title>Adding Captions to Tables</title>
    <style>
      table, th, td {
        border: 2px solid red;
        border-collapse: collapse;
        padding:5px;
      }
    </style>
  </head>
  <body>
    <table >
      <caption>Users Information</caption>
      <tr>
        <th>Name</th>
        <th>City</th>
        <th>Phone</th>
      </tr>
      <tr>
        <td>Jhon</td>
        <td>Dallas</td>
        <td>369852147</td>
      </tr>
      <tr>
        <td>Peter</td>
        <td>New York</td>
        <td>741258963</td>
      </tr>
    </table>
  </body>
</html>
Note : The <caption> element must be placed directly after the opening <table> tag.

Defining a Table Header, Body, and Footer

HTML provides a series of <thead>, <tbody> and <tfoot> tags that help you create more structured tables by defining the title, body, and footer regions, respectively. Take an example.

Code Example:
Run Code >> 
<!DOCTYPE html>
<html>
  <head>
    <title>HTML Table with a Header, Footer and Body</title>
    <style>
      table, th, td {
        border: 2px solid red;
        border-collapse: collapse;
        padding:5px;
      }
    </style>
  </head>
  <body>
    <table >
      <caption>Users Information</caption>
      <tr>
        <th>Name</th>
        <th>City</th>
        <th>Phone</th>
      </tr>
      <tr>
        <td>Jhon</td>
        <td>Dallas</td>
        <td>369852147</td>
      </tr>
      <tr>
        <td>Peter</td>
        <td>New York</td>
        <td>741258963</td>
      </tr>
    </table>
  </body>
</html>

TOOLS

ABOUT US

CONTACT