HTML Tables

HTML Table tag are used to display the data in tabular form(Row column wise). Table can have multiple rows and columns

We can create a table to display data in tabular form, using <table> element, with the help of <tr>,<td> and <th> elements.

In each table, table row is defined by <tr> tag, table header is defined by <th>, and table data is defined by <td> tags.

HTML tables are used to manage the layout of the page. But it is recommended to use div tag over table to manage the layout of the page.

HTML Table Tags:

<table> - It defines the table.

<tr> - It defines a row in a table.

<th> - It defines a header cell in a table.

<td> - It defines a cell in a table.

<caption> - It defines the table caption.

<colgroup> - It specifies a group of one or more columns in a table for formatting.

<col> - It is used to group the body content in a table.

<tbody> - It is used to group the body content in a table.

<thead> - It is used to group the header content in a table.

<tfoot> - It is used to group the footer content in a table.

HTML Table Example
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th>Mobile</th>
</tr>
<tr>
<td>Rajendra</td>
<td>rajendra@gmail.com</td>
<td>010101010</td>
</tr>
<tr>
<td>Samara</td>
<td>samara@gmail.com</td>
<td>0202020202</td>
</tr>
<tr>
<td>Sanaya</td>
<td>sanaya@gmail.com</td>
<td>0303030303</td>
</tr>
</table>

This table have 4 <tr> and each <tr> have 3 <td>, so 4*3=12 table have 12 cells.

HTML Table with Border:

You can use border attribute of table tag in HTML to specify the border. Using attribute table border is not recommended now, instead you can give the border using css.

HTML Table Example
<table border="1">
<tr>
<th>Name</th>
<th>Email</th>
<th>Mobile</th>
</tr>
<tr>
<td>Rajendra</td>
<td>rajendra@gmail.com</td>
<td>010101010</td>
</tr>
<tr>
<td>Samara</td>
<td>samara@gmail.com</td>
<td>0202020202</td>
</tr>
<tr>
<td>Sanaya</td>
<td>sanaya@gmail.com</td>
<td>0303030303</td>
</tr>
</table>

HTML Table Border using CSS:

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

HTML Table Cell padding:

You can specify padding for table using css padding.

<style>
th,td{
padding:10px;
}
</style>

HTML Table width:

We can give the HTML table width using the CSS width property. It can be in percentage or pixel. We can adjust our table as per our requirement. Following is the example of display table with width.

<style>
table{
width:100%;
}
</style>

HTML Table with colspan

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

It will divide one cell/row into multiple column, and the number of columns depend on the value of colspan attribute.

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

Here, the mobile No.<th> have colspan 2, it will combine the 2 columns in to one.

HTML Table with Rowsapn:

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

It will divide a cell into multiple rows. The number of divided row will depend on rowspan values.

<table style="width:100%">  
  <tr>  
  <th>Name</th>  
  <th rowspan="2">Mobile No.</th>  
  </tr>  
  <tr>  
  <td>Rajendra</td>  
  <td>7066055251</td>  
  <td>0101010302</td>  
  </tr>  
</table>