Make Table Fungky with CSS3

Jarang dipakai namun bukan berarti melupakan teknik satu ini. Membuat tabel mungkin perihal yang amat jarang dipakai didalam memostingkan sebuah artikel. Beben Koben si bloglang anu genteng kalem tea akan tetap berbagi bagaimana membuat tabel yang indah dan menawan tentunya melibatkan attribute CSS3.
Sekarang coba tengok oleh sobat sekalian bentuk table sederhana berikut, dibubuhi dengan variable hover guna memperindah saat disorot cursor :D

Kode CSS

.tabel {
border: 2px groove #333;
}
td {
font-size: 15px;
width: 120px;
float: left;
padding: 5px;
border: 1px solid #333;
}
td a {
color: #a00;
display: block;
}
td a:hover {
background-color: #a00;
color: #fff;
}

HTML

<table class="tabel">
<tr><td>
<a href="#">Table 1</a></td>
<td><a href="#">Table 2</a></td>
<td><a href="#">Table 3</a></td>
</tr>
<tr><td>
<a href="#">Table 4</a></td>
<td><a href="#">Table 5</a></td>
<td><a href="#">Table 6</a></td>
</tr>
</table>Bagaimana jika sekarang diberi sentuhan artistik CSS-3 for make a stylish table.

View demo

Ada 2 jenis table with rounded corners disana!

Highlighted rows, borders

KODE CSS

table {
border-spacing: 0;
width: 100%;
}
.bordered {
border: solid #ccc 1px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 1px 1px #ccc;
-moz-box-shadow: 0 1px 1px #ccc;
box-shadow: 0 1px 1px #ccc;
}
.bordered tr:hover {
background: #dce9f9;
-o-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.bordered td, .bordered th {
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
padding: 10px;
text-align: left;
}
.bordered th {
background-color: #59f;
background-image: -webkit-gradient(linear, left top, left bottom, from(#59f), to(#ebf3fc));
background-image: -webkit-linear-gradient(top, #59f, #ebf3fc);
background-image: -moz-linear-gradient(top, #59f, #ebf3fc);
background-image: -ms-linear-gradient(top, #59f, #ebf3fc);
background-image: -o-linear-gradient(top, #59f, #ebf3fc);
background-image: linear-gradient(top, #59f, #ebf3fc);
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
-moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
border-top: none;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.bordered td:first-child, .bordered th:first-child {
border-left: none;
}
.bordered th:first-child {
-moz-border-radius: 6px 0 0 0;
-webkit-border-radius: 6px 0 0 0;
border-radius: 6px 0 0 0;
}
.bordered th:last-child {
-moz-border-radius: 0 6px 0 0;
-webkit-border-radius: 0 6px 0 0;
border-radius: 0 6px 0 0;
}
.bordered tr:last-child td:first-child {
-moz-border-radius: 0 0 0 6px;
-webkit-border-radius: 0 0 0 6px;
border-radius: 0 0 0 6px;
}
.bordered tr:last-child td:last-child {
-moz-border-radius: 0 0 6px 0;
-webkit-border-radius: 0 0 6px 0;
border-radius: 0 0 6px 0;
}

KODE HTML

<table class="bordered">
<thead>
<tr>
<th>No</th>
<th>MAIN TITLE HERE</th>
<th>SUB</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>The Title 1</td>
<td>XxX</td>
</tr>
<tr>
<td>2</td>
<td>The Title 2</td>
<td>XxX</td>
</tr>
<tr>
<td>3</td>
<td>The Title 3</td>
<td>XxX</td>
</tr>
<tr>
<td>4</td>
<td>The Title 4</td>
<td>XxX</td>
</tr>
<tr>
<td>5</td>
<td>The Title 5</td>
<td>XxX</td>
</tr>
<tr>
<td>6</td>
<td>The Title 6</td>
<td>XxX</td>
</tr>
<tr>
<td>7</td>
<td>The Title 7</td>
<td>XxX</td>
</tr>
<tr>
<td>8</td>
<td>The Title 8</td>
<td>XxX</td>
</tr>
<tr>
<td>9</td>
<td>The Title 9</td>
<td>XxX</td>
</tr>
<tr>
<td>10</td>
<td>The Title 10</td>
<td>XxX</td>
</tr>
</table>

Zebra stripes, footer

CSS CODED

table {
border-spacing: 0;
width: 100%;
}
.zebra td, .zebra th {
padding: 10px;
border-bottom: 1px solid #eee;
}
.zebra tbody tr:nth-child(even) {
background: #000;
color: #fff;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.5) inset;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.5) inset;
box-shadow: 0 1px 0 rgba(255,255,255,.5) inset;
}
.zebra th {
text-align: left;
color:#fff;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
border-bottom: 1px solid #eee;
background-color: #000;
background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#aaa));
background-image: -webkit-linear-gradient(top, #000, #aaa);
background-image: -moz-linear-gradient(top, #000, #aaa);
background-image: -ms-linear-gradient(top, #000, #aaa);
background-image: -o-linear-gradient(top, #000, #aaa);
background-image: linear-gradient(top, #000, #aaa);
}
.zebra th:first-child {
-moz-border-radius: 6px 0 0 0;
-webkit-border-radius: 6px 0 0 0;
border-radius: 6px 0 0 0;
}
.zebra th:last-child {
-moz-border-radius: 0 6px 0 0;
-webkit-border-radius: 0 6px 0 0;
border-radius: 0 6px 0 0;
}
.zebra tfoot td {
border-bottom: 0;
border-top: 1px solid #fff;
background-color: #f1f1f1;
}
.zebra tfoot td:first-child {
-moz-border-radius: 0 0 0 6px;
-webkit-border-radius: 0 0 0 6px;
border-radius: 0 0 0 6px;
}
.zebra tfoot td:last-child {
-moz-border-radius: 0 0 6px 0;
-webkit-border-radius: 0 0 6px 0;
border-radius: 0 0 6px 0;
}

HTML CODED

<table class="zebra">
<thead>
<tr>
<th>No</th>
<th>MAIN TITLE HERE</th>
<th>SUB</th>
</tr>
</thead>
<tfoot>
<tr>
<td>&nbsp;</td>
<td></td>
<td></td>
</tr>
</tfoot>
<tr>
<td>1</td>
<td>The Title A</td>
<td>XxX</td>
</tr>
<tr>
<td>2</td>
<td>The Title B</td>
<td>XxX</td>
</tr>
<tr>
<td>3</td>
<td>The Title C</td>
<td>XxX</td>
</tr>
<tr>
<td>4</td>
<td>The Title D</td>
<td>XxX</td>
</tr>
<tr>
<td>5</td>
<td>The Title E</td>
<td>XxX</td>
</tr>
<tr>
<td>6</td>
<td>The Title F</td>
<td>XxX</td>
</tr>
<tr>
<td>7</td>
<td>The Title G</td>
<td>XxX</td>
</tr>
<tr>
<td>8</td>
<td>The Title H</td>
<td>XxX</td>
</tr>
<tr>
<td>9</td>
<td>The Title I</td>
<td>XxX</td>
</tr>
<tr>
<td>10</td>
<td>The Title J</td>
<td>XxX</td>
</tr>
</table>

Resource: Red Team Design.

Simple Table With CSS3

Task Details	Progress	Response
Blah bleh bloh	100%	Yes
Blah bleh bloh	100%	Yes
Blah bleh bloh	50%	No Bad
Blah bleh bloh	0%	No
Blah bleh bloh	100%	Yes

CSS3 Coded

table {
width: 90%;
margin: 5px auto 0;
background: #fefefe;
border: 1px solid #ddd;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 5px #000;
-moz-box-shadow: 0px 0px 5px #000;
box-shadow: 0px 0px 5px #000;
}
th {
padding: 10px;
text-shadow: 1px 1px 1px #fff;
background: #e8eaeb;
text-align: center;
background: -moz-linear-gradient(100% 20% 90deg, #e8eaeb, #ededed);
background: -webkit-gradient(linear, 0% 0%, 0% 20%, from(#ededed), to(#e8eaeb));
}
td {
border-top: 1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
padding: 5px;
font-size: 13px;
background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);
background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));
}
tr {
background: -moz-linear-gradient(100% 25% 90deg, #f6f6f6, #f1f1f1);
background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f1f1f1), to(#f6f6f6));
}

Markup HTML

<table cellspacing='0'>
<tr><th>Task Details</th><th>Progress</th><th>Response</th></tr>
<tr><td>Blah bleh bloh</td><td>100%</td><td>Yes</td></tr>
<tr><td>Blah bleh bloh</td><td>100%</td><td>Yes</td></tr>
<tr><td>Blah bleh bloh</td><td>50%</td><td>No Bad</td></tr>
<tr><td>Blah bleh bloh</td><td>0%</td><td>No</td></tr>
<tr><td>Blah bleh bloh</td><td>100%</td><td>Yes</td></tr>
</table>Happy table \m/