Tabel merupakan elemen yang penting untuk menampilkan data yang ada di dalam database, jika ingin data yang di tampilkan dalam tabel terlihat menarik kita buat menggunakan css. Desain tabel yang menarik adalah perpaduan warna dan kerapian dari struktur tabel akan menarik bagi orang yang melihatnya.
Warna baris pada tabel biasanya menggunakan warna yang soft, karena yang ditonjolkan adalah isi datanya. Kombinasi warna soft ini biasanya menggunakan jenis warna monochromatic yaitu kombinasi warna tertentu dengan warna lain yang lebih muda.
Tutorial kali ini kita akan membuat tabel seperti di bawah ini:
Berikut script yang harus di buat
1. index.html
<html>
<head>
<title>Desain tabel sederhana menggunakan css</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Mendesain Tabel Menggunakan CSS</h1>
<h2>Contoh tabel</h2>
<table class="table1">
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
<th>Usia</th>
</tr>
<tr>
<td>1</td>
<td>Eko Yunanto</td>
<td>Jakarta selatan</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>Budi Luhur</td>
<td>Bandung</td>
<td>21</td>
</tr>
<tr>
<td>3</td>
<td>Novianto</td>
<td>Surabaya</td>
<td>30</td>
</tr>
<tr>
<td>4</td>
<td>Bagus Budianto</td>
<td>Bandung</td>
<td>30</td>
</tr>
<tr>
<td>5</td>
<td>Jopan</td>
<td>Papua</td>
<td>22</td>
</tr>
<tr>
<td>6</td>
<td>Agus</td>
<td>Surabaya</td>
<td>31</td>
</tr>
</table>
</body>
</html>
2. style.css
.table1 {
font-family: sans-serif;
color: #444;
border-collapse: collapse;
width: 50%;
border: 1px solid #f2f5f7;
}
.table1 {
border-collapse: collapse;
font-size: 14px;
}
.table1 tr th{
background: #35A9DB;
color: #fff;
font-weight: normal;
}
.table1, th, td {
padding: 8px 20px;
text-align: center-right;
}
.table1 tr:hover {
background-color: #f5f5f5;
}
.table1 tr:nth-child(even) {
background-color: #f2f2f2;
}
Jika kita ingin membuat variasi desain tabel dengan css harus di sesuaikan desain tabel seperti warna, border, caption agar meanrik sesuai thema web yang kita buat, selamat mencoba semoga berguna.
Tags
html
Artikelnya bagus kak sangat mudah dimengerti. Saya sudah mencobanya dan berhasil. Saya mau bertanya sedikit kak, apa bisa di dalam tabel diletakkan gambar? Jika bisa sintaks apa yang digunakan? Mohon di jawab ya pertanyaan saya kak. Saya tunggu jawabannya kak. Terus buat artikel yang menarik ya. Perkenalkan nama saya Tessa Hervika ayo kunjungi website kampus saya https://www.atmaluhur.ac.id/
ReplyDeleteAlhamdulillah Artikel ini sangat menarik dan mudah untuk dipahami, terutama bagi saya yang pemula ini, semoga dengan adanya artikel "Cara Membuat Tabel di HTML" ini membuat saya menjadi lebih paham lagi bagaimana caranya dan langkah-langkah apa saja yang akan kita kerjakan agar sesuai dengan yang kita inginkan.
ReplyDeleteTerimakasih atas Artikelnya. Terus buat karya-karya yang lebih menarik lagi ya
Perkenalkan Saya Mutia Amirah Rahim
Kunjungi Website Kampus Saya https://www.atmaluhur.ac.id/
Wah terima kasih ya min ,,seneng banget deh dengan adanya artikel ini dapat memudahkan saya sebagai pemula dalam belajar pemrograman web apalagi cara dalam desain tabel dalam HTML yang awalnya saya belum mengerti bagaimana cara nya tetapi dengan artikel ini sangat mempermudah saya dalam belajar ,,,semangat terus ya semoga dapat memberikan artikel yang lebih kreatif lagi dan bermanfaat bagi orang banyak.
ReplyDeleteoh ya Perkenalkan nama saya Miftahul Jannah Kunjungi website kampus saya https://www.atmaluhur.ac.id/
This comment has been removed by the author.
ReplyDeleteWah TerimaKasih telah membuat artikel ini dapat mudah dimengerti dan manfaat untuk smua orang, saya belum mengerti cara nya tetapi dengan artikel ini sangat memudahkan dalam belajar saya.. Perkenalkan nama saya Fadhiel Adha. Kunjungi website kampus saya di https://www.atmaluhur.ac.id/
ReplyDeleteTerima kasih kak, artikel nya menarik dan mudah di pahami, saya sebagai pemula mudah mengerti.
ReplyDeletePerkenalkan
NIM : 1922500134
NAMA : Elvin abel
Kelompok :SI2K
LINK KAMPUS https://www.atmaluhur.ac.id/