Best 5 CSS Table Design

By | May 11, 2014

Table design will be a primary object, when data are displayed in list (using table). It is easy to list the values from database using HTML Tables. Here is some of the Table design. Table design will be a primary object, when data are displayed in list (using table). It is easy to list the values from database using HTML Tables. Here is some of the Table design.

Table 1
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
<table class="table1">
<thead><tr><td>S No</td><td>First Name</td><td>Last Name</td><td>Email</td></tr></thead>
<tr><td>1</td><td>Kavin</td><td>Kumar</td><td>[email protected]</td></tr>
<tr><td>2</td><td>Kavin</td><td>Kumar</td><td>[email protected]</td></tr>
<tr><td>3</td><td>Kavin</td><td>Kumar</td><td>[email protected]</td></tr>
<tr><td>4</td><td>Kavin</td><td>Kumar</td><td>[email protected]</td></tr>
<tr><td>5</td><td>Kavin</td><td>Kumar</td><td>[email protected]</td></tr>
</table>


.table1 thead tr 
{
width: 600px;
border-collapse:collapse;
background: #F36;
color: #fff;
border: none;
}
.table1 thead td { padding: 8px 16px; }
.table1 tr { border-bottom: 1px solid #CACACA; }
.table1 td { padding: 5px  20px }
S No First Name Last Name Email
1 Kavin Kumar [email protected]
2 Kavin Kumar [email protected]
3 Kavin Kumar [email protected]
4 Kavin Kumar [email protected]
5 Kavin Kumar [email protected]

Table 2
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
<table class="table2">
<thead><tr><td>S No</td><td>First Name</td><td>Last Name</td><td>Email</td></tr></thead>
<tr><td>1</td><td>Kavin</td><td>Kumar</td><td>[email protected]</td></tr>
<tr><td>2</td><td>Kavin</td><td>Kumar</td><td>[email protected]</td></tr>
<tr><td>3</td><td>Kavin</td><td>Kumar</td><td>[email protected]</td></tr>
<tr><td>4</td><td>Kavin</td><td>Kumar</td><td>[email protected]</td></tr>
<tr><td>5</td><td>Kavin</td><td>Kumar</td><td>[email protected]</td></tr>
</table>

.table2 { border: 1px solid #F36; }
.table2 thead tr
{
background: #F36;
color: #fff;
border: none;
}
.table2 thead td { padding: 8px 16px; }
.table2 tr:nth-child(2n) { background: #E4E4E4; }
.table2 td { padding: 5px  20px }
S No First Name Last Name Email
1 Kavin Kumar [email protected]
2 Kavin Kumar [email protected]
3 Kavin Kumar [email protected]
4 Kavin Kumar [email protected]
5 Kavin Kumar [email protected]

Table 3
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
<table class="table3">
<thead><tr><td>S No</td><td>First Name</td><td>Last Name</td><td>Email</td></tr></thead>
<tr><td>1</td><td>Kavin</td><td>Kumar</td><td>[email protected]</td></tr>
<tr><td>2</td><td>Kavin</td><td>Kumar</td><td>[email protected]</td></tr>
<tr><td>3</td><td>Kavin</td><td>Kumar</td><td>[email protected]</td></tr>
<tr><td>4</td><td>Kavin</td><td>Kumar</td><td>[email protected]</td></tr>
<tr><td>5</td><td>Kavin</td><td>Kumar</td><td>[email protected]</td></tr>
</table>

.table3 thead tr
{
background: #F36;
color: #fff;
border: none;
}
.table3 thead td { padding: 8px 16px; border:none!important; }
.table3 tr:nth-child(2n) { background: #E4E4E4; }
.table3 tr td:nth-child(2n) { border-left: 1px solid #BEBEBE; border-right: 1px solid #BEBEBE; }
.table3 tr td:last-child { border-right: none; }
.table3 td { padding: 5px 20px; }
S No First Name Last Name Email
1 Kavin Kumar [email protected]
2 Kavin Kumar [email protected]
3 Kavin Kumar [email protected]
4 Kavin Kumar [email protected]
5 Kavin Kumar [email protected]

Table 4
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
<table class="table4">
<thead><tr><td>S No</td><td>First Name</td><td>Last Name</td><td>Email</td></tr></thead>
<tr><td>1</td><td>Kavin</td><td>Kumar</td><td>[email protected]</td></tr>
<tr><td>2</td><td>Kavin</td><td>Kumar</td><td>[email protected]</td></tr>
<tr><td>3</td><td>Kavin</td><td>Kumar</td><td>[email protected]</td></tr>
<tr><td>4</td><td>Kavin</td><td>Kumar</td><td>[email protected]</td></tr>
<tr><td>5</td><td>Kavin</td><td>Kumar</td><td>[email protected]</td></tr>
</table>

.table4 thead tr
{
background: #F36!important;
color: #fff;
border: none;
}
.table4 thead td
{
	background: #F36!important;
	padding: 8px 16px;
	border:none!important;
}
.table4 tr { border-bottom: 1px solid #CACACA; }
.table4 tr td:nth-child(2n) { background: #F0F0F0; }
.table4 tr td:last-child { border-right: none; }
.table4 td { padding: 5px  20px; }
S No First Name Last Name Email
1 Kavin Kumar [email protected]
2 Kavin Kumar [email protected]
3 Kavin Kumar [email protected]
4 Kavin Kumar [email protected]
5 Kavin Kumar [email protected]

Table 5
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
<table class="table5">
<thead><tr><td>S No</td><td>First Name</td><td>Last Name</td><td>Email</td></tr></thead>
<tr><td>1</td><td>Kavin</td><td>Kumar</td><td>[email protected]</td></tr>
<tr><td>2</td><td>Kavin</td><td>Kumar</td><td>[email protected]</td></tr>
<tr><td>3</td><td>Kavin</td><td>Kumar</td><td>[email protected]</td></tr>
<tr><td>4</td><td>Kavin</td><td>Kumar</td><td>[email protected]</td></tr>
<tr><td>5</td><td>Kavin</td><td>Kumar</td><td>[email protected]</td></tr>
</table>

.table5 thead tr
{
background: #F36!important;
color: #fff;
border: none;
}
.table5 thead td
{
	background: #F36!important;
	padding: 8px 16px;
	border:none!important;
}
.table5 tr { border-bottom: 1px solid #CACACA; }
.table5 tr:hover { border: 2px solid #F36; }
.table5 tr td:nth-child(2n) { background: #F0F0F0; }
.table5 tr td:last-child { border-right: none; }
.table5 td { padding: 5px  20px; }
S No First Name Last Name Email
1 Kavin Kumar [email protected]
2 Kavin Kumar [email protected]
3 Kavin Kumar [email protected]
4 Kavin Kumar [email protected]
5 Kavin Kumar [email protected]

Leave a Reply

Your email address will not be published. Required fields are marked *