Assalamu alaikum Wr Wb.
Dalam pertemuan kali ini, saya akan memaparkan mengenai membuat tabel pada HTML.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
table{
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,th{
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even){
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tr>
<th>No</th>
<th>Nama</th>
<th>Kelas</th>
</tr>
<tr>
<th>1</th>
<th>Allif</th>
<th>11</th>
</tr>
<tr>
<th>2</th>
<th>Revo</th>
<th>11</th>
</tr>
<tr>
<th>3</th>
<th>Shodiq</th>
<th>11</th>
</tr>
</table>
</body>
</html>
Hasil:
Mendefinisikan Tabel HTML
Tabel HTML didefinisikan dengan tag <table>.
Setiap baris tabel didefinisikan dengan tag <tr>. Sebuah header tabel didefinisikan dengan tag <th>. Secara default, judul tabel yang berani dan berpusat. Sebuah data / sel tabel didefinisikan dengan tag <td>.
Contoh
<!DOCTYPE html>
<html>
<body>
<table style="width: 100%">
<tr>
<td>Nama Depan</td>
<td>Nama Belakang</td>
<td>Usia</td>
</tr>
<tr>
<td>Allif</td>
<td>Sulthoni</td>
<td>17 Tahun</td>
</tr>
<tr>
<td>Revo</td>
<td>Alderi</td>
<td>18 Tahun</td>
</tr>
<tr>
<td>Muhammad</td>
<td>Shodiq</td>
<td>17 Tahun</td>
</tr>
</table>
</body>
</html>
Hasil:
Catatan : Tag <td> elemen adalah wadah data tabel.Mereka dapat berisi segala macam elemen HTML; teks, gambar, daftar, tabel lain,dll.
HTML Tabel - Menambahkan Sebuah Border
Jika Anda tidak menentukan perbatasan untuk meja, itu akan ditampilkan tanpa batas.
Sebuah perbatasan diatur menggunakan CSS properti border.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td{
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width: 100%">
<tr>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Usia</th>
</tr>
<tr>
<td>Allif</td>
<td>Sulthoni</td>
<td>17 Tahun</td>
</tr>
<tr>
<td>Revo</td>
<td>Alderi</td>
<td>18 Tahun</td>
</tr>
</table>
</body>
</html>
Hasil:
Ingatlah untuk menentukan batas-batas untuk kedua tabel dan sel tabel.
HTML Tabel - Border Runtuh
Jika Anda ingin perbatasan runtuh ke dalam satu perbatasan, tambahkan CSS properti border-collapse.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td{
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width: 100%">
<tr>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Usia</th>
</tr>
<tr>
<td>Allif</td>
<td>Sulthoni</td>
<td>17 Tahun</td>
</tr>
<tr>
<td>Revo</td>
<td>Alderi</td>
<td>18 Tahun</td>
</tr>
</table>
</body>
</html>
Hasil:
HTML Tabel - Menambahkan Sel Padding
Sel Padding menentukan jarak antara isi sel dan perbatasannya.
Jika Anda tidak menentukan bantalan, sel-sel tabel akan ditampilkan tanpa padding. Untuk mengatur padding, gunakan CSS properti padding.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td{
border: 1px solid black;
border-collapse: collapse;
}
th, td{
padding: 15px;
}
</style>
</head>
<body>
<table style="width: 100%">
<tr>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Usia</th>
</tr>
<tr>
<td>Allif</td>
<td>Sulthoni</td>
<td>17 Tahun</td>
</tr>
<tr>
<td>Revo</td>
<td>Alderi</td>
<td>18 Tahun</td>
</tr>
</table>
<p>Coba untuk menggunakan padding 5px.</p>
</body>
</html>
Hasil:
HTML Tabel - Heading Align-Kiri
Secara default, judul tabel yang berani dan berpusat.
Untuk menyelaraskan judul kiri tabel, gunakan CSS properti text-align.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
th {
text-align: left;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Usia</th>
</tr>
<tr>
<td>Allif</td>
<td>Sulthoni</td>
<td>17 Tahun</td>
</tr>
<tr>
<td>Revo</td>
<td>Alderi</td>
<td>18 Tahun</td>
</tr>
</table>
</body>
</html>
Hasil:
HTML Tabel - Menambahkan border-spacing
Spasi perbatasan menentukan jarak antara sel-sel.
Untuk mengatur jarak perbatasan untuk tabel,, gunakan CSS properti border-spacing.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
padding: 5px;
}
table {
border-spacing: 15px;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Usia</th>
</tr>
<tr>
<td>Allif</td>
<td>Sulthoni</td>
<td>17 Tahun</td>
</tr>
<tr>
<td>Revo</td>
<td>Alderi</td>
<td>18 Tahun</td>
</tr>
</table>
<p>Coba untuk menggunakan border-spacing 5px.</p>
</body>
</html>
Hasil:
HTML Tabel - Sel Span yang Banyak Kolom
Untuk membuat rentang sel lebih dari satu kolom, menggunakan colspan .
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Span 2 Kolom:</h2>
<table style="width:100%">
<tr>
<th>Nama</th>
<th colspan="2">No. Telp</th>
</tr>
<tr>
<td>Allif Sulthoni</td>
<td>082220690779</td>
<td>081227044299</td>
</tr>
</table>
</body>
</html>
Hasil:
HTML Tabel - Sel Span yang Banyak Baris
Untuk membuat rentang sel lebih dari satu baris, menggunakan rowspan.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Span 2 Baris:</h2>
<table style="width:100%">
<tr>
<th>Nama:</th>
<td>Allif Sulthoni</td>
</tr>
<tr>
<th rowspan="2">No.Telp:</th>
<td>082220690779</td>
</tr>
<tr>
<td>081227044299</td>
</tr>
</table>
</body>
</html>
Hasil:
HTML Tabel - Menambahkan Caption
Untuk menambahkan keterangan ke tabel, gunakan tag <caption>.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<table style="width:100%">
<caption>Penghasilan Bulan</caption>
<tr>
<th>Bulan</th>
<th>Penghasilan</th>
</tr>
<tr>
<td>Januari</td>
<td>Rp100000</td>
</tr>
<tr>
<td>Februari</td>
<td>Rp50000</td>
</tr>
</table>
</body>
</html>
Hasil:
Catatan: Tag <caption> harus dimasukkan segera setelah tag <table>.
Gaya Khusus Untuk Satu Tabel
Untuk menentukan gaya khusus untuk tabel khusus, menambahkan atribut id ke tabel.
Contoh
<table id="t01">
<tr>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Usia</th>
</tr>
<tr>
<td>Allif</td>
<td>Sulthoni</td>
<td>17 Tahun</td>
</tr>
</table>
Sekarang Anda dapat menentukan gaya khsusu untuk tabel ini:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td{
border: 1px solid black;
border-collapse: collapse;
}
th, td{
padding: 5px;
text-align: left;
}
table#t01{
width: 100%;
background-color: #f1f1c1;
}
</style>
</head>
<body>
<table style="width: 100%">
<tr>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Usia</th>
</tr>
<tr>
<td>Allif</td>
<td>Sulthoni</td>
<td>17 Tahun</td>
</tr>
<tr>
<td>Revo</td>
<td>Alderi</td>
<td>18 Tahun</td>
</tr>
</table>
<br>
<table id="t01">
<tr>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Usia</th>
</tr>
<tr>
<td>Allif</td>
<td>Sulthoni</td>
<td>17 Tahun</td>
</tr>
<tr>
<td>Revo</td>
<td>Alderi</td>
<td>18 Tahun</td>
</tr>
</table>
</body>
</html>
Hasil:
Dan menambahkan lebih gaya.
<!DOCTYPE html>
<html>
<head>
<style>
table {
width:100%;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color:#fff;
}
table#t01 th {
background-color: black;
color: white;
}
</style>
</head>
<body>
<table>
<tr>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Usia</th>
</tr>
<tr>
<td>Allif</td>
<td>Sulthoni</td>
<td>17 Tahun</td>
</tr>
<tr>
<td>Revo</td>
<td>Alderi</td>
<td>18 Tahun</td>
</tr>
<tr>
<td>Muhammad</td>
<td>Shodiq</td>
<td>17 Tahun</td>
</tr>
</table>
<br>
<table id="t01">
<tr>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Usia</th>
</tr>
<tr>
<td>Allif</td>
<td>Sulthoni</td>
<td>17 Tahun</td>
</tr>
<tr>
<td>Revo</td>
<td>Alderi</td>
<td>18 Tahun</td>
</tr>
<tr>
<td>Muhammad</td>
<td>Shodiq</td>
<td>17 Tahun</td>
</tr>
</table>
</body>
</html>
Hasil:
Kesimpulan
- Tag HTML <table> digunakan untuk mendefinisikan tabel.
- Tag HTML <tr> digunakan untuk menentukan baris tabel.
- Tag HTML <td> digunakan untuk menentukan data tabel.
- Tag HTML <th> digunakan untuk mendefinisikan tabel heading.
- Tag HTML <caption> digunakan untuk mendefinisikan judul tabel.
- Tag CSS border digunakan untuk menentukan perbatasan.
- Tag CSS border-collapse digunakan untuk menentukan batas sel runtuh.
- Tag CSS Padding digunakan untuk menambahkan padding untuk sel.
- Tag CSS text-align digunakan untuk menyelaraskan teks sel.
- Tag CSS border-spacing digunakan untuk mengatur jarak antara sel-sel.
- Tag colspan digunakan untuk membuat rentang sel banyak kolom.
- Tag rowspan digunakan untuk membuat rentang sel banyak baris.
- Tag id digunakan untuk mendefinsikan unik satu tabel.
REFERENSI
No comments:
Post a Comment