When defining tables like below,
<table border="1" style="width:100%">
----
</table>
----
</table>
usage of border attribute is on its way out of the HTML standard!
It is better to use CSS as follows,
Sample 01
<html>
<head>
<style>
table, th, td{
border: 1px solid blue;
border-spacing: 5px;
}
</style>
</head>
<body>
<table style="width: 100%">
<tr>
<th>Firstname </th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Syed</td>
<td>Nawas Ahamed</td>
<td>83</td>
</tr>
<tr>
<td>Saleema</td>
<td>Parvin</td>
<td>94</td>
</tr>
<tr>
<td>Asrafi</td>
<td>Basha</td>
<td>80</td>
</tr>
</table>
<body>
<html>
Sample 02: Table with additional formatting aligned center.
<head>
<title>Students Mark Statement</title>
<style>
table, th, td
{
border: 1px solid
red;
border-spacing:
3px;
margin-left:auto;
margin-right:auto;
}
p{
text-align:center;
}
</style>
<head>
<body style="bg-color:yellow;">
<hr>
<p>Mark Statement</p>
<hr>
<table>
<tr>
<th>S.No</th>
<th>Name</th>
<th>Tamil</th>
<th>English</th>
<th>Maths</th>
<th>Science</th>
<th>Social</th>
<th>Total</th>
<th>Grade</th>
</tr>
<tr>
<td>1</td>
<td>Poornima.M</td>
<td>99</td>
<td>98</td>
<td>97</td>
<td>96</td>
<td>95</td>
<td>485</td>
<td>'A'</td>
</tr>
<tr>
<td>2</td>
<td>Sameena.M</td>
<td>95</td>
<td>94</td>
<td>93</td>
<td>92</td>
<td>91</td>
<td>465</td>
<td>'A'</td>
</tr>
</table>
<hr>
</body>
</body>
</html>
Check Output
No comments:
Post a Comment