HTML5 Tutorial - HTML Tables

HTML Table

HTML tables allow arranging the data like text, images, links, videos and other table in rows and columns of cells.

Create HTML Table

HTML table is created using <table> tag. <tr> is used to create rows and <td> tag is used to create data cells. <tr> is used inside the <table> tags and <td> tag is used inside <tr> tags. Below is the example where you can find how to create a table on HTML document.

Example - 1

<table>
 <thead>
 <tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Date of Birth</th>
 </tr>
 </thead>
 <tr>
  <td>Aayush</td>
  <td>Vishwakarma</td>
  <td>24 Nov 2007</td>
 </tr>
 <tr>
  <td>Aaditi</td>
  <td>Vishwakarma</td>
  <td>21 Jun 2009</td>
 </tr>
 <tr>
  <td>Chandan</td>
  <td>Vishwakarma</td>
  <td>7 Aug 2000</td>
 </tr>
</table>

Below is the list of the tags which is used along with <table> tag.

Tags	Description
<table>	This element is used to define table on a web page. All other tags mentioned below are used inside the <table> tag.
<th>	Defines the table heading cell which is on the top of the table
<tr>	Defines row in the table
<td>	Defines data cells in the table where text, image and other content is placed
<caption>	Define the table caption
<colgroup>	Specifies a group of one or more columns in a table for formatting
<col>	Specifies column properties for each column within a <colgroup> element
<thead>	Groups the table heading
<tbody>	Groups the body content in a table
<tfoot>	Groups the footer content in a table

Above is an example (Example - 1) of normal HTML table. Below is the example of an HTML table that content table header <thead>, table body <tbody> and table footer <tfoot> tags. You can find in this example how can be nested all the tags in an HTML table.

Example - 2

<style>
 table,th, tr, td{
  border-collapse: collapse;
  padding:10px;
  border: 1px solid #212121;
  text-align:center;
 }
 thead{
  background:#CCCCCC;
 }
 tbody{
  background:#41A070;
 }
 tfoot{
  background:gray;
  font-weight:bold;
  color:#FFFFFF;
 }
</style>

       <table>
  <thead>
  <tr>
   <th>Subject</th>
   <th>Total Marks</th>
   <th>Obtained Marks</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
   <td>Count of Subject - 3</td>
   <td>300</td>
   <td>252</td>
  </tr>
  </tfoot>
  <tbody>
  <tr>
   <td>English</td>
   <td>100</td>
   <td>75</td>
  </tr>
  <tr>
   <td>Hindi</td>
   <td>100</td>
   <td>86</td>
  </tr>
  <tr>
   <td>Math</td>
   <td>100</td>
   <td>91</td>
  </tr>
  </tbody>
 </table>

Tips: HTML Tables can be styled with CSS like CSS table boder

In above example you can also see that <tfoot> is defined above from <tbody> but when the table rendered on web page then content inside <tfoot> is displayed below the table body. This means that table head, body and foot is predetermined to display in the correct sequence. It helps to create tables with sum or counting groups.

Table Caption

Table captions can be used to summarize the table in one word or sentence. Caption is defined in HTML table with <caption> tag. It must be used just after the <table> tags. By default caption is center aligned on the top of the table but it center be styled with CSS text-align and caption-side properties.

Example - 3

<table>
<caption>List of Students with Date of Birth</caption>
<thead>
  <tr>
 <th>First Name</th>
 <th>LaZt Name</th>
 <th>Date of Birth</th>
  </tr>
</thead>
  <tr>
 <td>Aayush</td>
 <td>Vishwakarma</td>
 <td>24 Nov 2007</td>
  </tr>
  <tr>
 <td>Aaditi</td>
 <td>Vishwakarma</td>
 <td>21 Jun 2009</td>
  </tr>
  <tr>
 <td>Chandan</td>
 <td>Vishwakarma</td>
 <td>7 Aug 2000</td>
  </tr>
</table>

Table Colgroup

A group of one or more column in a table can be formatted by <colgroup> tag. It is very useful for styling entire column in single line instead of repeating style of each cell in a table row separately. Below is the example of <colgroup>.

Example - 4

<table>
  <caption>List of Students with Date of Birth</caption>
  <colgroup>
   <col span = "2" style = "background:#41A070;">
   <col span = "1" style = "background:gray;">
  </colgroup>
  <thead>
  <tr>
   <th>First Name</th>
   <th>Last Name</th>
   <th>Date of Birth</th>
  </tr>
  </thead>
  <tr>
   <td>Aayush</td>
   <td>Vishwakarma</td>
   <td>24 Nov 2007</td>
  </tr>
  <tr>
   <td>Aaditi</td>
   <td>Vishwakarma</td>
   <td>21 Jun 2009</td>
  </tr>
  <tr>
   <td>Chandan</td>
   <td>Vishwakarma</td>
   <td>7 Aug 2000</td>
  </tr>
 </table>

Cellspacing and Cellpadding

Cellspacing is the attribute to define space between table cells. Cellpadding defines the padding of cells. Find the below example to know more.

Example - 5

<table cellpadding = "5" cellspacing = "5" border = "5">
<thead>
 <tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Date of Birth</th>
 </tr>
</thead>
  <tr>
  <td>Aayush</td>
  <td>Vishwakarma</td>
  <td>24 Nov 2007</td>
 </tr>
 <tr>
  <td>Aaditi</td>
  <td>Vishwakarma</td>
  <td>21 Jun 2009</td>
 </tr>
 <tr>
  <td>Chandan</td>
  <td>Vishwakarma</td>
  <td>7 Aug 2000</td>
 </tr>
</table>

In above example change the values of cellspacing, cellpadding and border then see what happens. Cellspacing and Cellpadding attributes won’t work while using CSS border collapse property.

Colspan and Rowspan

Table cells can be span one or more columns by specifying colspan attribute and table cells can be span by one or more rows by specifying rowspan attribute. See in the below example.

Example - 6

<table>
<thead>
 <tr>
  <th>First Name</th>
  <th colspan = "2" id = "col">Phone No.</th>
  <th>Last Name</th>
 </tr>
</thead>
  <tr>
   <td >Aayush</td>
   <td >3456789</td>
   <td >9764567</td>
   <td rowspan = "3" id = "row">Vishwakarma</td>
  </tr>
  <tr>
   <td>Chandan</td>
   <td >9656787</td>
   <td >2443557</td>
  </tr>
  <tr>
   <td>Aaditi </td>
   <td >3454322</td>
   <td >7655463</td>
  </tr>
  
</table>

Special CSS Styling of Table

Sometime we have to create many rows in the table and we need to format in a certain way. To do that instead writing too many CSS there is very simple CSS method to stylize the table rows in fashionable manner. Below is example.

Example - 7

<style>
 tbody tr:nth-child(even){
 background-color:#41A070;
 }
 tbody tr:nth-child(odd){
 background-color:#CCCCCC;
 }
 tfoot{
 font-weight:bold;
 }
</style>

<table>
  <thead>
  <tr>
   <th>Subject</th>
   <th>Total Marks</th>
   <th>Obtained Marks</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
   <td>Count of Subject - 3</td>
   <td>500</td>
   <td>416</td>
  </tr>
  </tfoot>
  <tbody>
  <tr>
   <td>English</td>
   <td>100</td>
   <td>75</td>
  </tr>
  <tr>
   <td>Hindi</td>
   <td>100</td>
   <td>86</td>
  </tr>
  <tr>
   <td>Math</td>
   <td>100</td>
   <td>91</td>
  </tr>
  <tr>
   <td>Science</td>
   <td>100</td>
   <td>89</td>
  </tr>
  <tr>
   <td>Economics</td>
   <td>100</td>
   <td>75</td>
  </tr>
  </tbody>
</table>

Related Topics