Di tutorial ini saya akan menjelaskan cara men-design table step by step. pertama kita buat kerangka table nya dulu. Show 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 <!DOCTYPE html> <html> <head> <title>Cara Design Table Dengan CSS | www.malasngoding.com</title> </head> <body> <h1>Cara Design Table Dengan CSS | www.malasngoding.com</h1> <table border="1"> <tr> <th>No</th> <th>Nama</th> <th>Alamat</th> <th>Usia</th> </tr> <tr> <td>1</td> <td>Andi Saputra</td> <td>Magelang</td> <td>21</td> </tr> <tr> <td>2</td> <td>Budi Budiman</td> <td>Jakarta</td> <td>24</td> </tr> <tr> <td>3</td> <td>Calvin Sanusi</td> <td>Malang</td> <td>29</td> </tr> <tr> <td>4</td> <td>Diki</td> <td>Bandung</td> <td>24</td> </tr> <tr> <td>5</td> <td>Malas Ngoding</td> <td>Medan</td> <td>23</td> </tr> </table> </body> </html> dan tampilan nya masih standar dan biasa saja.  Cara design table dengan css Seperti yang tampak pada gambar di atas. tampilan dari table kita masih sangat standar. sekarang kita akan langsung memulai mendesign table nya. buat sebuah file css dan langsung hubungkan dengan file html nya. baca tutorial sebelumnya tentang belajar html menghubungkan html dan css. 1 <link rel="stylesheet" type="text/css" href="style.css"> index.html 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 <!DOCTYPE html> <html> <head> <title>Cara Design Table Dengan CSS | www.malasngoding.com</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Cara Design Table Dengan CSS | www.malasngoding.com</h1> <h4>Design table 1</h4> <table class="table1"> <tr> <th>No</th> <th>Nama</th> <th>Alamat</th> <th>Usia</th> </tr> <tr> <td>1</td> <td>Andi Saputra</td> <td>Magelang</td> <td>21</td> </tr> <tr> <td>2</td> <td>Budi Budiman</td> <td>Jakarta</td> <td>24</td> </tr> <tr> <td>3</td> <td>Calvin Sanusi</td> <td>Malang</td> <td>29</td> </tr> <tr> <td>4</td> <td>Diki</td> <td>Bandung</td> <td>24</td> </tr> <tr> <td>5</td> <td>Malas Ngoding</td> <td>Medan</td> <td>23</td> </tr> </table> </body> </html> style.css 1 2 3 4 5 6 7 8 9 10 11 /*design table 1*/ .table1 { font-family: sans-serif; color: #232323; border-collapse: collapse; }
.table1, th, td { border: 1px solid #999; padding: 8px 20px; } contoh di atas adalah membuat design table sederhana.hasilnya. membuat design table sederhana dengan css perhatikan pada gambar di atas. table kita sudah agak kelihatan lebih bersih. hehe. saya jelaskan sedikit penggunaan css nya. pada element table kita menentukan font yang ingin kita gunakan. karena kita akan mengganti font nya. agar lebih terlihat menarik. cara mengganti font sudah saya jelaskan pada tutorial sebelumnya. silahkan teman-teman baca tutorial cara mengganti font dengan css. dan menetapkan warna font nya denga warna #232323. dan yang paling penting adalah border-collapse:collapse. ini berfungsi untuk membuat garis pada tabel menjadi sebaris. 1 2 3 4 5 .table1 { font-family: sans-serif; color: #232323; border-collapse: collapse; } kemudian lagi pada element table head dan table body nya kita tentukan warna table nya dengan kode warna #999. dan memberikan padding atas bawah sebesar 8px. dan kiri kanan 20px. 1 2 3 4 .table1, th, td { border: 1px solid #999; padding: 8px 20px; } Contoh source code design table lainnyaindex.html 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 <!DOCTYPE html> <html> <head> <title>Cara Design Table Dengan CSS | www.malasngoding.com</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Cara Design Table Dengan CSS | www.malasngoding.com</h1> <h4>Design table 1</h4> <table class="table1"> <tr> <th>No</th> <th>Nama</th> <th>Alamat</th> <th>Usia</th> </tr> <tr> <td>1</td> <td>Andi Saputra</td> <td>Magelang</td> <td>21</td> </tr> <tr> <td>2</td> <td>Budi Budiman</td> <td>Jakarta</td> <td>24</td> </tr> <tr> <td>3</td> <td>Calvin Sanusi</td> <td>Malang</td> <td>29</td> </tr> <tr> <td>4</td> <td>Diki</td> <td>Bandung</td> <td>24</td> </tr> <tr> <td>5</td> <td>Malas Ngoding</td> <td>Medan</td> <td>23</td> </tr> </table> </body> </html> style.css 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 .table1 { font-family: sans-serif; color: #444; border-collapse: collapse; width: 50%; border: 1px solid #f2f5f7; }
.table1 tr th{ background: #35A9DB; color: #fff; font-weight: normal; }
.table1, th, td { padding: 8px 20px; text-align: center; }
.table1 tr:hover { background-color: #f5f5f5; }
.table1 tr:nth-child(even) { background-color: #f2f2f2; } Cara design table dengan css Sekian dulu tutorial Cara Design Table dengan CSS. semoga bermanfaat. Baca juga :
Incoming search terms:
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.
Tags: Belajar CSS Design Tabel dengan CSS, cara membuat tabel css, css table design tutorial, formatowanie tabel css, generator tabel css, membuat tabel menggunakan css, step by step design table, tabel dengan css, table, table css, table css design, tworzenie tabel css, web design table Tutorial CSS Dasar
Tutorial CSS3 Dasar
Produk
Tutorial Terbaru
Toko KamiSOCIALMalas Ngoding TUTORIAL MENARIK LAINNYAMembuat Bentuk Segitiga Dengan CSS – Selamat datang kembali di tutorial css di malasngoding.com. beberapa waktu lalu ada beberapa teman-teman pembaca tutorial di malasngoding.com yang ... Diki Alfarabi Hadi Membuat Lingkaran Dengan CSS Membuat Lingkaran Dengan CSS – Pada tutorial ini kita akan belajar membuat lingkaran atau nembuat bulat dengan menggunakan CSS. Memang mungkin ... Diki Alfarabi Hadi Membuat Template Web Responsive Dengan HTML dan CSS – Pada tutorial ini kita akan membuat sebuah template web sederhana responsive dengan menggunakan HTML dan CSS. ... Diki Alfarabi Hadi
|
Cara menggunakan template table html
Pos Terkait
Copyright © 2024 ketajaman Inc.
