Tabel HTML ~ KODELOVER

Contoh Tabel HTML
Nomor Nama Depan Nama Belakang
1 Budi Jackson 94
2 John Doe 80
3 Adam Johnson 67
4 Ujang Asep 50
Mendefinisikan Tabel HTML
Contoh
<table style = "width: 100%">
<tr>
    <td> Ujang </td>
    <td> Asep </td>
    <td> 50 </td>
</tr>
<tr>
    <td> Budi </td>
    <td> Jackson </td>
    <td> 94 </td>
</tr>
</table>

Contohnya menjelaskan:

Tabel didefinisikan dengan tag <table>.

Tabel dibagi ke dalam baris tabel dengan tag <tr>.

Baris tabel dibagi ke dalam data tabel dengan tag <td>.

Baris tabel juga dapat dibagi ke dalam judul tabel dengan tag <th>.
Catatan Data tabel <td> adalah wadah data tabel.
Mereka dapat berisi segala macam elemen HTML seperti teks, gambar, daftar, tabel lainnya, dll.
Tabel HTML dengan Atribut Border/Perbatasan

Jika tidak menentukan batas tabel, maka akan ditampilkan tanpa batas.

Perbatasan dapat ditambahkan dengan menggunakan atribut border:
Contoh
<table border = "1" style = "width: 100%">
<tr>
    <td> Ujang </td>
    <td> Asep </td>
    <td> 50 </td>
</tr>
<tr>
    <td> Budi </td>
    <td> Jackson </td>
    <td> 94 </td>
</tr>
</table>
Catatan Atribut border sedang dalam perjalanan keluar dari standar HTML! Lebih baik menggunakan CSS.

Untuk menambahkan batas, gunakan properti border CSS:
Contoh
tabel, th, td {
    border: black solid 1px;
}

Ingatlah untuk menentukan batas untuk tabel dan sel tabel.
Tabel HTML dengan Batas yang Rontok

Jika ingin perbatasan runtuh menjadi satu perbatasan, tambahkan border-collapse CSS:
Contoh
tabel, th, td {
    border: black solid 1px;
    border-collapse: collapse;
}
Tabel HTML dengan Padding Sel

Sel padding menentukan ruang antara konten sel dan perbatasannya.

Jika tidak menentukan padding, sel tabel akan ditampilkan tanpa padding.

Untuk mengatur padding, gunakan properti padding CSS:
Contoh
tabel, th, td {
    Border: black solid 1px;
    Perbatasan-runtuh: runtuh;
}
th, td {
    Padding: 15px;
}
Judul Tabel HTML

Judul tabel didefinisikan dengan tag <th>.

Secara default, semua browser utama menampilkan judul tabel sebagai huruf tebal dan terpusat:
Contoh
<table style = "width: 100%">
<tr>
    <th> nama depan </th>
    <th> nama belakang </th>
    <th> Poin </th>
</tr>
<tr>
    <td> Budi </td>
    <td> Jackson </td>
    <td> 94 </td>
</tr>
</table>

Untuk mensejajarkan judul tabel dengan benar, gunakan properti CSS text-align:
Contoh
Th {
    Text-align: left;
}
Tabel HTML dengan Border Spacing

Border spacing menentukan ruang antar sel.

Untuk mengatur jarak spasi untuk tabel, gunakan properti jarak-perbatasan CSS:
Contoh
table {
    border-spacing: 5px;
}
Catatan Jika table memiliki batas yang runtuh, jarak perbatasan tidak berpengaruh.
Sel Tabel yang Menghasilkan Banyak Kolom

Untuk membuat rentang sel lebih dari satu kolom, gunakan atribut colspan:
Contoh
<table style = "width: 100%">
<tr>
    <th> Nama </th>
    <th colspan = "2"> Telepon </th>
</tr>
<tr>
    <td> Bill Gates </td>
    <td> 555 77 854 </td>
    <td> 555 77 855 </td>
</tr>
</table>
Sel Tabel yang Menghasilkan Banyak Baris

Untuk membuat rentang sel lebih dari satu baris, gunakan atribut rowspan:
Contoh
<table style = "width: 100%">
<tr>
    <th> Nama: </th>
    <td> Bill Gates </td>
</tr>
<tr>
    <th rowspan = "2"> Telepon: </th>
    <td> 555 77 854 </td>
</tr>
<tr>
    <td> 555 77 855 </td>
</tr>
</table>
Tabel HTML Dengan Keterangan

Untuk menambahkan judul ke sebuah tabel, gunakan tag <caption>:
Contoh
<table style = "width: 100%">
<Caption> Tabungan bulanan </ caption>
<tr>
    <th> Bulan </th>
    <th> Tabungan </th>
</tr>
<tr>
    <td> Januari </td>
    <td> $ 100 </td>
</tr>
<tr>
    <td> Februari </td>
    <td> $ 50 </td>
</tr>
</table>
Catatan Tag <caption> harus segera dimasukkan setelah tag <table>.
Gaya Khusus untuk Satu Table

Untuk menentukan gaya khusus untuk tabel khusus, tambahkan atribut id ke tabel:
Contoh
<table id = "t01">
<tr>
    <th> nama depan </th>
    <th> nama belakang </th>
    <th> Poin </th>
</tr>
<tr>
    <td> Budi </td>
    <td> Jackson </td>
    <td> 94 </td>
</tr>
</table>
Sekarang dapat menentukan gaya khusus untuk tabel ini:
Tabel # t01 {
    width: 100%;
    Background-color: # f1f1c1;
}
Dan tambahkan lebih banyak gaya:
table #t01 tr: nth-child (even) {
    Background-color: #eee;
}
table #t01 tr: nth-child (ganjil) {
    Background-color: #fff;
}
Table #t01 th {
    color :white;
    Background-color: hitam;
}
Ringkasan

    Gunakan elemen HTML <table> untuk menentukan tabel
    Gunakan elemen HTML <tr> untuk menentukan baris tabel
    Gunakan elemen HTML <td> untuk menentukan data tabel
    Gunakan elemen HTML <th> untuk menentukan judul tabel
    Gunakan elemen HTML <caption> untuk menentukan judul tabel
    Gunakan properti border CSS untuk menentukan border
    Gunakan properti border-collapse CSS untuk menutup batas sel
    Gunakan properti padding CSS untuk menambahkan padding ke sel
    Gunakan properti text-align CSS untuk menyelaraskan teks sel
    Gunakan properti jarak-perbatasan CSS untuk mengatur jarak antar sel
    Gunakan atribut colspan untuk membuat span sel kolom banyak
    Gunakan atribut rowspan untuk membuat rentang sel banyak baris
    Gunakan atribut id untuk mendefinisikan satu tabel secara unik


Tag Tabel HTML
Deskripsi Tag
<table> Mendefinisikan sebuah tabel
<th> Mendefinisikan sebuah sel header dalam sebuah tabel
<tr> Mendefinisikan sebuah baris dalam sebuah tabel
<td> Mendefinisikan sebuah sel dalam sebuah tabel
<caption> Mendefinisikan caption tabel
<colgroup> Menentukan sekelompok satu atau lebih kolom dalam tabel untuk pemformatan
<col> Tentukan properti kolom untuk setiap kolom dalam elemen <colgroup>
<thead> Mengelompokkan konten header dalam sebuah tabel
<tbody> Mengelompokkan konten tubuh dalam sebuah tabel
<tfoot> Mengelompokkan isi footer dalam sebuah tabel

KODELOVER

Tabel HTML

Related Post