Table Tag Attributes

Data is shown in tabular form (row and column) using the HTML table tag. Several columns might be arranged in a row. Using the <table> element plus the <tr>, <td>, and <th> components, we can make a table to show data in tabular form. The tr, th, and td tags in each table describe the table row, table header, and table data, respectively. The layout of the page, including the header area, navigation bar, body text, and footer section, is controlled by HTML tables. However, it is advised to use div tags rather than tables to control the page’s layout.

HTML Table with Border

There are two ways to specify border for HTML tables.

1. By border attribute of table in HTML.
2. By border property in CSS.

<table border="1">  
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>  
<tr><td>Sumit</td><td>Shukla</td><td>90</td></tr>  
<tr><td>Yash</td><td>Bansal</td><td>81</td></tr>  
<tr><td>Utkarsh</td><td>Sharma</td><td>84</td></tr>  
<tr><td>Vikas</td><td>Sharma</td><td>87</td></tr>  
</table> 

Output :

CSS Border 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

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

HTML Table with colspan

<table style="width:100%">  
  <tr>  
  <th>Name</th>  
  <th colspan="2">Mobile No.</th>  
  </tr>  
  <tr>  
  <td>Yash Bansal</td>  
  <td>1234567890</td>  
  <td>0987654321</td>  
  </tr>  
</table> 

HTML Table with rowspan

The rowspan property may be used to extend a cell across many rows.
A cell will be split into several rows as a result. Rowspan settings will determine how many split rows there are.
Let’s look at the two-row example.

<style>  
table, th, td {  
  border: 1px solid black;  
  border-collapse: collapse;  
}  
th, td {  
  padding: 10px;  
}  
</style>   
<table>    
<tr><th>Name</th><td>Yash Bansal</td></tr>    
<tr><th rowspan="2">Mobile No.</th><td>0987654321</td></tr>    
<tr><td>1234567890</td></tr>    
</table>    

Here are the some basic table tag attribute for HTML. See you in next blog with some other amazing attributes of HTML till then keep learning with THEAX and have fun.