Tabel Contoh HTML
| Jumlah | Nama depan | Nama keluarga | poin |
|---|---|---|---|
| 1 | Eve | Jackson | 94 |
| 2 | John | Doe | 80 |
| 3 | Adam | Johnson | 67 |
| 4 | Jill | Smith | 50 |
Mendefinisikan Tabel HTML
Contoh
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table> Cobalah sendiri " Contoh menjelaskan:
Tabel didefinisikan dengan <table> tag.
Tabel dibagi menjadi baris tabel dengan <tr> tag.
Baris tabel dibagi menjadi data tabel dengan <td> tag.
Sebuah baris tabel juga dapat dibagi menjadi judul tabel dengan <th> tag.
Data tabel <td> adalah wadah data tabel.
Mereka dapat berisi segala macam elemen HTML seperti teks, gambar, daftar, tabel lain, dll
Sebuah Tabel HTML dengan Atribut Perbatasan
Jika Anda tidak menentukan perbatasan untuk meja, itu akan ditampilkan tanpa batas.
Sebuah perbatasan dapat ditambahkan dengan menggunakan border atribut:
Contoh
<table border="1" style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table> Cobalah sendiri " The border atribut pada jalan keluar dari standar HTML! Hal ini lebih baik menggunakan CSS.
Untuk menambahkan perbatasan, menggunakan properti perbatasan CSS:
Ingatlah untuk menentukan batas-batas untuk kedua tabel dan sel tabel.
Sebuah Tabel HTML dengan Borders diciutkan
Jika Anda ingin perbatasan runtuh ke dalam satu perbatasan, tambahkan CSS border-collapse :
Sebuah Tabel HTML dengan Sel Padding
Sel Padding menentukan ruang antara isi sel dan perbatasannya.
Jika Anda tidak menentukan bantalan, sel-sel tabel akan ditampilkan tanpa padding.
Untuk mengatur padding, gunakan CSS padding properti:
Contoh
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
} Cobalah sendiri " HTML Tabel Pos
Judul tabel didefinisikan dengan <th> tag.
Secara default, semua browser utama menampilkan judul tabel sebagai berani dan berpusat:
Contoh
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table> Cobalah sendiri " Untuk kiri menyelaraskan judul tabel, gunakan CSS text-align properti:
Sebuah Tabel HTML dengan Spasi Perbatasan
spasi perbatasan menentukan ruang antara sel-sel.
Untuk mengatur jarak perbatasan untuk tabel, gunakan CSS border-spacing properti:
Jika tabel telah runtuh perbatasan, perbatasan-jarak tidak berpengaruh.
Tabel Sel yang SPAN Banyak Kolom
Untuk membuat rentang sel lebih dari satu kolom, gunakan colspan atribut:
Contoh
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table> Cobalah sendiri " Tabel Sel yang SPAN Banyak Baris
Untuk membuat rentang sel lebih dari satu baris, gunakan rowspan atribut:
Contoh
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table> Cobalah sendiri " Sebuah Table HTML Dengan Caption
Untuk menambahkan keterangan ke meja, gunakan <caption> tag:
Contoh
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table> Cobalah sendiri " The <caption> tag harus dimasukkan segera setelah <table> tag.
Sebuah Gaya Khusus untuk One Table
Untuk menentukan gaya khusus untuk meja khusus, menambahkan id atribut ke meja:
Contoh
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>Sekarang Anda dapat menentukan gaya khusus untuk tabel ini:
table#t01 {
width: 100%;
background-color: #f1f1c1;
} Cobalah sendiri " Dan menambahkan lebih gaya:
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
} Cobalah sendiri " Bab Ringkasan
- Gunakan HTML <table> elemen untuk mendefinisikan tabel
- Gunakan HTML <tr> elemen untuk menentukan baris tabel
- Gunakan HTML <td> elemen untuk menentukan data tabel
- Gunakan HTML <th> elemen untuk menentukan meja pos
- Gunakan HTML <caption> elemen untuk mendefinisikan judul tabel
- Gunakan CSS border properti untuk menentukan perbatasan
- Gunakan CSS border-collapse properti runtuh batas sel
- Gunakan CSS padding properti untuk menambahkan padding untuk sel
- Gunakan CSS text-align properti untuk menyelaraskan teks sel
- Gunakan CSS border-spacing properti untuk mengatur jarak antara sel-sel
- Gunakan colspan atribut untuk membuat rentang sel banyak kolom
- Gunakan rowspan atribut untuk membuat rentang sel banyak baris
- Gunakan id atribut untuk mendefinisikan unik satu meja
Uji Diri dengan Latihan!
Latihan 1 » Latihan 2» Latihan 3 » Latihan 4» Latihan 5 » Latihan 6»
HTML Table Tag
| Menandai | Deskripsi |
|---|---|
| <table> | Mendefinisikan meja |
| <th> | Mendefinisikan sel header tabel |
| <tr> | Mendefinisikan baris dalam tabel |
| <td> | Mendefinisikan sel di tabel |
| <caption> | Mendefinisikan sebuah caption tabel |
| <colgroup> | Menentukan kelompok dari satu atau lebih kolom dalam sebuah tabel untuk memformat |
| <col> | Menentukan sifat kolom untuk setiap kolom dalam <colgroup> elemen |
| <thead> | Grup isi header dalam sebuah tabel |
| <tbody> | Grup isi tubuh dalam sebuah tabel |
| <tfoot> | Grup isi footer dalam sebuah tabel |