◄ Min  Size Fonts: + | - | ± Color: ■ ■ ■ ■ Max ►
Home › › › › › Make Table Fungky with CSS3

Make Table Fungky with CSS3

Follow This Blog
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 DetailsProgressResponse
Blah bleh bloh100%Yes
Blah bleh bloh100%Yes
Blah bleh bloh50%No Bad
Blah bleh bloh0%No
Blah bleh bloh100%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/
Loading...
XMake Table Fungky with CSS3

Subscribe my posts Register For Free!
, , , ✎
[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE