<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
border: 2px solid red;
}
th {
height: 20px;
text-align: center;
border: 1px solid blue;
}
td {
vertical-align: bottom;
height: 50px;
border: 1px solid green;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Place</th>
<th>Mark</th>
</tr>
<tr>
<td>Merbin</td>
<td>India</td>
<td>88</td>
</tr>
<tr>
<td>Ganesh</td>
<td>USA</td>
<td>98</td>
</tr>
<tr>
<td>Ramesh</td>
<td>Rajastan</td>
<td>81</td>
</tr>
</table>
</body>
</html>
Used of:-
Table style
The example below specifies some styles for <table>, <th>, and <td> elements.
This will draw a red color border around the table in 2px size.
table {
border: 2px solid red;
}
The following css style will create the table heading in center alignment and it's height (<th>) will be 20px and blue color border around the table heading(<th>) in 1px size.
th {
height: 20px;
text-align: center;
border: 1px solid blue;
}
The following css style will create table data(<td>) in bottom alignment and it's height will be 50px and green color border around the table data(<td>) in 1px size.
td {
vertical-align: bottom;
height: 50px;
border: 1px solid green;
}
This will draw a red color border around the table in 2px size. table { border: 2px solid red; }
The following css style will create the table heading in center alignment and it's height (<th>) will be 20px and blue color border around the table heading(<th>) in 1px size. th { height: 20px; text-align: center; border: 1px solid blue; }
The following css style will create table data(<td>) in bottom alignment and it's height will be 50px and green color border around the table data(<td>) in 1px size. td { vertical-align: bottom; height: 50px; border: 1px solid green; }
Css :- Table style
Reviewed by Network security
on
May 06, 2019
Rating:
Reviewed by Network security
on
May 06, 2019
Rating:
No comments: