Membuat Tabel Dengan CSS
Secara umum tabel adalah kumpulan data yang disusun berdasarkan baris dan kolom.
Kolom dan baris ini berfungsi untuk menunjukan data terkait keduanya. Dalam HTML tabel digunakan untuk menampilkan sebuah data pada halaman web supaya mudah untuk dibaca.
Membuat tabel pada HTML diawali dengan tag <table> untuk mendefinisikan sebuah elemen tabel. Kemudian diikuti dengan tag <tr> (table row) untuk membuat sebuah baris, tah <th> (table header) untuk membuat judul kolom dan tag <td> (table data) untuk membuat kolom data.
Tabel HTML Sederhana
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Latihan Tabel</title>
</head>
<body>
<table width="100%">
<tr>
<td>
Budi
</td>
<td>
Matematika
</td>
<td>
80
</td>
</tr>
<tr>
<td>
Ani
</td>
<td>
B. Indonesia
</td>
<td>
85
</td>
</tr>
</table>
</body>
</html>
Pada contoh diatas saya membuat sebuah tabel sederhana yang terdiri dari dua baris dan tiga kolom. Width digunakan untuk menentukan lebar tabel. Selain menggunakan atribut HTML untuk mengatur lebar tabel, anda juga dapat mengaturnya menggunakan CSS (style="width:nilai_lebar;").
Tabel dengan Border
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Latihan Tabel</title>
</head>
<body>
<table border="1px" style="width:50%;">
<tr>
<td>
Budi
</td>
<td>
Matematika
</td>
<td>
80
</td>
</tr>
<tr>
<td>
Ani
</td>
<td>
B. Indonesia
</td>
<td>
85
</td>
</tr>
</table>
</body>
</html>
Anda juga dapat menggunakan CSS untuk mengubah border tabel. Dengan CSS akan lebih memudahkan jika anda membuat tabel lebih dari satu. Dengan CSS anda bisa mengatur tampilan semua tabel hanya dengan satu baris kode CSS dibanding menggunakan atribut HTML yang harus ditulis berulang pada setiap elemen tabel.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Latihan Tabel</title>
<style>
table{
width: 50%;
}
table, td{
border: 1px solid blue;
}
</style>
</head>
<body>
<table>
<tr>
<td>
Budi
</td>
<td>
Matematika
</td>
<td>
80
</td>
</tr>
<tr>
<td>
Ani
</td>
<td>
B. Indonesia
</td>
<td>
85
</td>
</tr>
</table>
</body>
</html>
Table Border Collapse
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Latihan Tabel</title>
<style>
table{
width: 50%;
}
table, td{
border: 1px solid blue;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<td>
Budi
</td>
<td>
Matematika
</td>
<td>
80
</td>
</tr>
<tr>
<td>
Ani
</td>
<td>
B. Indonesia
</td>
<td>
85
</td>
</tr>
</table>
</body>
</html>
Table Heading
Membuat heading pada table HTML menggunakan tag <th>. Tulisan pada tag <th> akan tercetak tebal yang menandakan sebuah heading.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Latihan Tabel</title>
<style>
table{
width: 100%;
}
table,th, td{
border: 1px solid blue;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>
Nama
</th>
<th>
Mapel
</th>
<th>
Nilai
</th>
</tr>
<tr>
<td>
Budi
</td>
<td>
Matematika
</td>
<td>
80
</td>
</tr>
</table>
</body>
</html>
Table Span
colspan
Colspan fungsinya untuk menggabungkan beberapa kolom menjadi satu kolom.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Latihan Tabel</title>
<style>
table{
width: 100%;
}
table,th, td{
border: 1px solid blue;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>
Nama
</th>
<th colspan="2">
Alamat
</th>
</tr>
<tr>
<td>
Budi
</td>
<td>
Jl. Melati
</td>
<td>
Jakarta
</td>
</tr>
</table>
</body>
</html>
Pada contoh diatas dua kolom alamat pada baris heading dibuat menjadi satu kolom.
rowspan
Rowspan fungsinya untuk menyatukan beberapa baris menjadi satu baris.
contoh
<!DOCTYPE html>
<html>
<head>
<title>Latihan Tabel</title>
<style>
table{
width: 100%;
}
table,th, td{
border: 1px solid blue;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>
Nama
</th>
<td>
Budi
</td>
</tr>
<tr>
<th rowspan="2">
Alamat
</th>
<td>
Jl. Melati
</td>
</tr>
<tr>
<td>
Jakarta
</td>
</tr>
</table>
</body>
</html>
Table Caption (judul)
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Latihan Tabel</title>
<style>
table{
width: 100%;
}
table,th, td{
border: 1px solid blue;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<caption>Data Siswa</caption>
<tr>
<th>
Nama
</th>
<td>
Budi
</td>
</tr>
<tr>
<th rowspan="2">
Alamat
</th>
<td>
Jl. Melati
</td>
</tr>
<tr>
<td>
Jakarta
</td>
</tr>
</table>
</body>
</html>
Rangkuman
- tag HTML <table> untuk mendefinisikan elemen tabel.
- tag HTML <tr> untuk membuat baris dalam tabel.
- tag HTML <td> untuk membuat kolom atau isi data tabel.
- tag HTML <th> untuk membuat judul sebuah kolom atau baris.
- tag HTML <caption> untuk membuat judul tabel.
- kode CSS border untuk mengubah border atau garis tepi.
- kode CSS border-collapse untuk menyatukan menyatukan dua buah border.
- kode CSS padding untuk memberi jarak tepi antara border dengan konten atau isi kolom.
- atribut colspan untuk menyatukan beberapa kolom menjadi satu.
- atribut rowspan untuk menyatukan beberapa baris menjadi satu.
EmoticonEmoticon