Mempelajari Tabel dalam HTML!! dengan Atribut Rowspan & Colspan
HALO, kali ini mari kita mempelajari Format Tabel pada Website
Tabel adalah tampilan informasi dalam bentuk sel yang teridir atas baris dan kolom. Untuk membuat tabel di HTML ada 3 Tag utama nih, yaitu sebagai berikut:
- Tag <table> Digunakan untuk memulai tabel.
- Tag <tr> Singkatan dari table row, digunakan untuk membuat baris dari tabel.
- Tag <td> Singkatan dari table data, digunakan untuk menginput data ke tabel.
Rowspan dan Colspan adalah atribut khusus untuk Merge Cell(menggabungkan sel yang dipilih ke dalam satu sel) yang disediakan oleh HTML, berikut adalah contoh bentuk kode penggunaannya:
- Colspan} Penggabungan beberapa kolom sel menjadi satu sel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Penggunaan Colspan pada Tabel di HMTL</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="2">Data</th>
</tr>
<tr>
<th>Nama</th>
<th>NIS</th>
</tr>
<tr>
<td>Fattah Kalamukti</td>
<td>202120952</td>
</tr>
<tr>
<td>Naufal Fadhil</td>
<td>20180401</td>
</tr>
<tr>
<td>Abishar Thoriq</td>
<td>20180402</td>
</tr>
</table>
</body>
</html>
- Rowspan} Penggabungan beberapa baris sel menjadi satu baris sel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Penggunaan Rowspan pada Tabel di HTML</title>
</head>
<body>
<table border="1">
<tr>
<th>No </th>
<th>Nama </th>
<th>Hobi</th>
</tr>
<tr>
<td rowspan="2">13</td>
<td rowspan="2">Fattah Kalamukti</td>
<td>Menonton</td>
</tr>
<tr>
<td>Membaca</td>
</tr>
</table>
</body>
</html>
- Penggabungan Colspan dan Rowspan
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Colspan dan Rowspan pada Tabel di HTML</title>
<style type="text/css">
table,th, td{
border: 1px solid black;
border-collaps: collapse; }
table{ width: 30%}
th, td{text-align:center;}
</style>
</head>
<body>
<table>
<tr>
<th rowspan="2">no</th>
<th rowspan="2">NIM</th>
<th rowspan="2">Nama</th>
<th colspan="3">Absensi</th>
</tr>
<tr>
<td>Hadir</td>
<td>sakit</td>
<td>ijin</td>
</tr>
<tr>
<td>1</td>
<td>202150952</td>
<td>Fattah Kalamukti</td>
<td>30</td>
<td>0</td>
<td>0</td>
</tr>
</table>
</body>
</html>
baru sampai sini yang bisa saya sampaikan, terima kasih telah mampir dan membaca artikel ini, semoga bisa bermanfaat untuk kita semua. sampai jumpa!!
Penulis: Fattah Kalamukti
Comments
Post a Comment