Table design using css

April 17, 2020

Table design using css

<html>
<head>
<title>Table Designs </title>

<style>
table.blueTable {
border: 4px solid #1C6EA4;
background-color: #EEDD2E;
width: 100%;
text-align: center;
border-collapse: collapse;
}
table.blueTable td, table.blueTable th {
border: 1px solid #AA3D18;
padding: 3px 2px;
}
table.blueTable tbody td {
font-size: 13px;
font-weight: bold;
}
table.blueTable tr:nth-child(even) {
background: #D0E4F5;
}
table.blueTable thead {
background: #9E3AA4;
background: -moz-linear-gradient(top, #b66bbb 0%, #a74dad 66%, #9E3AA4 100%);
background: -webkit-linear-gradient(top, #b66bbb 0%, #a74dad 66%, #9E3AA4 100%);
background: linear-gradient(to bottom, #b66bbb 0%, #a74dad 66%, #9E3AA4 100%);
border-bottom: 2px solid #444444;
}
table.blueTable thead th {
font-size: 15px;
font-weight: bold;
color: #FFFFFF;
border-left: 2px solid #D0E4F5;
}
table.blueTable thead th:first-child {
border-left: none;
}

table.blueTable tfoot {
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
background: #3AECF5;
background: -moz-linear-gradient(top, #6bf1f7 0%, #4deef6 66%, #3AECF5 100%);
background: -webkit-linear-gradient(top, #6bf1f7 0%, #4deef6 66%, #3AECF5 100%);
background: linear-gradient(to bottom, #6bf1f7 0%, #4deef6 66%, #3AECF5 100%);
border-top: 2px solid #444444;
}
table.blueTable tfoot td {
font-size: 14px;
}
table.blueTable tfoot .links {
text-align: right;
}
table.blueTable tfoot .links a{
display: inline-block;
background: #1C6EA4;
color: #FFFFFF;
padding: 2px 8px;
border-radius: 5px;
}
</style>
</head>
<body>
<table class="blueTable">
<thead>
<tr>
<th>S.No.</th>
<th>Name</th>
<th>Roll No.</th>
<th>Subject</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">
<div class="links"><a href="#">«</a> <a class="active" href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">»</a></div>
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td><td>Aakash</td><td>1234</td><td>Maths</td></tr>
<tr>
<td>2</td><td>Aayush</td><td>420</td><td>Physics</td></tr>
<tr>
<td>3</td><td>Khushi</td><td>786</td><td>Chemistry</td></tr>
<tr>
<td>4</td><td>Rani</td><td>143</td><td>Hindi</td></tr>
</tbody>
</tr>
</table>
</body>
</html>