Loading Please Wait...
There are lots of ways where you can style your HTML table in different ways to look tables more interactive and beautiful. We use CSS Style to achieve this.
<!DOCTYPE html>
<html>
<body>
<table>
<thead>
<tr>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fir</th>
<th>Sat</th>
<th>Sun</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>9</th>
<th>11</th>
<th>13</th>
<th>15</th>
<th>17</th>
<th>19</th>
<th>21</th>
</tr>
</tfoot>
</table>
</body>
</html>
We can define size of table, rows, and columns.
Use width and height property on table for entire table size, tr for row size, td, th for column size.
<head>
<style>
table, th, td{
border: 1px solid #000000;
border-collapse: collapse;
}
table{
width: 100%;
}
tr{
height: 70px;
}
th{
width: 75%;
}
</style>
</head>
We can group table column with <colgroup> and <col>. Where <colgroup> defines the group and <col> defines the column.
We can also use :nth-child() selector to group table column and rows.
Place immediate after table tag.
<colgroup>
<col span="2" style="background-color: #ffddaa">
<col span="3" style="background-color: #cdbcfc">
</colgroup>
<head>
<style>
table, th, td{
border: 1px solid #000000;
border-collapse: collapse;
}
table{
width: 100%;
}
td:nth-child(1), th:nth-child(1), td:nth-child(3), th:nth-child(3){
background-color: #cdbcfc;
}
td:nth-child(7), th:nth-child(7), td:nth-child(6), th:nth-child(6){
background-color: #ffddaa;
}
</style>
</head>
If style (background color) of each alternate row (even) is different then we have a striped table.
To do this, we use :nth-child(even) selector on table row (tr) or table cell (th, td). Where :nth-child(even) selects all even <tr> elements. You may also use odd instead of even or any numbers. We will learn more about selector in CSS Tutorials.
<head>
<style>
table, th, td{
border: 1px solid #000000;
border-collapse: collapse;
}
table{
width: 100%;
}
tr:nth-child(even){
background-color: #cdbcfc;
}
</style>
</head>
<head>
<style>
table, th, td{
border: 1px solid #000000;
border-collapse: collapse;
}
table{
width: 100%;
}
th:nth-child(odd), td:nth-child(odd){
background-color: #cdbcfc;
}
</style>
</head>
<head>
<style>
table, th, td{
border: 1px solid #000000;
border-collapse: collapse;
}
table{
width: 100%;
}
tr:nth-child(even){
background-color: #cdbcfc;
}
th:nth-child(odd), td:nth-child(odd){
background-color: #cdbcfc;
}
</style>
</head>
You can hide rows and column of your choice.
To do this, we use display property.
<head>
<style>
table, th, td{
border: 1px solid #000000;
border-collapse: collapse;
}
table{
width: 100%;
}
tr:nth-child(even){
display: none;
}
</style>
</head>
<head>
<style>
table, th, td{
border: 1px solid #000000;
border-collapse: collapse;
}
table{
width: 100%;
}
td:nth-child(even), th:nth-child(even){
display: none;
}
</style>
</head>
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved