The HTML tables permit web creators to organize information like text, pictures, links, and so on into rows and columns of cells. 
The HTML tables are made utilizing the <table> tag in which the <tr> tag is utilized to make table columns ,<td> tag is utilized to make information cells and <th> tag is used to create table headers.

HTML Table Tags
  • <table>: To define a table.
  • <tr>:To define a row in a table.
  • <th> :Todefine a header in a table.
  • <td> :Todefine a cell in a table.
  • <caption>:To define a table captions.
  • <colgroup> :To specify a group of columns.
  • <col> :To specify column property in <colgroup> for each columns.
  • <tbody> :Used to group the body content in a table.
  • <thead> :Used to group the header content in a table.
  • <tfooter> :Used to group the footer content in a table.
Example: simple Html table
<!DOCTYPE html>
<html>
<body>
<h2>HTML Table</h2>
<table>
  <tr>
    <th>Company</th>
    <th>product</th> 
    <th>Amount</th>
  </tr>
  <tr>
    <td>LG</td>
    <td>TV</td>
    <td>850</td>
  </tr>
  <tr>
    <td>Samsung</td>
    <td>TV</td>
    <td>800</td>
  </tr>
  <tr>
    <td>LG </td>
    <td>Mobile</td>
    <td>1500</td>
  </tr>
<tr>
    <td>Samsung </td>
    <td>Mobile</td>
    <td>2000</td>
  </tr>

</table>

</body>
</html>
Output








HTML Table Border 
We can specify Html table border by using border attribute or by using CSS border property.
Example: 1. Specifying HTML table border by using border attribute.
<table border="1">
Output








2. Specifying HTML table border by using CSS border property. insert the following CSS script inside the <head> section.
<style>  
table, th, td {  
  border: 1px solid black;  
}  
</style>

col span and Rowspan Attributes
row span attribute is used to merge two or more rows in Html table and the Colspan attribute is also used to merge two or more columns of Html table.
Example: rowspan
<!DOCTYPE html>
<html>
<head>
 
</head>
<body>
<h2>HTML Table</h2>
<table border="1">
  <tr>
    <th>Company</th>
    <th>product</th> 
    <th>Amount</th>
  </tr>
  <tr>
    <td rowspan = "2">LG</td>
    <td>TV</td>
    <td>850</td>
  </tr>
  <tr>
    <td>Mobile</td>
    <td>1500</td>
  </tr>
  <tr>
    <td rowspan = "2">Samsung</td>
    <td>TV</td>
    <td>800</td>
  </tr>
  
<tr>
    <td>Mobile</td>
    <td>2000</td>
  </tr>

</table>

</body>
</html>
Output













Example: colspan 
<!DOCTYPE html>
<html>
<head>
 
</head>
<body>
<h2>HTML Table</h2>
<table border="1">
 
  <tr>
    <td colspan="2" style="text-align: center;">LG</td>
    <td colspan="2" style="text-align: center;">Samsung</td>
  </tr>
  <tr>
    <td>Tv</td>
    <td>Mobile</td>
    <td>Tv</td>
    <td>Mobile</td>
  </tr>
   <tr>
    <td>850</td>
    <td>1500</td>
    <td>800</td>
    <td>2000</td>
  </tr>

</table>

</body>
</html>
Output









Add Caption to Html Table
To add a caption to Html table use <caption> tag.
Example: Adding caption to HTML table
<table border="1">
  <caption>This is a caption</caption>
Output







HTML Table-color
you can specify the background color and border colors of an HTML table by using the following attributes.
  • bgcolor attribute: used to set background color for the whole table or one single cell.
  • background attribute: used to set a background image for the whole table or one single cell.
  • Bordercolor attribute: used to set a border color for HTML table.
Example
<table border="1" bgcolor="tomato" bordercolor ="blue">
Output

Example: background image
<table border="1" background="logo.png" bordercolor ="blue">
Output







HTML Table-Border collapse property
If you want to collapse all borders into one border you can use the border-collapse property.
Example
 <style>  
table, th, td {  
  border: 2px solid blue;  
  border-collapse: collapse;  
}  
</style>
Output










HTML Table height and width
you can specify the table width and height of an HTML table by using the width and height attribute.
Example 
<table border="1" bordercolor ="blue" width ="400" height ="200">
Output
Watch on You Tube