HTML table

Simple example how to use table in html.

Table with th

<style>
table {
  width: 100%;
}

td, th {
  border: 1px solid #000;
  text-align: center;
  padding: 5px;
}
</style>
<table>

 <tr>
 <th>ID</th>
 <th>Name</th>
 <th>Country</th>
 <th>Age</th>
 </tr>
 
 <tr>
 <td>1</td>
 <td>David</td>
 <td>Unitad States</td>
 <td>30</td>
 </tr>
 
 <tr>
 <td>2</td>
 <td>Oliver</td>
 <td>Unitad States</td>
 <td>35</td>
 </tr> 
 
 <tr>
 <td>3</td>  
 <td>Emma</td>
 <td>United States</td>
 <td>31</td>
 </tr>
</table>
 

It will look like this

ID Name Country Age
1 David Unitad States 30
2 Oliver Unitad States 35
3 Emma Unitad States 31

Change th color

<style>
table {
  width: 100%;
}

td, th {
  border: 1px solid #000;
  text-align: center;
  padding: 5px;
}

th {
	background-color:#ddd;
}

</style>
<table>

 <tr>
 <th>ID</th>
 <th>Name</th>
 <th>Country</th>
 <th>Age</th>
 </tr>
 
 <tr>
 <td>1</td>
 <td>David</td>
 <td>Unitad States</td>
 <td>30</td>
 </tr>
 
 <tr>
 <td>2</td>
 <td>Oliver</td>
 <td>Unitad States</td>
 <td>35</td>
 </tr> 
 
 <tr>
 <td>3</td>  
 <td>Emma</td>
 <td>United States</td>
 <td>31</td>
 </tr>
</table>
 

It will look like this

ID Name Country Age
1 David Unitad States 30
2 Oliver Unitad States 35
3 Emma Unitad States 31

Table with head and foot

<style>
table {
  width: 100%;
}

td, th {
  border: 1px solid #000;
  text-align: center;
  padding: 5px;
}

th {
	background-color:#ddd;
}

</style>
<table>

 <thead>
 <tr>
 <th>ID</th>
 <th>Name</th>
 <th>Country</th>
 <th>Age</th>
 </tr>
 </thead>

 <tbody>
 <tr>
 <td>1</td>
 <td>David</td>
 <td>Unitad States</td>
 <td>30</td>
 </tr>
 
 <tr>
 <td>2</td>
 <td>Oliver</td>
 <td>Unitad States</td>
 <td>35</td>
 </tr> 
 
 <tr>
 <td>3</td>  
 <td>Emma</td>
 <td>United States</td>
 <td>31</td>
 </tr>
 </tbody>

 <tfoot>
 <tr>
 <th>All: 3</th>
 <th>Name</th>
 <th>Country</th>
 <th>Age</th>
 </tr>
 </tfoot> 
 
</table>

 

It will look like this

ID Name Country Age
1 David Unitad States 30
2 Oliver Unitad States 35
3 Emma Unitad States 31
All:3 Name Country Age

Example how to change table color with CSS

<style>
table {
  width: 100%;
}

td, th {
  border: 1px solid #000;
  text-align: center;
  padding: 5px;
}

th {
	background-color:#ddd;
}