HTML <table> Tag

HTML <table> Tag is used to display data in tabular form (row*column). A row can have multiple columns and rows.

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

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

HTML tables are used to manage the layout of the page e.g. Header section, navigation bar, body content, footer section, etc. But it is recommended to use div tags on tables to manage the layout of the page.

HTML Table Tags

  • table
  • tr
  • th
  • td
  • caption
  • colgroup
  • col
  • tbody
  • theader
  • tfooter

We will see a few examples of HTML Table Tags below:-

A simple HTML table, containing two columns and two rows:

Example:-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        HTML table Tag
    </title>
</head>
 
<body>
<h1 style="margin-bottom: 50px; ">This is HTML table tag Example</h1>    
   <table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
</body>
</html>

Output:-

How to add collapsed borders to a table (with CSS):

Example:-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        HTML table Tag
    </title>
</head>
 <style>
 .main table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
<body>
<h1 style="margin-bottom: 50px; ">This is HTML table tag Example</h1>    
 <div class="main">
    <table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$70</td>
  </tr>
   <tr>
    <td>February</td>
    <td>$40</td>
  </tr>
</table>
 </div>
</body>
</html>

Output:-

How to right-align a table (with Inline CSS):

Example:-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        HTML table Tag
    </title>
</head>
 <style>
 .main table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
<body>
<h1 style="margin-bottom: 50px; ">This is HTML table tag Example</h1>    
 <div class="main">
  <table style="float:right;">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>
<p>This is some text to be wrapped around the table. This is some text to be wrapped around the table. This is some text to be wrapped around the table.</p>
 </div>
</body>
</html>

Output:-

How to center-align a table (with CSS):

Example:-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        HTML table Tag
    </title>
</head>
 <style>
 .main table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
table.mytable{
      margin-left: auto;
  margin-right: auto;
}
</style>
<body>
<h1 style="margin-bottom: 50px; ">This is HTML table tag Example</h1>    
 <div class="main">
<p>How to center-align a table</p>
  <table class="mytable">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>
 
 </div>
</body>
</html>

Output:-

How to add background-color to a table (with CSS):

Example:-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        HTML table Tag
    </title>
</head>
 <style>
 .main table, th, td {
  border: 1px solid black; 
}
 
</style>
<body>
<h1 style="margin-bottom: 50px; ">This is HTML table tag Example</h1>    
 <div class="main">
  <table style="background-color:#00FF00">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>
 
 </div>
</body>
</html>

Output:-

How to add padding to a table (with CSS):

Example:-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        HTML table Tag
    </title>
</head>
 <style>
 .main table, th, td {
  border: 1px solid black; 
}
.main th, td {
  padding: 10px;
}
 </style>
<body>
<h1 style="margin-bottom: 50px; ">This is HTML table tag Example</h1>    
 <div class="main">
  <table style="background-color:#00FF00">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>
 </div>
</body>
</html>

Output:-

How to set table width (with CSS):

Example:-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        HTML table Tag
    </title>
</head>
 <style>
 .main table, th, td {
  border: 1px solid black; 
}
.main th, td {
  padding: 10px;
}
 </style>
<body>
<h1 style="margin-bottom: 50px; ">This is HTML table tag Example</h1>    
 <div class="main">
  <table style="background-color:#00FF00;width: 300px;">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>
 
 </div>
</body>
</html>

Output:-

How to create table Horizontal headers:

Example:-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        HTML table Tag
    </title>
</head>
 <style>
 .main table, th, td {
  border: 1px solid black; 
}
.main th, td {
  padding: 10px;
}
 </style>
<body>
<h1 style="margin-bottom: 50px; ">This is HTML table tag Example</h1>    
 <div class="main">
   <p><b>Horizontal headers:</b></p>
<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Phone</th>    
  </tr>
  <tr>
    <td>John Doe</td>
    <td>john.doe@example.com</td>    
    <td>123-45-678</td>
  </tr>
</table> 
 </div>
</body>
</html>

Output:-

How to create table Vertical headers:

Example:-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        HTML table Tag
    </title>
</head>
 <style>
 .main table, th, td {
  border: 1px solid black; 
}
.main th, td {
  padding: 10px;
}
 </style>
<body>
<h1 style="margin-bottom: 50px; ">This is HTML table tag Example</h1>    
 <div class="main"> 
<p><b>Vertical headers:</b></p>
<table>
  <tr>
    <th>Name:</th>
    <td>John Doe</td>
  </tr>
  <tr>
    <th>Email:</th>  
    <td>john.doe@example.com</td>      
  </tr>  
  <tr>
    <th>Phone:</th>
    <td>123-45-678</td>
  </tr>
</table>
 </div>
</body>
</html>

Output:-

How to create a table with a caption:

Example:-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        HTML table Tag
    </title>
</head>
 <style>
 .main table, th, td {
  border: 1px solid black; 
}
.main th, td {
  padding: 10px;
}
 </style>
<body>
<h1 style="margin-bottom: 50px; ">This is HTML table tag Example</h1>    
 <div class="main"> 
<table>
    <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table> 
 </div>
</body>
</html>

Output:-

How to define table cells that span more than one row or one column:

Example:-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        HTML table Tag
    </title>
</head>
 <style>
 .main table, th, td {
  border: 1px solid black; 
}
.main th, td {
  padding: 10px;
}
 </style>
<body>
<h1 style="margin-bottom: 50px; ">This is HTML table tag Example</h1>    
 <div class="main"> 
 
 
<h1>Colspan and rowspan</h1>

<h3>Cell that spans two columns:</h3>
<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th colspan="2">Phone</th>    
  </tr>
  <tr>
    <td>John Doe</td>
    <td>john.doe@example.com</td>    
    <td>123-45-678</td>
    <td>212-00-546</td>    
  </tr>
</table>

<h3>Cell that spans two rows:</h3>
<table>
  <tr>
    <th>Name:</th>
    <td>John Doe</td>
  </tr>
  <tr>
    <th>Email:</th>  
    <td>john.doe@example.com</td>      
  </tr>  
  <tr>
    <th rowspan="2">Phone:</th>
    <td>123-45-678</td>
  </tr>
  <tr>
    <td>212-00-546</td>
  </tr>
</table>
 </div>
</body>
</html>

Output:-


,

Related Posts

How to Implement a Filterable Content
CSS HTML JAVASCRIPT

How to Implement a Filterable Content Grid Using Isotope.js: Step-by-Step Guide

Khushal
simple tabs
BLOG CSS HTML JAVASCRIPT

How to Create and Implement Simple Tabs Using HTML, CSS, and JavaScript.

Khushal

Leave a Reply

Your email address will not be published. Required fields are marked *