#Web Design

Membuat Design Table Bergaya Elegan Dengan CSS

By Diki Alfarabi Hadi
1 February 2016
Web Design

Membuat Design Table Bergaya Elegan Dengan CSS – Jumpa lagi di www.malasngoding.com. masih seputar kategori web design. kali ini saya akan membagikan cara design table HTML dengan mudah menggunakan CSS. Table adalah element HTML yang paling penting dan paling sering kita gunakan untuk menampilkan data misalnya. selain menampilkan data dalam bentuk list. kita juga biasanya menampilkan data dalam bentuk table. entah itu data yang kita isi secara manual ataupun data yang kita ambil dari database. data yang di tampilkan dalam bentuk table sederhana sangat lah simple dan tidak memiliki warna. jadi lebih baik kita design table kita agar lebih terlihat menarik dan enak di pandang. silahkan simak penjelasan berikut ini tentang cara membuat design table bergaya elegan dengan css. Baca juga : Menampilkan data dari database dengan CodeIgniter

Membuat Design Table Bergaya Elegan Dengan CSS

Pada tutorial ini saya akan membagikan contoh membuat design table sederhana yang mudah di pahami struktur syntax nya. adapun yang anda butuhkan untuk mengikuti tutorial membuat design table ini adalah sebuah file CSS dan sebuah file HTML atau PHP terserah anda. asalkan file HTML atau PHP nya di sambungkan atau di hubungkan dengan file CSS nya. di sini saya membuat file HTML dengan nama index.html. Membuat Design Table Bergaya Elegan Dengan CSS

Index.html

<!DOCTYPE html>

<html>

<head>

<title>Membuat design table bergaya elegan dengan CSS | MalasNgoding.com</title>

</head>

<body>

<center><h1>Membuat design table bergaya elegan dengan CSS | MalasNgoding.com</h1></center>

<thead>

<tr>

<th>Nama Anggota</th>

<th>Alamat</th>

<th>Pekerjaan</th>

</tr>

</thead>

<tbody>

<tr>

<td>Jakarta Selatan</td>

<td>Web Designer</td>

</tr>

<tr>

<td>Bandung</td>

<td>Web Developer</td>

</tr>

<tr>

<td>Cahyo</td>

<td>Bekasi</td>

<td>Web Programmer</td>

</tr>

<tr>

<td>Darma</td>

<td>Teknisi</td>

</tr>

</tbody>

</table>

</body>

</html>

dapat teman-teman lihat pada contoh syntax elemen table di atas. kita harus membuat struktur table nya terlebih dulu dan kemudian baru kita berikan sentuhan css nya.

style.css

h1{

font-family: sans-serif;

}

table {

font-family: Arial, Helvetica, sans-serif;

color: #666;

text-shadow: 1px 1px 0px #fff;

background: #eaebec;

border: #ccc 1px solid;

}

table th {

padding: 15px 35px;

border-left:1px solid #e0e0e0;

border-bottom: 1px solid #e0e0e0;

background: #ededed;

}

table th:first-child{

border-left:none;

}

table tr {

text-align: center;

padding-left: 20px;

}

table td:first-child {

text-align: left;

padding-left: 20px;

border-left: 0;

}

table td {

padding: 15px 35px;

border-top: 1px solid #ffffff;

border-bottom: 1px solid #e0e0e0;

border-left: 1px solid #e0e0e0;

background: #fafafa;

background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));

background: -moz-linear-gradient(top, #fbfbfb, #fafafa);

}

table tr:last-child td {

border-bottom: 0;

}

table tr:last-child td:first-child {

-moz-border-radius-bottomleft: 3px;

-webkit-border-bottom-left-radius: 3px;

border-bottom-left-radius: 3px;

}

table tr:last-child td:last-child {

-moz-border-radius-bottomright: 3px;

-webkit-border-bottom-right-radius: 3px;

border-bottom-right-radius: 3px;

}

table tr:hover td {

background: #f2f2f2;

background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));

background: -moz-linear-gradient(top, #f2f2f2, #f0f0f0);

}

dan table pun selesai. silahkan jalankan file html untuk melihat hasil table design bergaya elegan yang telah kita buat.

membuat design table bergaya elegan dengan css

See the Pen Membuat design table bergaya elegan dengan css by Malas Ngoding (@malasngoding) on CodePen.

sekian lah tutorial membuat design table bergaya elegan dengan css. semoga bermanfaat.

Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.