programminghead Logo

HTML Table Examples - 20+ Table Examples with Results

As you know Today's Topic is "HTML Table Examples". Where we are going to Focus on Examples only. So Scroll down and Know about HTML Table From Scratch (Stytax) with Examples and Brief Introduction.

HTML Table Syntax :

In HTML, we have Sytax for every HTML Elements. Which Define some rules about how we can write and Define Tables inside HTML Document.

Table Syntax - HTML Table Example 1 :


<table>
  <tr>
   <td>My Data 1</td>
   <td>My Data 2</td>
   <td>My Data 3</td>
  </tr>
</table>

Results

My Data 1 My Data 2 My Data 3

HTML Table Examples Image

Table Header - HTML Table Example 2 :


 <table>
  <tr>
   <th>My Header</th>
   <td>My Data</td>
  </tr>
 </table>

Results

My Header My Data

Because of my Gray background i have to change Table border Black to White.

Table with border - HTML Table Example 3 :


<html>
 <head>
  <style>
   table{
   border:1px solid black;
   }
  </style>
 </head>
<body>

 <table>
  <tr>
   <th>My Header</th>
   <td>My Data</td>
  </tr>
 </table>
 
 </body>
</html>

Results

My Header My Data

Because of my Gray background i have to change Table border Black to White.

Table Header and Table Data with border - HTML Table Example 4 :


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

 <table>
  <tr>
   <th>My Header</th>
   <td>My Data</td>
  </tr>
 </table>
 
 </body>
</html>

Results

My Header My Data

Because of my Gray background i have to change Table border Black to White.

Table and Table Data with border - HTML Table Example 5 :


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

 <table>
  <tr>
   <th>My Header</th>
   <td>My Data</td>
  </tr>
 </table>
 
 </body>
</html>

Results

My Header My Data

Because of my Gray background i have to change Table border Black to White.

Table with collaped Borders - HTML Table Example 6 :


<html>
 <head>
  <style>
   table,table td{
   border:1px solid black;
   border-collapse:collapse;
   }
  </style>
 </head>
<body>

 <table>
  <tr>
   <th>My Header</th>
   <td>My Data</td>
  </tr>
 </table>
 
 </body>
</html>

Results

My Header My Data

Because of my Gray background i have to change Table border Black to White.

Multiple Table Rows - HTML Table Example 7 :


<html>
 <head>
  <style>
   table,table td{
   border:1px solid black;
   border-collapse:collapse;
   }
  </style>
 </head>
<body>

<table>
  <tr>
   <th>Data</th>
  </tr>
  <tr>
   <td>1st Row Data</td>
  </tr>
  <tr>
   <td>2nd Row Data</td>
  </tr>
</table>

 </body>
</html>

Results

Data
1st Row Data
2st Row Data

Because of my Gray background i have to change Table border Black to White.

Multiple Table Columns - HTML Table Example 8 :


<html>
 <head>
  <style>
   table,table td{
   border:1px solid black;
   border-collapse:collapse;
   }
  </style>
 </head>
<body>

<table>
  <tr>
   <th>Data 1</th>
   <th>Data 2</th>
   <th>Data 3</th>
  </tr>
</table>

 </body>
</html>

Results

Data 1 Data 2 Data 3

Because of my Gray background i have to change Table border Black to White.

Multiple Table Rows and Columns - HTML Table Example 9:


<html>
 <head>
  <style>
   table,table td{
   border:1px solid black;
   border-collapse:collapse;
   }
  </style>
 </head>
<body>

<table>
  <tr>
   <th>Data 1</th>
   <th>Data 2</th>
  </tr>
  <tr>
   <td>1st Row Data1</td>
   <td>1st Row Data2</td>
  </tr>
  <tr>
   <td>2nd Row Data1</td>
   <td>2nd Row Data2</td>
  </tr>
</table>

</body>
</html>

Results

Data 1 Data 2
1st Row Data1 1st Row Data2
2st Row Data1 2st Row Data2

Because of my Gray background i have to change Table border Black to White.

Table with Background Color - HTML Table Example 10:


<html>
 <head>
  <style>
   table{
   background-color:red;
   }
   table,table td{
   border:1px solid black;
   border-collapse:collapse;
   }
  </style>
 </head>
<body>

<table>
  <tr>
   <th>Day</th>
   <th>Humidity</th>
  </tr>
  <tr>
   <td>Monday</td>
   <td>80%</td>
  </tr>
  <tr>
   <td>Tuesday</td>
   <td>90%</td>
  </tr>
  <tr>
   <td>Wednesday,</td>
   <td>85%</td>
  </tr>
  <tr>
   <td>Thursday</td>
   <td>80%</td>
  </tr>
  <tr>
   <td>Friday</td>
   <td>30%</td>
  </tr>
  <tr>
   <td>Saturday</td>
   <td>50%</td>
  </tr>
  <tr>
   <td>Sunday</td>
   <td>50%</td>
  </tr>
</table>

</body>
</html>

Results

Day Humidity
Monday 80%
Tuesday 90%
Wednesday, 85%
Thursday 80%
Friday 30%
Saturday 50%
Sunday 50%

Because of my Gray background i have to change Table border Black to White.

Table Header with Background Color - HTML Table Example 11:


<html>
 <head>
  <style>
   th{
   background-color:red;
   }
   table,table td{
   border:1px solid black;
   border-collapse:collapse;
   }
  </style>
 </head>
<body>

<table>
  <tr>
   <th>Day</th>
   <th>Humidity</th>
  </tr>
  <tr>
   <td>Monday</td>
   <td>80%</td>
  </tr>
  <tr>
   <td>Tuesday</td>
   <td>90%</td>
  </tr>
  <tr>
   <td>Wednesday,</td>
   <td>85%</td>
  </tr>
  <tr>
   <td>Thursday</td>
   <td>80%</td>
  </tr>
  <tr>
   <td>Friday</td>
   <td>30%</td>
  </tr>
  <tr>
   <td>Saturday</td>
   <td>50%</td>
  </tr>
  <tr>
   <td>Sunday</td>
   <td>50%</td>
  </tr>
</table>

</body>
</html>

Results

Day Humidity
Monday 80%
Tuesday 90%
Wednesday, 85%
Thursday 80%
Friday 30%
Saturday 50%
Sunday 50%

Because of my Gray background i have to change Table border Black to White.

Table Columns with Background Color - HTML Table Example 12:


<html>
 <head>
  <style>
   td{
   background-color:red;
   }
   table,table td{
   border:1px solid black;
   border-collapse:collapse;
   }
  </style>
 </head>
<body>

<table>
  <tr>
   <th>Day</th>
   <th>Humidity</th>
  </tr>
  <tr>
   <td>Monday</td>
   <td>80%</td>
  </tr>
  <tr>
   <td>Tuesday</td>
   <td>90%</td>
  </tr>
  <tr>
   <td>Wednesday,</td>
   <td>85%</td>
  </tr>
  <tr>
   <td>Thursday</td>
   <td>80%</td>
  </tr>
  <tr>
   <td>Friday</td>
   <td>30%</td>
  </tr>
  <tr>
   <td>Saturday</td>
   <td>50%</td>
  </tr>
  <tr>
   <td>Sunday</td>
   <td>50%</td>
  </tr>
</table>

</body>
</html>

Results

Day Humidity
Monday 80%
Tuesday 90%
Wednesday, 85%
Thursday 80%
Friday 30%
Saturday 50%
Sunday 50%

Because of my Gray background i have to change Table border Black to White.

Table Odd Even Rows with Background - HTML Table Example 13:


<html>
 <head>
  <style>
   tr:nth-child(even){
   background-color:red;
   }
   tr:nth-child(odd){
   background-color:green;
   }
   table,table td{
   border:1px solid black;
   border-collapse:collapse;
   }
  </style>
 </head>
<body>

<table>
  <tr>
   <th>Day</th>
   <th>Humidity</th>
  </tr>
  <tr>
   <td>Monday</td>
   <td>80%</td>
  </tr>
  <tr>
   <td>Tuesday</td>
   <td>90%</td>
  </tr>
  <tr>
   <td>Wednesday,</td>
   <td>85%</td>
  </tr>
  <tr>
   <td>Thursday</td>
   <td>80%</td>
  </tr>
  <tr>
   <td>Friday</td>
   <td>30%</td>
  </tr>
  <tr>
   <td>Saturday</td>
   <td>50%</td>
  </tr>
  <tr>
   <td>Sunday</td>
   <td>50%</td>
  </tr>
</table>

</body>
</html>

Results

Day Humidity
Monday 80%
Tuesday 90%
Wednesday, 85%
Thursday 80%
Friday 30%
Saturday 50%
Sunday 50%

Because of my Gray background i have to change Table border Black to White.

Particular Table Rows with Background - HTML Table Example 14:


<html>
 <head>
  <style>
   tr:nth-of-type(3){
   background-color:green;
   }
   table,table td{
   border:1px solid black;
   border-collapse:collapse;
   }
  </style>
 </head>
<body>

<table>
  <tr>
   <th>Day</th>
   <th>Humidity</th>
  </tr>
  <tr>
   <td>Monday</td>
   <td>80%</td>
  </tr>
  <tr>
   <td>Tuesday</td>
   <td>90%</td>
  </tr>
  <tr>
   <td>Wednesday,</td>
   <td>85%</td>
  </tr>
  <tr>
   <td>Thursday</td>
   <td>80%</td>
  </tr>
  <tr>
   <td>Friday</td>
   <td>30%</td>
  </tr>
  <tr>
   <td>Saturday</td>
   <td>50%</td>
  </tr>
  <tr>
   <td>Sunday</td>
   <td>50%</td>
  </tr>
</table>

</body>
</html>

Results

Day Humidity
Monday 80%
Tuesday 90%
Wednesday, 85%
Thursday 80%
Friday 30%
Saturday 50%
Sunday 50%

Because of my Gray background i have to change Table border Black to White.

Set Background Color for Every Table Rows after the Particular Row - HTML Table Example 15:


<html>
 <head>
  <style>
   tr:nth-of-type(0n+2){
   background-color:green;
   }
   table,table td{
   border:1px solid black;
   border-collapse:collapse;
   }
  </style>
 </head>
<body>

<table>
  <tr>
   <th>Day</th>
   <th>Humidity</th>
  </tr>
  <tr>
   <td>Monday</td>
   <td>80%</td>
  </tr>
  <tr>
   <td>Tuesday</td>
   <td>90%</td>
  </tr>
  <tr>
   <td>Wednesday,</td>
   <td>85%</td>
  </tr>
  <tr>
   <td>Thursday</td>
   <td>80%</td>
  </tr>
  <tr>
   <td>Friday</td>
   <td>30%</td>
  </tr>
  <tr>
   <td>Saturday</td>
   <td>50%</td>
  </tr>
  <tr>
   <td>Sunday</td>
   <td>50%</td>
  </tr>
</table>

</body>
</html>

Results

Day Humidity
Monday 80%
Tuesday 90%
Wednesday, 85%
Thursday 80%
Friday 30%
Saturday 50%
Sunday 50%

Because of my Gray background i have to change Table border Black to White.

Checkered table rows and columns - HTML Table Example 16:


<html>
 <head>
  <style>
tr:nth-child(odd)>td:nth-child(odd){
background:red;
}
tr:nth-child(even)>td:nth-child(even){
background:red;
}
tr:nth-child(odd)>td:nth-child(even){
background:blue;
}
tr:nth-child(even)>td:nth-child(odd){
background:blue;
}
table,td,th{
border:1px solid black;
border-collapse:collapse;
}
  </style>
 </head>
<body>

<table>
  <tr>
   <th>Day</th>
   <th>Humidity</th>
   <th>Location</th>
   <th>GMT</th>
  </tr>
  <tr>
   <td>Monday</td>
   <td>80%</td>
   <td>US</td>
   <td>UTC/GMT-4</td>
  </tr>
  <tr>
   <td>Tuesday</td>
   <td>90%</td>
   <td>US</td>
   <td>UTC/GMT-4</td>
  </tr>
  <tr>
   <td>Wednesday,</td>
   <td>85%</td>
   <td>US</td>
   <td>UTC/GMT-4</td>
  </tr>
  <tr>
   <td>Thursday</td>
   <td>80%</td>
   <td>US</td>
   <td>UTC/GMT-4</td>
  </tr>
  <tr>
   <td>Friday</td>
   <td>30%</td>
   <td>US</td>
   <td>UTC/GMT-4</td>
  </tr>
  <tr>
   <td>Saturday</td>
   <td>50%</td>
   <td>US</td>
   <td>UTC/GMT-4</td>
  </tr>
  <tr>
   <td>Sunday</td>
   <td>50%</td>
   <td>US</td>
   <td>UTC/GMT-4</td>
  </tr>
</table>

</body>
</html>

Results

Day Humidity Location GMT
Monday 80% US UTC/GMT-4
Tuesday 90% US UTC/GMT-4
Wednesday, 85% US UTC/GMT-4
Thursday 80% US UTC/GMT-4
Friday 30% US UTC/GMT-4
Saturday 50% US UTC/GMT-4
Sunday 50% US UTC/GMT-4

Because of my Gray background i have to change Table border Black to White.

HTML Table Padding - HTML Table Example 17:


<html>
 <head>
  <style>
 table,td,th{
  padding:6px;
  border:1px solid black;
  border-collapse:collapse;
 }
  </style>
 </head>
<body>

<table>
  <tr>
   <th>Day</th>
   <th>Humidity</th>
   <th>Location</th>
   <th>GMT</th>
  </tr>
  <tr>
   <td>Monday</td>
   <td>80%</td>
   <td>US</td>
   <td>UTC/GMT-4</td>
  </tr>
  <tr>
   <td>Tuesday</td>
   <td>90%</td>
   <td>US</td>
   <td>UTC/GMT-4</td>
  </tr>
  <tr>
   <td>Wednesday,</td>
   <td>85%</td>
   <td>US</td>
   <td>UTC/GMT-4</td>
  </tr>
  <tr>
   <td>Thursday</td>
   <td>80%</td>
   <td>US</td>
   <td>UTC/GMT-4</td>
  </tr>
  <tr>
   <td>Friday</td>
   <td>30%</td>
   <td>US</td>
   <td>UTC/GMT-4</td>
  </tr>
  <tr>
   <td>Saturday</td>
   <td>50%</td>
   <td>US</td>
   <td>UTC/GMT-4</td>
  </tr>
  <tr>
   <td>Sunday</td>
   <td>50%</td>
   <td>US</td>
   <td>UTC/GMT-4</td>
  </tr>
</table>

</body>
</html>

Results

Day Humidity Location GMT
Monday 80% US UTC/GMT-4
Tuesday 90% US UTC/GMT-4
Wednesday, 85% US UTC/GMT-4
Thursday 80% US UTC/GMT-4
Friday 30% US UTC/GMT-4
Saturday 50% US UTC/GMT-4
Sunday 50% US UTC/GMT-4

Because of my Gray background i have to change Table border Black to White.

HTML Table Colspan - HTML Table Example 18:


<html>
 <head>
  <style>
 table,td,th{
	text-align:center;
  padding:6px;
  border:1px solid black;
  border-collapse:collapse;
 }
  </style>
 </head>
<body>

<table>
  <tr>
   <th>Day</th>
   <th>Humidity</th>
   <th>precipitation</th>
   <th>chances of rain</th>
  </tr>
  <tr>
   <td>Monday</td>
   <td>80%</td>
   <td>20%</td>
   <td>10%</td>
  </tr>
  <tr>
   <td>Tuesday</td>
   <td>90%</td>
   <td colspan="2">20%</td>
  </tr>
  <tr>
   <td>Wednesday</td>
   <td colspan="3">50%</td>
  </tr>
  <tr>
   <td>Thursday</td>
   <td colspan="2">20%</td>
   <td>7%</td>
  </tr>
  <tr>
   <td>Friday</td>
   <td>30%</td>
   <td>7%</td>
   <td>5%</td>
  </tr>
  <tr>
   <td>Saturday</td>
   <td>50%</td>
   <td>40%</td>
   <td>5%</td>
  </tr>
  <tr>
   <td>Sunday</td>
   <td colspan="3">50%</td>
  </tr>
</table>

</body>
</html>

Results

Day Humidity precipitation chances of rain
Monday 80% 20% 10%
Tuesday 90% 20%
Wednesday 50%
Thursday 20% 7%
Friday 30% 7% 5%
Saturday 50% 40% 5%
Sunday 50%

Because of my Gray background i have to change Table border Black to White.

HTML Table Column Width - HTML Table Example 19:


<html>
 <head>
  <style>
  
 td{
  width:100px;
 }
 
 table,td,th{
  padding:6px;
  border:1px solid black;
  border-collapse:collapse;
 }
  </style>
 </head>
<body>

<table>
  <tr>
   <th>Day</th>
   <th>Humidity</th>
   <th>precipitation</th>
  </tr>
  <tr>
   <td>Monday</td>
   <td>80%</td>
   <td>20%</td>
  </tr>
</table>

</body>
</html>

Results

Day Humidity precipitation
Monday 80% 20%

Because of my Gray background i have to change Table border Black to White.

HTML CSS Table Design Examples with Code - HTML Table Example 20:

We Are Working on It. Wait for a While......

Results

We Are Working on It. Wait for a While......
Because of my Gray background i have to change Table border Black to White.

Comments

Write to Us

Captcha