HTML Table

HTML table tag is used to display data in tabular form (row * column). There can be many columns in a row.

HTML tables are used to manage the layout of the page e.g. header section, navigation bar, body content, footer section etc. But it is recommended to use div tag over table to manage the layout of the page .

HTML Table Tags

HTML Table Example

Example of HTML table tag. It output is shown above.

<table> 
<tr><th>Name</th><th>Marks</th></tr> 
<tr><td>Sania</td><td>60</td></tr> 
<tr><td>Shiya</td><td>80</td></tr> 
<tr><td>Shivani</td><td>82</td></tr> 
<tr><td>Suhail</td><td>72</td></tr> 
</table> 

Output:

HTML Table with BorderIn the above html table, there are 5 rows and 2 columns = 5 * 2 = 10 values.

There are two ways to specify border for HTML tables.

• By border attribute of table in HTML
• By border property in CSS

HTML Border attribute

You can use border attribute of table tag in HTML to specify border. But it is not recommended now.

<table border="1"> 
<tr><th>Name</th><th>Marks</th></tr> 
<tr><td>Sania</td><td>60</td></tr> 
<tr><td>Shiya</td><td>80</td></tr> 
<tr><td>Shivani</td><td>82</td></tr> 
<tr><td>Suhail</td><td>72</td></tr> 
</table> 

Output:

CSS Border property

It is now recommended to use border property of CSS to specify border in table.

<style> 
table, th, td { 
   border: 1px solid black; 
} 
</style> 

You can collapse all the borders in one border by border-collapse property.

<style> 
table, th, td { 
   border: 2px solid black; 
   border-collapse: collapse; 
} 
</style> 

HTML Table with cell padding

You can specify padding for table header and table data by two ways:

• By cellpadding attribute of table in HTML
• By padding property in CSS

The cellpadding attribute of HTML table tag is obselete now. It is recommended to use CSS. So let's see the code of CSS.

<style> 
table, th, td { 
   border: 1px solid pink; 
   border-collapse: collapse; 
} 
th, td { 
   padding: 10px; 
} 
</style> 

Output:

HTML Table with colspan

If you want to make a cell span more than one column, you can use the colspan attribute.

Example that span two columns.

CSS code:

<style> 
table, th, td { 
   border: 1px solid black; 
   border-collapse: collapse; 
} 
th, td { 
   padding: 5px; 
} 
</style> 

HTML code:

<table style="width:100%"> 
  <tr> 
   <th>Name</th> 
   <th colspan="2">Mobile No.</th> 
  </tr> 
  <tr> 
   <td>Shiya</td> 
   <td>9874563210</td> 
   <td>9874563210</td> 
  </tr> 
</table> 

Output:

HTML Table with rowspan

If you want to make a cell span more than one row, you can use the rowspan attribute.

Example that span two rows.

CSS code:

<style> 
table, th, td { 
   border: 1px solid black; 
   border-collapse: collapse; 
} 
th, td { 
   padding: 10px; 
} 
</style> 

HTML code:

<table>  
<tr><th>Name</th><td>Shivani</td></tr>  
<tr><th rowspan="2">Mobile No.</th><td>9874563210</td></tr>  
<tr><td>9874563210</td></tr>  
</table>  

Output:

HTML table with caption

HTML caption is diplayed above the table. It must be used after table tag only.

<table>  
<caption>Student Records</caption>
<tr><th>Name</th><th>Marks</th></tr>  
<tr><td>Sania</td><td>60</td></tr>  
<tr><td>Shiya</td><td>80</td></tr>  
<tr><td>Shivani</td><td>82</td></tr>  
<tr><td>Suhail</td><td>72</td></tr>  
</table>  

Styling HTML table even and odd cells

CSS code:

<style> 
table, th, td { 
   border: 1px solid black; 
   border-collapse: collapse; 
} 
th, td { 
   padding: 10px; 
} 
table#alter tr:nth-child(even) { 
   background-color: #eee; 
} 
table#alter tr:nth-child(odd) { 
   background-color: #fff; 
} 
table#alter th { 
   color: white; 
   background-color: gray; 
} 
</style> 

Output: