Tables are a great way to present data visually. Tables allow us to display large amounts of data in a structured way (rows and columns) that is easy to read and understand. In this blog, we will learn about HTML tables.
You will understand the basics of HTML tables, such as rows, cells, adding captions, and making cells span multiple columns and rows. You will also learn how to add padding and background color in HTML tables.
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th {
text-align: left;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Name</th>
<th>Age</th>
<th>Salary</th>
</tr>
<tr>
<td>John</td>
<td>24</td>
<td>20,000</td>
</tr>
<tr>
<td>Adam</td>
<td>31</td>
<td>35,000</td>
</tr>
<tr>
<td>Chris</td>
<td>27</td>
<td>32,000</td>
</tr>
</table>
</body>
</html>Colspan Example:
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
}
th,
td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<td>James</td>
</tr>
<tr>
<th rowspan="2">Subjects</th>
<td>English</td>
</tr>
<tr>
<td>Science</td>
</tr>
</table>
</body>
</html>Adding Captions to Table
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 10px;
}
</style>
</head>
<body>
<table style="width:100%">
<caption>Employee Data</caption>
<tr>
<th>Name</th>
<th>Age</th>
<th>Salary</th>
</tr>
<tr>
<td>John</td>
<td>24</td>
<td>20,000</td>
</tr>
<tr>
<td>Adam</td>
<td>31</td>
<td>35,000</td>
</tr>
<tr>
<td>Chris</td>
<td>27</td>
<td>32,000</td>
</tr> </table>
</body>
</html>Adding a Background Color to a Table
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 10px;
}
table {
width: 100%;
background-color: #00ffbb;
}
</style>
</head>
<body>
<table style="width:100%">
<caption>Employee Data</caption>
<tr>
<th>Name</th>
<th>Age</th>
<th>Salary</th>
</tr>
<tr>
<td>John</td>
<td>24</td>
<td>20,000</td>
</tr>
<tr>
<td>Adam</td>
<td>31</td>
<td>35,000</td>
</tr>
<tr>
<td>Chris</td>
<td>27</td>
<td>32,000</td>
</tr> </table>
</body>
</html>