HTML tables allow arranging the data like text, images, links, videos and other table in rows and columns of cells. HTML table is created using tag. is used to create rows and is used inside the
tag is used to create data cells.
tags and tags. Html table Css table Html table border Html5 table Css table border Tables Html table generator

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.

tag is used inside
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>

HTML5 Tutorial - HTML Tables

Related Topics

progrramers-logo

progrramers

Hello friends! Progrramers is a tutorial site of w3 programming. If you like this tutorial site please encourages us by sharing this site links with your friends and nears & dears who want to learn web development and give us like on our Facebook page. If have any question please type in to comment box or send us message on social media sites via below given social links. Thank you, have a nice learning.

Post A Comment:

0 comments: