Untuk membuat table kita harus tau terlebih dahulu tag-tag pada table berikut merupakan tag tag yang ada pada tabel:
Table: sebuah table dalam html terdiri dari sel sel didalam baris dan kolom
Tag <table> = digunakan untuk memulai tabel
Tag <tr> = table row, untuk membuat baris
Tag <td> = table data, untuk menginput data
Tag <th> = untuk header
jangan lupa tag untuk menutup </table>, </tr>, </td>
cara membuat border:
menggunakan css yaitu border
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</body>
</head>
</html>
untuk menghindari table yang dihasilkan double gunakan properti border collapse
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</body>
</head>
</html>
1. contoh baris kolom sederhana tanpa colspan rowspan
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<td>baris 1, kolom 1</td>
<td>baris 1, kolom 2</td>
</tr>
<tr>
<td>baris 2, kolom 1</td>
<td>baris 2, kolom 2</td>
</tr>
</table>
</body>
</html>
Tabel dengan atribut Rowspan dengan Colspan
colspan= untuk menggabungkan kolom
rowspan= untuk menggabungkan baris
angka pada "' menandakan jumlah kolom/baris yang digabung
<th rowspan="2">kolom</th>
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th rowspan="2">kolom</th>
</tr>
<tr>
<th rowspan="2">Baris</th>
<td>neti</td>
</tr>
<tr>
<td>lia</td>
</tr>
</table>
</body>
</html>
contoh table rowspan dan colspan dengan banyak data:
<!DOCTYPE html>
<html>
<head>
<title>Praktek Dasar html</title>
<style type="text/css">
table,th, td{
border: 1px solid black;
border-collaps: collapse; }
table{ width: 30%}
th, td{text-align:center;}
tr:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);}
th:nth-child(even),td:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);}
</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>202120965</td>
<td>Neti Amalia</td>
<td>30</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>2</td>
<td>202120967</td>
<td>Jeon Jungkook</td>
<td>30</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>3</td>
<td>202120968</td>
<td>Min yoongi</td>
<td>30</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>4</td>
<td>202120969</td>
<td>Kim namjoon</td>
<td>30</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>5</td>
<td>202120970</td>
<td>Irei Naoki</td>
<td>28</td>
<td>2</td>
<td>0</td>
</tr>
<tr>
<td>6</td>
<td>202120971</td>
<td>Sitomi</td>
<td>26</td>
<td>0</td>
<td>4</td>
</tr>
</table>
</body>
</html>
</html>
~2.jpg)
0 Komentar