In this tutorial, you will learn HTML tables. When we need HTML tables? and How to use tables in web pages and style them. Nowadays tables are used in various places such as creating a Database, Comparing values, and many more. So, we need HTML tables for creating databases and saving too much data in a good style.
A table is sorting of data in rows and columns. The vital uses of a table in research, analysis, and data communication.
HTML table can be define with <table> element. A table row is define with <tr> element, and header is define with <th> element. Table cells define with <td> element.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>The HTML Table Tutorial</h2>
<p>By using CSS border property to put a border to the table.</p>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Muhammad</td>
<td>Ali</td>
<td>15</td>
</tr>
<tr>
<td>Muhammad</td>
<td>Ahmad</td>
<td>14</td>
</tr>
</table>
</body>
</html>
Add Padding To the Table Cells:
You can put padding on your web page tables by using padding property of Cascading Style Sheet (CSS).
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
} th, td {
padding: 15px;}
}
</style>
<h2>The HTML Table Tutorial</h2>
<p>By using CSS border property to put a border to the table.</p>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Muhammad</td>
<td>Ali</td>
<td>15</td>
</tr>
<tr>
<td>Muhammad</td>
<td>Ahmad</td>
<td>14</td>
</tr>
</table>Add HTML Table Caption
You can add caption by using <caption> element. Keep in mind a <caption> element must be inserted after the <table> element.
Example:
<style>
table, th, td {
border: 2px solid yellow;
border-collapse: collapse;
}
th, td {
padding: 15px;
text-align: left;
}
table,Table {
width: 100%;
background:black;
color:white;
}
</style>
<h2>The HTML Table Tutorial</h2>
<p>By using CSS border property to put a border to the table.</p>
<table class="Table" style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Muhammad</td>
<td>Ali</td>
<td>15</td>
</tr>
<tr>
<td>Muhammad</td>
<td>Ahmad</td>
<td>14</td>
</tr>
</table>How to Style a HTML table:
To Style, a table is not most attractive in the world, but in some situations, we need to style a table as well. The given example will tell you to make a table look best, with some CSS properties. So, let’s take a look at Example.
<style>
table, th, td {
border: 2px solid yellow;
border-collapse: collapse;
}
th, td {
padding: 15px;
text-align: left;
}
table,Table {
width: 100%;
background:black;
color:white;
}
</style>
<h2>The HTML Table Tutorial</h2>
<p>By using CSS border property to put a border to the table.</p>
<table class="Table" style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Muhammad</td>
<td>Ali</td>
<td>15</td>
</tr>
<tr>
<td>Muhammad</td>
<td>Ahmad</td>
<td>14</td>
</tr>
</table>