Halo semuanya pada artikel alafgani.web.id, kali ini kita akan membahas bagaimana membuat Gaya Modern! Desain Tabel HTML dengan CSS, tabel sangatlah berguna untuk kita semua sebagai developer website. tabel memiliki banyak fungsi seperti menampilkan data siswa, data dosen, data mahasiswa , data penjualan dan banyak lagi. maka dari itu bagaimana membuat tabel yang elegan agar pengguna atau pengunjung tertarik kepada data yang kita tampilkan. Mari kita simak cara membuatnya yu!
Apa Itu Tabel?
Tabel adalah salah satu susunan data dan informasi yang memiliki baris kolom, Tabel sering kita gunakan untuk menampilkan informasi , data atau pengumuman kepada pengguna.
Fungsi tabel HTML adalah untuk mengorganisir dan menampilkan informasi secara terstruktur. Tabel memungkinkan kita untuk menyajikan data dalam format yang mudah dibaca dan dimengerti oleh pengguna.
Inilah Desain Tabel HTML CSS Gaya Modern
Membuat Tabel
Setelah kita mengetahui apa itu tabel, mari kita masuk ke materi intinya.
Siapkan terlebih dahulu text editor Anda agar pembuatan tabel lebih mudah. Setelah membuka text editor buatlah kode html index.html.
Masukan kode berikut di index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
<tr>
<th>Nama</th>
<th>Usia</th>
<th>Kota</th>
</tr>
<tr>
<td>Meria</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Laeli</td>
<td>25</td>
<td>London</td>
</tr>
<tr>
<td>Maia</td>
<td>35</td>
<td>Paris</td>
</tr>
</table>
</body>
</html>
Kita lihat hasil dari kode di atas, kurang lebih seperti ini:
Jika anda melihat tidak ada garisnya seperti ini, Anda hanya perlu melanjutkan tutorial ini ya hehe. jika anda tertarik tentang pembahasan tabel ini, jangan lupa membaca artikel kami yang ini:
Baca Juga : Table HTML dan Contohnya
Koneksi CSS
Selanjutnya anda buat file CSS di dalam satu folder index.html, Buatlah file style.css untuk menghubungkan html Anda tambahkan kode ini di dalam tag head. seperti ini kodenya:
<link rel=”stylesheet” type=”text/css” href=”style.css”>
Desain CSS
Sekarang tambahkan kode ini di dalam style.css yang sudah dibuat. untuk memulai mendesain tabel HTML Anda. tuliskan kode berikut ini:
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
tr:hover {
background-color: #f5f5f5;
}
th {
background-color: #4CAF50;
color: white;
}
Jika sudah save. dan lihat hasilnya kurang lebih seperti ini:
Bagus bukan? Jika anda tertarik untuk mempelajari css silahkan baca artikel kami tentang belajar CSS disini :
Baca Juga : Belajar CSS Dasar
Pembahasan Kode CSS
Width : Kode CSS ini untuk mengatur ukuran lebar tabel Anda, Anda bisa menyesuaikan dengan menggunakan %. Agar tabel terlihat Responsive.
Border-Collapse : Border collapse berfungsi untuk menyesuaikan garis tepi tabel agar terlihat sejajar.
Padding : Untuk mengatur ukuran dalam pada elemen html agar tidak terlihat kaku dan mentok kedalam tabel.
Text-align : Untuk mengatur posisi pada font atau tulisan yang ada di dalam tabel.
Border Bottom : Berfungsi untuk memberikan garis bawah pada kolom tabel.
Background-Color : Untuk memberikan warna pada tabel yang Anda buat.
Color : Untuk memberikan warna pada font atau tulisan pada kolom tabel.
Penutup
Itulah beberapa tutorial mengenai Desain Tabel HTML CSS Gaya Modern. Semoga bermanfaat dan Terimakasih sudah berkunjung!
Menyukai Kucing, Terkadang ngopi dikala Hujan, Menyukai Blog dan Website. Sekarang berfokus kepada SEO.
