Quick Reach
How to Style the tables by using CSS?
HTML tables can be styled with the power of CSS. You can use CSS border, padding and other properties to look table more stand out and beautiful.
This tutorial shows how to style HTML tables by CSS properties.
CSS table with border and padding
The example shows how to use table CSS properties to style a table. The table style includes setting the border, heading and table data where borders are given different specifications.
In normal HTML tables, borders are separate or detached. The border-collapse property is used to make it collapse into a single border. Also, the CSS table padding is used for table data (td) as shown below.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
<html>
<head>
<style>
/*Using CSS border*/
table{
border-collapse: collapse;
border: 2px solid #006655;
}
table th{
border: 1px dashed black;
color: #FF8800;
}
table td{
padding:10px;
border: 1px dotted black;
color: blue;
}
</style>
</head>
<body>
<table>
<tr>
<th>Employee Name</th>
<th>Emplyee Salary</th>
</tr>
<tr>
<td>Mike</td>
<td>$5000</td>
</tr>
<tr>
<td>Dave</td>
<td>$6000</td>
</tr>
<tr>
<td>Shena</td>
<td>$4000</td>
</tr>
</table>
</body>
</html>
|
Setting table width and height example
This example sets the height and width of the table with CSS. The table headings <th> and table data <td> height and width specified separately by using table properties in CSS.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
<html>
<head>
<style>
/*Using CSS border*/
table{
width:400px;
border-collapse: collapse;
border: 2px solid #006655;
}
table th{
width:50%;
height:40px;
border: 1px dashed black;
color: #FF8800;
}
table td{
width:50%;
height:30px;
border: 1px dotted black;
color: blue;
}
</style>
</head>
<body>
<table>
<tr>
<th>Employee Name</th>
<th>Emplyee Salary</th>
</tr>
<tr>
<td>Mike</td>
<td>$5000</td>
</tr>
<tr>
<td>Dave</td>
<td>$6000</td>
</tr>
<tr>
<td>Shena</td>
<td>$4000</td>
</tr>
</table>
</body>
</html>
|
As you can see, by using CSS, the table width and height are applied.
The example below shows how to hide table with display: none property value. As you click on the button “Show table”, the table will be shown by using the jQuery. The table is basically hidden at design time by using the display property.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
<html>
<head>
<style>
/*Using CSS border*/
.table_cl{
display:none;
border-collapse: collapse;
border: 2px solid #006655;
}
.table_cl th{
border: 1px dashed black;
color: #FF8800;
}
.table_cl td{
border: 1px dotted black;
color: blue;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$(".hidetext").click(function () {
$("table").show("slow")
});
});
</script>
</head>
<body>
<table>
<tr>
<th>Employee Name</th>
<th>Emplyee Salary</th>
</tr>
<tr>
<td>Mike</td>
<td>$5000</td>
</tr>
<tr>
<td>Dave</td>
<td>$6000</td>
</tr>
<tr>
<td>Shena</td>
<td>$4000</td>
</tr>
</table>
<button class="hidetext">Show table</button>
</body>
</html>
|
You can learn more about jQuery show method in its chapter.
Also see: CSS box shadow
Leave A Comment?