HTML Table

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

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 Table Tags

 

 

HTML Table Example

 <!DOCTYPE>
<html>
<title>HTML Tutorials</title>
<body>
     <table>  
    <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>  
    <tr><td>Anjali</td><td>Jaiswal</td><td>60</td></tr>  
    <tr><td>Neha</td><td>Priya</td><td>80</td></tr>  
    <tr><td>Muskan</td><td>Modi</td><td>52</td></tr>  
    <tr><td>Ruchi</td><td>Sinha</td><td>94</td></tr>  
    </table>  
</body>  
</html>

 Output


 

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

 

1) HTML Border attribute

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

 <!DOCTYPE>
<html>
<title>HTML Tutorials</title>
<body>
     <table border="1">  
    <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>  
    <tr><td>Anjali</td><td>Jaiswal</td><td>60</td></tr>  
    <tr><td>Neha</td><td>Priya</td><td>80</td></tr>  
    <tr><td>Muskan</td><td>Modi</td><td>82</td></tr>  
    <tr><td>Ruchi</td><td>Sinha</td><td>72</td></tr>  
    </table>  
</body>  
</html>  


 

2) CSS Border property

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

 <!DOCTYPE>
<html>
<title>HTML Tutorials</title>
<head>
<style>  
table, th, td {  
    border: 1px solid black;  
}  
</style>  
</head>
<body>
     <table>    
    <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>  
    <tr><td>Anjali</td><td>Jaiswal</td><td>60</td></tr>  
    <tr><td>Neha</td><td>Priya</td><td>80</td></tr>  
    <tr><td>Muskan</td><td>Modi</td><td>82</td></tr>  
    <tr><td>Ruchi</td><td>Sinha</td><td>72</td></tr>  
    </table>  
</body>  
</html>  

Output


 You can collapse all the borders in one border by border-collapse property. It will collapse the border into one.
 
<!DOCTYPE>
<html>
<title>HTML Tutorials</title>
<head>
<style>  
table, th, td {  
  border: 2px solid black;  
  border-collapse: collapse;   
}  
</style>  
</head>
<body>
     <table>    
    <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>  
    <tr><td>Anjali</td><td>Jaiswal</td><td>60</td></tr>  
    <tr><td>Neha</td><td>Priya</td><td>80</td></tr>  
    <tr><td>Muskan</td><td>Modi</td><td>82</td></tr>  
    <tr><td>Ruchi</td><td>Sinha</td><td>72</td></tr>  
    </table>  
</body>  
</html>   
Output
 
 

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

  1. By cellpadding attribute of table in HTML
  2. By padding property in CSS
 
<!DOCTYPE>
<html>
<title>HTML Tutorials</title>
<head>
<style>  
table, th, td {  
    border: 1px solid black;  
    border-collapse: collapse;  
}  
th, td {
    padding: 10px;
}
</style>  
</head>
<body>
     <table>    
    <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>  
    <tr><td>Anjali</td><td>Jaiswal</td><td>60</td></tr>  
    <tr><td>Neha</td><td>Priya</td><td>80</td></tr>  
    <tr><td>Muskan</td><td>Modi</td><td>82</td></tr>  
    <tr><td>Ruchi</td><td>Sinha</td><td>72</td></tr>  
    </table>  
</body>  
</html>
   
Output
 
 
 
We can specify the HTML table width using the CSS width property. It can be specify in pixels or percentage.  
 
<!DOCTYPE>
<html>
<title>HTML Tutorials</title>
<head>
<style>  
table {    
    border-collapse: collapse;
    width: 100%;   
}  
th, td {
    border: 2px solid green;
    padding: 10px;
}
</style>  
</head>
<body>
     <table>    
    <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>  
    <tr><td>Anjali</td><td>Jaiswal</td><td>60</td></tr>  
    <tr><td>Neha</td><td>Priya</td><td>80</td></tr>  
    <tr><td>Muskan</td><td>Modi</td><td>82</td></tr>  
    <tr><td>Ruchi</td><td>Sinha</td><td>72</td></tr>  
    </table>  
</body>  
</html>   
 
Output
 
 
HTML table with caption

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

 Example

<!DOCTYPE>
<html>
<title>HTML Tutorials</title>
<head>
<style>  
table{    
    border-collapse: collapse;
    width: 100%;   
}  
th, td {
    border: 2px solid red;
    padding: 10px;
}
</style>  
</head>
<body>
     <table>
    <caption>Student Records</caption>   
    <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>  
    <tr><td>Anjali</td><td>Jaiswal</td><td>60</td></tr>  
    <tr><td>Neha</td><td>Priya</td><td>80</td></tr>  
    <tr><td>Muskan</td><td>Modi</td><td>82</td></tr>  
    <tr><td>Ruchi</td><td>Sinha</td><td>72</td></tr>  
    </table>  
</body>  
</html>  

 Output
 
 
Styling HTML table even and odd cells

CSS code:

 <!DOCTYPE>
<html>
<title>HTML Tutorials</title>
<head>
<style>  
table, th, td {  
  border: 1px solid black;  
  border-collapse: collapse;  
}  
th, td {  
  padding: 10px;  
}  
table#alter tr:nth-child(even) {  
  background-color: #d95148;  
}  
table#alter tr:nth-child(odd) {  
  background-color:#e8b658;  
}  
table#alter th {  
  color: white;  
  background-color: gray;  
}  
</style>   
</head>
<body>
     <table id="alter">
    <caption>Student Records</caption>   
    <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>  
    <tr><td>Anjali</td><td>Jaiswal</td><td>60</td></tr>  
    <tr><td>Neha</td><td>Priya</td><td>80</td></tr>  
    <tr><td>Muskan</td><td>Modi</td><td>82</td></tr>  
    <tr><td>Ruchi</td><td>Sinha</td><td>72</td></tr>  
    <tr><td>Daksh</td><td>Bhardawaj</td><td>59</td></tr>
   <tr><td>Ranjeet</td><td>Sharma</td><td>72</td></tr>
    </table>  
</body>  
</html>  

Output

 

 

<!DOCTYPE>
<html>
<title>HTML Tutorials</title>
<head>
<style>
table, th, td {
  border: 1px solid green;
  border-collapse: collapse;
}
th, td {  
  padding: 10px;  
}
</style>
</head>
<body>
     <table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Quantity Sales</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Aditya</td>
      <td>100</td>
    </tr>
    <tr>
      <td>Aman</td>
      <td>80</td>
    </tr>
    <tr>
      <td>Neha</td>
      <td>20</td>
    </tr>
    <tr>
      <td>Ruchi</td>
      <td>100</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>300</td>
    </tr>
  </tfoot>
</table>

</body>  
</html> 

Output



 
 

1 comment:

Subscribe to: Posts (Atom)