CSS on tables:
CSS on tables:
Tables are a complex thing to create in a webpage. Four different tags are involved in making a table. CSS works great for styling a table because it specifies different properties for different tags. Following are the properties available in CSS for tables:
|
Property
|
Value
|
Used On
|
Description
|
|
Border
|
1px solid black;
|
Table, tr, th, td
|
Border of table. Here 1px is thickness, solid is type (solid/dotted/dashed) and black is color
|
|
border-collapse
|
Separate;
|
Table, tr, th, td
|
Separate borders
|
|
collapse;
|
Table, tr, th, td
|
Collapsed borders
|
|
border-bottom / border-top / border-left / border-right
|
1px solid #000000;
|
Table, tr, th, td
|
Border of particular side
|
|
Width
|
100%;
|
table
|
Width of table as per the width of parental container
|
|
500px;
|
table
|
Fixed width of table
|
|
Height
|
50px;
|
tr, th, td
|
Height of table elements
|
|
text-align
|
left; / right; / center;
|
Table, tr, th, td
|
Horizontal Alignment of text in table
|
|
vertical-align
|
bottom; / top; / middle;
|
tr, th, td
|
Vertical Alignment of text in table
|
|
Padding
|
15px; / 15px 15px; / 15px 15px 15px; / 15px 12px 15px 12px
|
th, td
|
Space between boundary and element
|
|
background-color
|
#4CAF50;
|
Table, tr, th, td
|
Background color of table elements
|
|
background-image
|
url("paper.gif");
|
|
background-image
|
|
color
|
white;
|
Table, tr, th, td
|
Text color of table elements
|
States of tables in CSS:
- tr:nth-child(odd) (every odd numbered row ex. 1,3,5,...n)
<![CDATA[tr:nth-child(odd) {background-color: #f3f3f3;}]]>
- tr:nth-child(even) (every even numbered row ex. 2,4,6,...n)
<![CDATA[tr:nth-child(even) {background-color: #f2f2f2;}]]>
- tr:hover (every row on which mouse is hovered)
<![CDATA[tr:hover {background-color: #f5f5f5;}]]>
nth-child(odd) and nth-child(even) both can be used to create a stripped table. hover state can be used with individual th and td as well.
Responsive table:
Usually a responsive element is the one that changes its size as per the width of the display device but in case of tables, its a little different. A responsive table does not changes its size. Instead it gives a horizonal scroll bar to scroll to the entire width of the table.
<![CDATA[<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>
]]>
Example 1: Simple table with border, width, height and align
<![CDATA[<html>
<head>
<style>
table,td,th
{
border:1px solid black;
border-collapse:separate;
width:300px;
}
tr
{
height:40px;
}
td
{
text-align:right;
vertical-align:bottom;
}
</style>
</head>
<body style="background-color:white;">
<table>
<tbody>
<tr>
<th>Name</th>
<th>F Name</th>
<th>M Name</th>
</tr>
<tr>
<td>Ravi</td>
<td>Amar</td>
<td>Neha</td>
</tr>
<tr>
<td>Preet</td>
<td>Surendra</td>
<td>Pooja</td>
</tr>
<tr>
<td>Amit</td>
<td>Ajay</td>
<td>Anuradha</td>
</tr>
</tbody>
</table>
</body>
</html>]]>
Output 1:
Example 2: Another table with background-image, background-color, and padding
<![CDATA[<html>
<head>
<style>
table
{
background-image:url('scene2.JPG');
width:50%;
color:maroon;
}
tr
{
height:40px;
}
table,td,th
{
border:1px dashed black;
border-collapse:collapse;
}
#header
{
background-color:skyblue;
height:40px;
}
td
{
text-align:right;
vertical-align:bottom;
padding:5px;
}
</style>
</head>
<body style="background-color:white;">
<table>
<tbody>
<tr id="header">
<th>Name</th>
<th>F Name</th>
<th>M Name</th>
</tr>
<tr id="body">
<td>Ravi</td>
<td>Amar</td>
<td>Neha</td>
</tr>
<tr id="body">
<td>Preet</td>
<td>Surendra</td>
<td>Pooja</td>
</tr>
<tr id="body">
<td>Amit</td>
<td>Ajay</td>
<td>Anuradha</td>
</tr>
</tbody>
</table>
</body>
</html>]]>
Output 2:
Example 3: A table with nth-child() and hover states
<![CDATA[<html>
<head>
<style>
table
{
width:50%;
color:maroon;
}
tr
{
height:40px;
}
table,td,th
{
border:1px solid white;
border-collapse:collapse;
}
tr:nth-child(odd)
{
background-color:fff6d6;
}
tr:nth-child(even)
{
background-color:fffcf2;
}
tr:hover
{
background-color:baffdc;
}
</style>
</head>
<body style="background-color:white;">
<table>
<tbody>
<tr>
<th>Name</th>
<th>F Name</th>
<th>M Name</th>
</tr>
<tr>
<td>Ravi</td>
<td>Amar</td>
<td>Neha</td>
</tr>
<tr>
<td>Preet</td>
<td>Surendra</td>
<td>Pooja</td>
</tr>
<tr>
<td>Amit</td>
<td>Ajay</td>
<td>Anuradha</td>
</tr>
</tbody>
</table>
</body>
</html>]]>
Output 3:
Example 4: A responsive table
<![CDATA[<html>
<head>
<style>
table
{
width:640px;
color:maroon;
}
tr
{
height:40px;
}
table,td,th
{
border:1px solid white;
border-collapse:collapse;
}
tr:nth-child(odd)
{
background-color:fff6d6;
}
tr:nth-child(even)
{
background-color:fffcf2;
}
tr:hover
{
background-color:baffdc;
}
</style>
</head>
<body style="background-color:white;">
<div style="overflow-x:auto;">
<table>
<tbody>
<tr>
<th>Name</th>
<th>F Name</th>
<th>M Name</th>
</tr>
<tr>
<td>Ravi</td>
<td>Amar</td>
<td>Neha</td>
</tr>
<tr>
<td>Preet</td>
<td>Surendra</td>
<td>Pooja</td>
</tr>
<tr>
<td>Amit</td>
<td>Ajay</td>
<td>Anuradha</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>]]>
Output 4: