• Tutorial List

HTML Tables – How to create tables on HTML pages

Last updated Jul 08, 2020
How to create tables on HTML pages

What is HTML Table?

HTML Table displays data in tabular format. It is used to organize data into rows and columns.


How to create an HTML Table?

The <table> tag is used to create a table in HTML. This tag defines this is a table, and there are other tags to define the rows, columns, etc. of the table, which you have to use inside the table tag.

<tr>, <td> & <th> Table Row and Column in HTML

  • Without table row & column, you cannot insert any data into an HTML table.
  • The <tr> tag is used to add a table row in an HTML table.
  • The <td> tag is used to add a column inside an HTML table row.
  • The <th> Tag also works as a table column, but the content inside this tag is treated as a table header.
  • A table column should always be inside a table row.
  • An HTML Table can contain multiple rows, and a table row can contain multiple columns.
  • Your data, which can be text, image, list, table, etc., is should always be inside a table column.
<!DOCTYPE html>
<html>
	<body>
      
<table>
  
  <tr>
    <th>Name</th>
    <th>Email</th>
  </tr>
  
   <tr>
    <td>John Doe</td>
    <td>[email protected]</td>
  </tr>
    
   <tr>
    <td>Mark Cuban</td>
    <td>[email protected]</td>
  </tr>
      
  <tr>
    <td>Lisa J. Shaw</td>
    <td>[email protected]</td>
  </tr>
  
</table>

	</body>
</html>

When you run the above code, the table in the browser output does not look like a table. Therefore you have to add some style to it to make it look like a table.

How to add style to an HTML table?

We will use the CSS to add styles to HTML tables. Learn – what is CSS & how to use it with HTML?

CSS for adding borders to an HTML table

table,
td,th{
	border:1px solid gray;
}

Collapsing or removing double HTML table Borders

table{
	border-collapse:collapse;
}

Set full width to a table

table{
	width:100%;
}

Adding padding & making text center

td,th{
  padding:10px;
  text-align:center;
}

Applying all the above CSS into a table

<!DOCTYPE html>
<html>
  	
  <head>
    <title>HTML Table</title>
    
    <style>
      
      table{
        width:100%;
        border-collapse:collapse;
      }
      
      table,
      td,th{
        border:1px solid gray;
      }
      
      td,th{
        padding:10px;
        text-align:center;
      }
    
    </style>
  </head>
  
  <body>
    
    <table>
      <tr>
        <th>Name</th>
        <th>Email</th>
      </tr>

      <tr>
        <td>John Doe</td>
        <td>[email protected]</td>
      </tr>

      <tr>
        <td>Mark Cuban</td>
        <td>[email protected]</td>
      </tr>

      <tr>
        <td>Lisa J. Shaw</td>
        <td>[email protected]</td>
      </tr>

    </table>
    
  </body>
</html>

What is the rowspan & colspan attribute of the HTML table?

  • Rowspan
    • The HTML Rowspan attribute used to merge multiple rows into one row.
  • Colspan
    • And the HTML Colspan is the opposite of Rowspan, this attribute is used to merge multiple columns into one column

Both attributes take a number of steps. The steps mean, how many steps you want to merge. The minimum step number is 2 because 1 is self.

Rowspan Example:

<!DOCTYPE html>
<html>
  	
  <head>
    <title>HTML Table Rowspan</title>
    
    <style>
      
      table{
        width:100%;
        border-collapse:collapse;
      }
      
      table,
      td,th{
        border:1px solid gray;
      }
      
      td,th{
        padding:10px;
        text-align:center;
      }
    
    </style>
  </head>
  
  <body>
    
    <table>
      <tr>
        <th>Name</th>
        <th>Email</th>
      </tr>

      <tr>
        <td rowspan="2">John Doe</td>
        <td>[email protected]</td>
      </tr>

      <tr>
        <td>[email protected]</td>
      </tr>

      <tr>
        <td>Lisa J. Shaw</td>
        <td>[email protected]</td>
      </tr>

    </table>
    
  </body>
</html>

Colspan Example:

<!DOCTYPE html>
<html>
  	
  <head>
    <title>HTML Table Colspan</title>
    
    <style>
      
      table{
        width:100%;
        border-collapse:collapse;
      }
      
      table,
      td,th{
        border:1px solid gray;
      }
      
      td,th{
        padding:10px;
        text-align:center;
      }
    
    </style>
  </head>
  
  <body>
    
    <table>
      <tr>
        <th colspan="2">All Users</th>
      </tr>
      
      <tr>
        <th>Name</th>
        <th>Email</th>
      </tr>

      <tr>
        <td>John Doe</td>
        <td>[email protected]</td>
      </tr>

      <tr>
        <td>Mark Cuban</td>
        <td>[email protected]</td>
      </tr>

      <tr>
        <td>Lisa J. Shaw</td>
        <td>[email protected]</td>
      </tr>

    </table>
    
  </body>
</html>

HTML Table Caption

The <caption> tag is used to add the caption to a table. This tag must be inserted after the starting table tag.

Syntax:

<table>
  <caption>My Table Caption</caption>
  ...
</table>

Example:

<style>
      
  table{
    width:100%;
    border-collapse:collapse;
  }

  table,
  td,th{
    border:1px solid gray;
  }

  td,th{
    padding:10px;
    text-align:center;
  }

</style>

<table>
  
  <caption>Dummy User List</caption>
  
  <tr>
    <th>Name</th>
    <th>Email</th>
  </tr>

  <tr>
    <td>John Doe</td>
    <td>[email protected]</td>
  </tr>

  <tr>
    <td>Mark Cuban</td>
    <td>[email protected]</td>
  </tr>

  <tr>
    <td>Lisa J. Shaw</td>
    <td>[email protected]</td>
  </tr>

</table>

Moving the table caption at the bottom

Using the CSS caption-side: property you can change the side of an HTML table caption.

caption{
    caption-side:bottom;
}
<style>
  
  caption{
    caption-side:bottom;
  }
      
  table{
    width:100%;
    border-collapse:collapse;
  }

  table,
  td,th{
    border:1px solid gray;
  }

  td,th{
    padding:10px;
    text-align:center;
  }

</style>

<table>
  
  <caption>Dummy User List</caption>
  
  <tr>
    <th>Name</th>
    <th>Email</th>
  </tr>

  <tr>
    <td>John Doe</td>
    <td>[email protected]</td>
  </tr>

  <tr>
    <td>Mark Cuban</td>
    <td>[email protected]</td>
  </tr>

  <tr>
    <td>Lisa J. Shaw</td>
    <td>[email protected]</td>
  </tr>

</table>

Ask Questions

Your email address will not be published. Required fields are marked *