You can format Tables using CSS to not just add borders, but also interactive features.
tableStyle.css
.basicTable {
border-collapse: collapse;
}
.basicTable th {
border:3px dashed red;
}
.basicTable td {
border: 1px solid black;
}
.fancyTable {
border-collapse: collapse;
}
.fancyTable th, .fancyTable td {
border: 1px solid black
}
.fancyTable th {background-color: pink;}
.fancyTable tr:nth-child(even){background-color: orange;}
.fancyTable tr:hover {background-color: yellow;}
table.html
<html>
<head>
<link rel="stylesheet" href="tableStyle.css" />
</head>
<body>
<table>
<tr><th>Name</th><th>Age</th><th>Shirt Size</th></tr>
<tr><td>bob</td><td>12</td><td>Large</td></tr>
<tr><td>Sue</td><td>11</td><td>Small</td></tr>
<tr><td>Tim</td><td>13</td><td>Medium</td></tr>
<tr><td>Pat</td><td>10</td><td>Small</td></tr>
<tr><td>Frank</td><td>3</td><td>Medium</td></tr>
<tr><td>Rob</td><td>14</td><td>Large</td></tr>
<tr><td>Amy</td><td>20</td><td>Small</td></tr>
</table>
<br>
<table class="basicTable">
<tr><th>Name</th><th>Age</th><th>Shirt Size</th></tr>
<tr><td>bob</td><td>12</td><td>Large</td></tr>
<tr><td>Sue</td><td>11</td><td>Small</td></tr>
<tr><td>Tim</td><td>13</td><td>Medium</td></tr>
<tr><td>Pat</td><td>10</td><td>Small</td></tr>
<tr><td>Frank</td><td>3</td><td>Medium</td></tr>
<tr><td>Rob</td><td>14</td><td>Large</td></tr>
<tr><td>Amy</td><td>20</td><td>Small</td></tr>
</table>
<br>
<table class="fancyTable">
<tr><th>Name</th><th>Age</th><th>Shirt Size</th></tr>
<tr><td>bob</td><td>12</td><td>Large</td></tr>
<tr><td>Sue</td><td>11</td><td>Small</td></tr>
<tr><td>Tim</td><td>13</td><td>Medium</td></tr>
<tr><td>Pat</td><td>10</td><td>Small</td></tr>
<tr><td>Frank</td><td>3</td><td>Medium</td></tr>
<tr><td>Rob</td><td>14</td><td>Large</td></tr>
<tr><td>Amy</td><td>20</td><td>Small</td></tr>
</table>
</body>
</html>
Be the first to comment