Cara Design Table dengan CSS
Cara Design Table dengan CSS
Cara Design Table dengan CSS – Setalah mempelajari tutorial belajar HTML dasar. tentang cara membuat tabel di HTML di malasngoding.com, baca belajar html membuat tabel dengan html. pasti banyak di antara kita merasa tampilan dari tabel standar html tampilannya masih sangat kurang menarik. karena tampilan tabel standar dari HTML sendiri memiliki tampilan yang biasa saja. oleh karena itu Pada tutorial belajar CSS Design Tabel dengan CSS ini akan di jelaskan tentang bagaimana cara design sebuah tabel HTML dengan menggunakan CSS.
Cara Design Table dengan CSS
Di tutorial ini saya akan menjelaskan cara men-design table step by step. pertama kita buat kerangka table nya dulu.
|
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 lainnya
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 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 :
Tutorial Menarik Lainnya
Membuat Bentuk Segitiga Dengan CSS
Membuat Lingkaran Dengan CSS
Membuat Template Web Responsive Dengan HTML dan CSS
Cara Membuat Text Di Tengah Dengan HTML dan CSS
terimaksi sangat membantu
bang tolong dong gimana caranya tulisan di tabel menjadi berwarna dari kemaren susah,ini tugas nya sampe selasa besok tolong dong bang
bang tolong dong bang gimana cara yah membuat table dengan menggunkaan table css
itu sudah ada di sertakan full source code desain table dengan css nya kak, ada kendala?