View video tutorial
HTML Table Padding
HTML
The padding property helps element to add space inside it.
HTML padding
➔ padding creates a space inside elements from all sides.
➔ If need a padding from specific sides then need to specify like, padding-top, padding-bottom, padding-left, padding-right
➔ padding adds space from all sides.
Syntax
<!--CSS-->
<style>
table {
border-collapse: collapse;
width: 100%;
}
td,th {
border: 1px solid #00000055;
text-align: left;
padding: 8px;
}
</style>
<!--HTML-->
<table>
<thead>
<tr>
<th>Name</th>
<th>Found in significant numbers</th>
</tr>
</thead>
<tbody>
<tr>
<td>Horses</td>
<td>China/USA</td>
</tr>
</tbody>
</table>
Animals Table
| Name | Found in significant numbers |
|---|---|
| Horses | China/USA |
| Cows | India |
| Pigs | China |
| Elephant | Thailand/Africa |
| Kangaroo | Australia |
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<table>
<thead>
<tr>
<th>Name</th>
<th>Found in significant numbers</th>
</tr>
</thead>
<tbody>
<tr>
<td>Horses</td>
<td>China/USA</td>
</tr>
<tr>
<td>Cows</td>
<td>India</td>
</tr>
<tr>
<td>Pigs</td>
<td>China</td>
</tr>
<tr>
<td>Elephant</td>
<td>Thailand/Africa</td>
</tr>
<tr>
<td>Kangaroo</td>
<td>Australia</td>
</tr>
</tbody>
</table>
Click on the "See output" button to see how it works.