CSS Tables
As we have discussed the tables in HTML also but here the same table we are creating but by providing more styling to
the tables by css.
Here some of the properties we are discussing below :-
Table borders
By using border property we can implement all the border properties like border-style, border-color
border-size in our <table> , <th>, <tr> elements.
Let's understand this by the following example :-
<!DOCTYPE html>
<html>
<head>
<style>
table,th,td {
border:2px solid blue;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname </th>
<th>Lastname </th>
<th>Age </th>
</tr>
<tr>
<td>Ranbir </td>
<td>Kapoor </td>
<td>50 </td>
</tr>
<tr>
<td>Ranveer </td>
<td>Singh </td>
<td>94 </td>
</tr>
</table>
</html>
Output of the Program
| Firstname |
Lastname |
Age |
| Ranbir |
Kapoor |
50 |
| Ranveer |
Singh |
94 |
So we get the borders in every cell of table.
Collapse Table borders
By using border-collapse property we can set all the table borders in a single border.
Let's understand this by the following example :-
<!DOCTYPE html>
<html>
<head>
<style>
table,th,td{
border-collapse:collapse;
border:2px solid blue;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname </th>
<th>Lastname </th>
<th>Age </th>
</tr>
<tr>
<td>Ranbir </td>
<td>Kapoor </td>
<td>50 </td>
</tr>
<tr>
<td>Ranveer </td>
<td>Singh </td>
<td>94 </td>
</tr>
</table>
</html>
Output of the Program
| Firstname |
Lastname |
Age |
| Ranbir |
Kapoor |
50 |
| Ranveer |
Singh |
94 |
So we get a single border line in the table.
