HTML Tables

HTML Tutorial

About Lesson

HTML Tables

In this tutorial, we will learn about tables and its attributes in HTML with the help of examples.

Tables

A table is an arrangement of data in rows and columns. HTML tables allow web developers to arrange data into rows and columns.
Tables are widely used in communication, research, and analysis. Tables are useful for various tasks like presentation.

The <table> tag defines an HTML tables.
The <th> tag is used to create table header, the <tr> tag is used to create table rows and the <td> tag is used to create data cells.
Each row is defined with the <tr> tag. A table header is defined with the <th> tag.
By default, the text inside the <th> elements are bold and centered.
Each table data/cell is defined with the <td> tag.
By default, the text inside the <td> elements are regular and left-aligned.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Tables</title>
  </head>
  <body>
    <table>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Sunny</td>
        <td>Chaudhary</td>
        <td>20</td>
      </tr>
      <tr>
        <td>Anu</td>
        <td>Chaudhary</td>
        <td>19</td>
      </tr>
    </table>
  </body>
</html>

Output

Table Attributes

1. Border Attribute

The border attribute is used to put a border across all cells.
If we do not specify a border for the table, it will be displayed without borders.
The border-color attribute is used to set the border color of the table.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Border Attribute</title>
  </head>
  <body>
    <table border = "1">
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Sunny</td>
        <td>Chaudhary</td>
        <td>20</td>
      </tr>
      <tr>
        <td>Anu</td>
        <td>Chaudhary</td>
        <td>19</td>
      </tr>
    </table>
  </body>
</html>

Output

2. Cell-padding and Cell-spacing Attributes

The Cell-padding and Cell-spacing attributes are used to adjust the whitespace in your table cells.
The Cell-spacing attribute defines space between table cells, while Cell-padding specifies the space between cell borders and cell content.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Cell-padding and Cell-spacing Attributes</title>
  </head>
  <body>
    <table border = "1" Cell-padding = "5" Cell-spacing = "5">
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Sunny</td>
        <td>Chaudhary</td>
        <td>20</td>
      </tr>
      <tr>
        <td>Anu</td>
        <td>Chaudhary</td>
        <td>19</td>
      </tr>
    </table>
  </body>
</html>

Output

3. Col-span and Row-span Attributes

The Col-span attribute defines to merge two or more columns into a single column.
The Row-span attribute defines to merge two or more rows into a single row.
Both attributes used inside the <th> tag or <td> tag.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Col-span and Row-span Attributes</title>
  </head>
  <body>
    <table border = "1">
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Category</th>
        <th>Salary</th>
      </tr>
      <tr>
        <td>James</td>
        <td>20</td>
        <td rowspan = "2">Music</td>
        <td>100000</td>
      </tr>
      <tr>
        <td>Selena</td>
        <td>28</td>
        <td>100000</td>
      </tr>
      <tr>
        <td colspan = "4">jack</td>
      </tr>
    </table>
  </body>
</html>

Output

4. Background Attribute

The bg-color attribute is used to set the background color of the table.
The background attribute is used to set the background image of a table or just for one cell.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Background Attributes</title>
  </head>
  <body>
    <table border = "1" bg-color = "skyblue" border-color = "red">
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Category</th>
        <th>Salary</th>
      </tr>
      <tr>
        <td>James</td>
        <td>20</td>
        <td rowspan = "2">Music</td>
        <td>100000</td>
      </tr>
      <tr>
        <td>Selena</td>
        <td>28</td>
        <td>100000</td>
      </tr>
      <tr>
        <td colspan = "4">jack</td>
      </tr>
    </table>
  </body>
</html>

Output

5. Background Image Attribute

The border attribute is used to specify the background-image for the document.
We have to specify a URL which specify the address of the background image.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Background Attributes</title>
  </head>
  <body>
    <table border = "1" bg-color = "skyblue" background = "./html.img">
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Category</th>
        <th>Salary</th>
      </tr>
      <tr>
        <td>James</td>
        <td>20</td>
        <td rowspan = "2">Music</td>
        <td>100000</td>
      </tr>
      <tr>
        <td>Selena</td>
        <td>28</td>
        <td>100000</td>
      </tr>
      <tr>
        <td colspan = "4">jack</td>
      </tr>
    </table>
  </body>
</html>

Output

6. Width and Height Attribute

The Width and The Height attribute is used to set the width and height of the table.
We can specify table width and height in terms of pixels, percentage, and any other units of available screen area.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Width and Height Attributes</title>
  </head>
  <body>
    <table border = "1" width = "400" height = "150">
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>James</td>
        <td>20</td>
      </tr>
      <tr>
        <td>Selena</td>
        <td>28</td>
      </tr>
    </table>
  </body>
</html>

Output

7. Caption Element

The caption tag is used to add a caption to a table.
It will be displayed at the top of the table.
The caption tag cannot be used outside the table tag.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Caption Element</title>
  </head>
  <body>
    <table border = "1">
    <caption>Table With Caption</caption>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Salary</th>
      </tr>
      <tr>
        <td>James</td>
        <td>20</td>
        <td>25000</td>
      </tr>
      <tr>
        <td>Selena</td>
        <td>28</td>
        <td>30000</td>
      </tr>
    </table>
  </body>
</html>

Output

8. Table Header, Body and Footer Element

The table can be divided into three sections :
1. Head : <thead> is used to create a separate table header.
2. Body : <tbody> is used to indicate the main body of the table.
3. Foot : <tfoot> is used to create a separate table footer.
The header and footer are rather similar to the header and footer of the HTML document, while the body is the main content of the table.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Header, Body and Footer Element</title>
  </head>
  <body>
    <table border = "1">
      <thead>
        <tr>
          <td colspan = "2">Table Header</td>
        </tr>
      </thead>
      <tbody>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>James</td>
        <td>20</td>
      </tr>
      <tr>
        <td>Selena</td>
        <td>28</td>
      </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan = "2">Table Footer</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

Output