Dulu sekitar tahun 2000-an sebelum standar CSS diterapkan pada setiap web browser, kebanyakan para web developer menggunakan tabel untuk mengatur tata letak sebuah halaman web. Namun untuk sekarang setelah adanya CSS, penerapan table HTML untuk layout tampilan halaman web sudah tidak disarankan kembali. Kamu sangat disarankan untuk menggunakan CSS saat mengatur tampilan halaman web.
Umumnya saat kamu menampilkan suatu data yang terstruktur dari database, kamu akan menampilkannya dalam bentuk tabel bukan? HTML sebagai bahasa markup telah menyediakan elemen table yang bisa digunakan saat kamu ingin membuat tabel. Kamu tidak perlu khawatir, karena untuk membuat tabel cukup mudah kok bahkan bisa kurang dari 15 menit.
“Belajar disaat orang lain tidur, bekerja sementara yang lain bermalas-malasan, mempersiapkan disaat orang lain bermain, dan bermimpi sementara lainnya sedang berharap” (William Arthur Ward)
Sebelum itu mari kenali terlebih dahulu apa itu tabel. Tabel pada dasarnya digunakan untuk mengelompokkan suatu data secara terstruktur yang terdiri dari baris, kolom dan sel. Baris, kolom dan sel pada suatu tabel ini sangat membantu dalam melihat informasi keterkaitan di dalamnya.
Memahami Elemen HTML dalam Membuat Tabel
Ketika kamu membuat tabel dengan HTML ada beberapa tag atau elemen HTML yang harus kamu ketahui. Akan tetapi pada dasarnya kamu sudah bisa membuat tabel dengan hanya menggunakan 3 elemen HTML berikut :
- Elemen digunakan untuk mendefinisikan pembuatan tabel
- Elemen
- digunakan untuk mendefinisikan pembuatan baris pada tabel
- Elemen
- digunakan untuk membungkus konten bagian judul atau kepala tabel
- Elemen
- digunakan untuk membungkus konten bagian isi atau tubuh dari tabel
- Elemen
- digunakan untuk membungkus konten bagian kaki atau bawah dari tabel
Daripada kamu bingung dengan elemen-elemen tersebut, mari kita praktikkan saja langsung dengan menggunakan 3 elemen yang umum digunakan dalam membuat tabel.
Pertama silakan buat file html baru. Beri nama file html tersebut sesuai selera atau dapat kita beri nama “index.html”. Silakan perhatikan contoh kode berikut dan salin ke dalam file index.html.
digunakan untuk membuat kolom atau sel di setiap baris pada tabel Seiring dengan perkembangan dan kebutuhan akan tabel, HTML juga menyediakan elemen-elemen opsional lain dalam pembuatan tabel seperti berikut :
- Elemen
digunakan untuk mendefinisikan header di dalam tabel - Elemen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mengenal Tabel HTML</title>
</head>
<body>
<table border="1">
<tr>
<td>Baris ke 1 - Kolom ke 1</td>
<td>Baris ke 1 - Kolom ke 2</td>
</tr>
<tr>
<td>Baris ke 2 - Kolom ke 1</td>
<td>Baris ke 2 - Kolom ke 2</td>
</tr>
</table>
</body>
</html> |
Pada kode di atas terdapat atribut border dalam tag table, atribut border tersebut berfungsi untuk memberikan garis pada tabel. Sedangkan angka 1 di dalam atribut border merupakan nilai ketebalan garis yang akan ditampilkan, semakin besar nilai tersebut maka semakin tebal garis yang ditampilkan.
Hasil dari kode program di atas akan seperti berikut :
Menggabungkan Sel pada Tabel HTML
Saat membuat tabel, terkadang kita dihadapkan akan kebutuhan untuk menggabungkan beberapa sel menjadi satu. Untuk menggabungkan beberapa sel menjadi satu pada suatu tabel, HTML menyediakan beberapa atribut yang bisa kamu gunakan seperti berikut :
- Atribut rowspan digunakan untuk menggabungkan baris pada tabel
- Atribut colspan digunakan untuk menggabungkan kolom pada tabel
Atribut tersebut bisa diterapkan pada tag td maupun th. Perhatikan contoh kode program berikut :
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mengenal Tabel HTML</title>
</head>
<body>
<table border="1">
<tr>
<th rowspan="2">Nama</th>
<th colspan="3">Nilai</th>
</tr>
<tr>
<th>Kimia</th>
<th>Fisika</th>
<th>Biologi</th>
</tr>
<tr>
<td>Robby</td>
<td>76</td>
<td>80</td>
<td>81</td>
</tr>
<tr>
<td>Rendi</td>
<td>84</td>
<td>70</td>
<td>75</td>
</tr>
<tr>
<td>Alfian</td>
<td>96</td>
<td>70</td>
<td>71</td>
</tr>
</table>
</body>
</html> |
Pada kode di atas atribut rowspan memiliki nilai 2 artinya baris yang akan digabung berjumlah 2 baris. Sedangkan atribut colspan memiliki nilai 3 artinya kolom yang akan digabung berjumlah 3 kolom. Kode di atas juga terdapat tag th yang berfungsi sebagai kepala tabel. Saat ditampilkan data yang ada dalam tag th akan memiliki efek tebal atau bold dibandingkan dengan data yang ada di tag td.
Hasil dari kode program diatas seperti berikut :
Memberikan Warna dan Jarak Antar Sel pada HTML
Pada contoh kode program sebelumnya, tabel yang dihasilkan terkesan saling berdekatan antar satu sel dengan sel yang lain. Untuk mengatasi hal itu HTML telah menyediakan atribut cellpadding yang bisa kamu gunakan untuk mengatur jarak antar sel. Atribut cellpadding ini bisa diterapkan langsung pada tag table seperti berikut :
1
2
|
<th bgcolor="grey" rowspan="2">Nama</th>
<th bgcolor="yellow" colspan="3">Nilai</th> |
Setelah ditambahkan atribut cellpadding pada tag table dan atribut bgcolor pada tag th maka tabel tadi akan tampil seperti pada gambar di bawah ini :
Menerapkan kode CSS untuk Desain Tabel
Sebelumnya sudah kita bahas bagaimana membuat garis dan memberikan warna serta jarak pada tabel dengan menggunakan atribut yang ada di HTML. Untuk saat ini setelah kehadiran CSS penggunaan atribut tersebut dalam mendesain tabel sudah tidak disarankan lagi. Kamu disarankan menggunakan kode CSS dalam membuat garis dan memberikan warna serta jarak pada tabel.
Memasukan kode CSS pada halaman web bisa dengan membuat berkas CSS terpisah atau disimpan dalam elemen head pada HTML. Usahakan jangan disimpan pada elemen HTML yang lain karena bisa membuat kode program terlihat tidak rapi. Selain itu juga dengan menyimpan kode CSS pada file terpisah atau di dalam elemen head akan membuat kode CSS tersebut dapat digunakan secara berulang-ulang.
Kode CSS dapat ditulis dengan mendefinisikan terlebih dahulu tag HTML apa yang akan kamu ubah atau beri efek CSS. Lebih jelasnya silakan kamu perhatikan contoh kode program berikut.
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
50
51
52
53
54
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mengenal Tabel HTML</title>
<style>
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}
th {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<table>
<tr>
<th rowspan="2">Nama</th>
<th colspan="3">Nilai</th>
</tr>
<tr>
<th>Kimia</th>
<th>Fisika</th>
<th>Biologi</th>
</tr>
<tr>
<td>Robby</td>
<td>76</td>
<td>80</td>
<td>81</td>
</tr>
<tr>
<td>Rendi</td>
<td>84</td>
<td>70</td>
<td>75</td>
</tr>
<tr>
<td>Alfian</td>
<td>96</td>
<td>70</td>
<td>71</td>
</tr>
</table>
</body>
</html> |
Contoh kode program di atas telah memiliki kode CSS. Kode CSS diletakan di dalam elemen style yang disimpan di dalam elemen head. Elemen style ini berfungsi untuk menandakan bahwa kode yang ada di dalamnya merupakan kode CSS yang digunakan untuk mendesain halaman web.
Lalu properti CSS yang ada pada kode program di atas berfungsi untuk apa aja? Mari kita ulas sekilas mengenai properti CSS yang digunakan pada kode program di atas.
- Properti border-collapse: collapse; digunakan untuk menciutkan garis tabel menjadi satu garis
- Properti border: 1px solid black; digunakan untuk memberikan garis beserta ketebalan garis dan warna dari garis tersebut
- Properti padding: 10px; digunakan untuk mengontrol jarak konten yang ada pada tabel
- Properti background-color: #4CAF50; digunakan untuk memberikan warna latar belakang biru
- Properti color: white; digunakan untuk memberikan warna putih pada teks
Hasil dari kode program tersebut maka tabel yang ditampilkan akan seperti berikut :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<style>
table {
border-collapse: collapse;
width: 100%;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}
th {
background-color: rgb(19, 110, 170);
color: white;
}
tr:hover {background-color: #f5f5f5;}
</style> |
Hasilnya tabel tersebut akan terlihat seperti pada gambar di bawah ini.
Tidak ada komentar:
Posting Komentar