Belajar membuat tabel pada html
Pada HTML, Anda bisa membuat sebuah tabel pada html. Pada pembelajaran kali ini kita akan membuat tabel. Berikut list yang akan kita pelajari:
- Elemen
<table>Mendefinisikan sebuah tabel - Elemen
<tr>kepanjangan dari Table Row untuk membuat baris tabel - Elemen
<td>Kepanjangan dari Table Data untuk membuat sebuah isi tabel - Elemen
<th>Kepanjangan dari Table Heading untuk membuat sebuah isi judul tabel - Elemen
<caption>untuk mendefinisikan sebuah judul tabel - Elemen
<colgroup>Menentukan grup yang terdiri dari satu atau beberapa kolom - Elemen
<col>Menentukan properti kolom untuk setiap kolom dalam elemen - Elemen
<thead>Mengelompokkan konten header dalam sebuah tabel - Elemen
<tbody>Mengelompokkan konten isi dalam tabel - Elemen
<tfoot>Mengelompokkan konten footer dalam sebuah tabel
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Belajar membuat tabel</title>
</head>
<body>
<table>
<tr>
<th>Nama</th>
<th>Umur</th>
</tr>
<tr>
<td>Budi</td>
<td>25</td>
</tr>
<tr>
<td>Cecep</td>
<td>23</td>
</tr>
</table>
</body>
</html>
Hasilnya:
<th>dan<td>
Bisa berisi segala macam elemen html, teks, gambar, list dll
Memberi style pada tabel
Untuk lebih jelasnya. Anda bisa memberikan style dengan css agar tabel lebih menarik tampilannya.
Anda akan belajar css lebih dalam dilain waktu.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Belajar membuat tabel</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Nama</th>
<th>Umur</th>
</tr>
<tr>
<td>Budi</td>
<td>25</td>
</tr>
<tr>
<td>Cecep</td>
<td>23</td>
</tr>
</table>
</body>
</html>
Hasilnya:
Menggunakan atribut colspan
Anda bisa membuat rentang sel lebih dari satu kolom dengan menggunakan atribut colspan
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Belajar membuat tabel</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<table style="width:50%">
<tr>
<th>Nama</th>
<th colspan="2">Nomor Antrian</th>
</tr>
<tr>
<td>Budi</td>
<td>33</td>
<td>34</td>
</tr>
<tr>
<td>Cecep</td>
<td>40</td>
<td>41</td>
</tr>
</table>
</body>
</html>
Hasilnya:
Menggunakan atribut rowspan
Anda bisa membuat membuat rentang sel lebih dari satu baris dengan menggunakan atribut rowspan
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Belajar membuat tabel</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<table style="width:50%">
<tr>
<th>Name</th>
<td>Budi</td>
</tr>
<tr>
<th rowspan="2">Nomor Antrian</th>
<td>28</td>
</tr>
<tr>
<td>29</td>
</tr>
</table>
</body>
</html>
Hasilnya:
Menggunakan elemen caption
Anda bisa menambahkan caption teks ke tabel, dengan menggunakan elemen <caption>
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Belajar membuat tabel</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<table style="width:50%">
<caption>Daftar siswa baru</caption>
<tr>
<th>Nama</th>
<th>Umur</th>
</tr>
<tr>
<td>Budi</td>
<td>25</td>
</tr>
<tr>
<td>Cecep</td>
<td>23</td>
</tr>
</table>
</body>
</html>
Hasilnya:
Menggunakan Elemen <colgroup> dan <col>
Anda bisa memanfaatkan elemen <colgroup> untuk menentukan grup yang terdiri dari satu atau beberapa kolom dan elemen <col> untuk menentukan properti kolom pada setiap kolom dalam elemen
contoh:
<!DOCTYPE html>
<html>
<head>
<title>Belajar membuat tabel</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<table style="width:50%">
<colgroup>
<col span="2" style="background-color:green">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>Nama</th>
<th>Umur</th>
<th>Alamat</th>
</tr>
<tr>
<td>Budi</td>
<td>25</td>
<td>Jakarta</td>
</tr>
<tr>
<td>Cecep</td>
<td>23</td>
<td>Kalimantan</td>
</tr>
</table>
</body>
</html>
Hasilnya:
Menggunakan Elemen <thead>, <tbody> dan <tfoot>
Anda bisa memanfaatkan <thead>, <tbody> dan <tfoot> untuk membuat grup atau pengelompokan kontent.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Belajar membuat tabel</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
thead {
background-color: yellow;
}
tbody {
background-color: magenta;
}
tfoot {
background-color: green;
}
</style>
</head>
<body>
<table style="width:50%">
<thead>
<tr>
<th>Nama</th>
<th>Umur</th>
</tr>
</thead>
<tbody>
<tr>
<td>Budi</td>
<td>25</td>
</tr>
<tr>
<td>Cecep</td>
<td>23</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">www.hendky.com</td>
</tr>
</tfoot>
</table>
</body>
</html>
Hasilnya:
| Elemen | Kegunaanya |
|---|---|
| <table> | Mendefinisikan sebuah tabel |
| <tr> | Mendefinisikan sebuah baris tabel |
| <td> | Mendefinisikan sebuah isi tabel |
| <th> | Mendefinisikan sebuah isi judul tabel |
| <caption> | Mendefinisikan sebuah judul tabel |
| <colgroup> | Mendefinisikan grup yang terdiri dari satu atau beberapa kolom |
| <col> | Mendefinisikan properti kolom untuk setiap kolom dalam elemen |
| <thead> | Mengelompokkan konten header dalam sebuah tabel |
| <tbody> | Mengelompokkan isi konten dalam sebuah tabel |
| <tfoot> | Mengelompokkan konten footer dalam sebuah tabel |