Best 5 CSS 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 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.

[code type=css]

.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 }
[/code]

[code type=css]

.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 }
[/code]

[code type=css]

.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; }
[/code]

[code type=css]

.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; }
[/code]

[code type=css]

.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; }

[/code]