Mendefinisikan Tabel HTML
Contoh menjelaskan:
Tabel didefinisikan dengan tag <table>.
Tabel dibagi menjadi baris tabel dengan <tr> tag.
Tabel baris dibagi menjadi data tabel dengan <td> tag.
Sebuah baris tabel juga dapat dibagi menjadi judul tabel dengan <th> tag.
Tabel data <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, maka akan ditampilkan tanpa batas.
Perbatasan dapat ditambahkan dengan menggunakan atribut border:
Atribut border sedang dalam perjalanan dari standar HTML! Hal ini lebih baik menggunakan CSS.
Untuk menambahkan perbatasan, menggunakan properti perbatasan CSS:
<style>
table, th, td {border:1px solid black}
</style>
Ingatlah untuk menentukan batas untuk kedua tabel dan sel tabel.
Sebuah Tabel HTML dengan Borders Collapsed
Jika Anda ingin perbatasan runtuh ke dalam satu perbatasan, tambahkan CSS border-collapse:
<style>
table, th, td {border:1px solid black;
border-collapse:collapse;}
</style>
Sebuah Tabel HTML dengan sel Padding
tabel menentukan jarak antara isi sel dan perbatasannya.
Jika Anda tidak menentukan tabel, sel-sel tabel akan ditampilkan tanpa padding.
Untuk mengatur padding, menggunakan properti CSS padding:
<style>
table, th, td {
border:1px solid black;
border-collapse:collapse;
}
th, td {
padding:15px;
}
</style>
HTML Table Pos
Tabel judul didefinisikan dengan tag <th>.
Secara default, semua browser utama menampilkan judul tabel sebagai berani dan berpusat:
Ke kiri-menyelaraskan judul tabel, menggunakan properti text-align CSS:
th {
text-align:left;
}
Sebuah Tabel HTML dengan Spasi Perbatasan
Jarak perbatasan menentukan jarak antara sel-sel.
Untuk mengatur jarak perbatasan untuk tabel, menggunakan properti CSS border-spacing:
table{
border-spaccing:5px;
}
Tabel Sel yang span/menggabung dengan berbagai Kolom
Untuk membuat rentang sel lebih dari satu kolom, menggunakan atribut colspan:
Tabel Sel yang berkaitan dengan berbagai Baris
Untuk membuat rentang sel lebih dari satu baris, menggunakan atribut rowspan:
Sebuah Tabel HTML Dengan Caption
Untuk menambahkan keterangan ke meja, gunakan <caption> tag:
<Caption> tag harus dimasukkan segera setelah <table> tag.
Gaya yang berbeda untuk Tabel Berbeda
Sebagian besar contoh di atas menggunakan atribut gaya (width = "100%") untuk menentukan lebar meja masing-masing.
Hal ini membuat mudah untuk menentukan lebar yang berbeda untuk tabel yang berbeda.
Gaya dalam <head>, bagaimanapun, menentukan gaya untuk semua tabel di halaman.
Untuk menentukan gaya khusus untuk meja khusus, menambahkan atribut id ke meja:
Sekarang Anda dapat menentukan gaya yang berbeda untuk tabel ini:
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 judul tabel
- Gunakan HTML <caption> elemen untuk mendefinisikan judul tabel
- Menggunakan properti padding CSS untuk menentukan perbatasan
- Menggunakan properti CSS border-collapse runtuh batas sel
- Menggunakan properti CSS padding untuk menambahkan padding untuk sel
- Menggunakan properti CSS text-align untuk menyelaraskan teks sel
- Menggunakan properti CSS border-jarak untuk mengatur jarak antara sel-sel
- Gunakan atribut colspan untuk membuat rentang sel banyak kolom
- Gunakan atribut rowspan untuk membuat rentang sel banyak baris
- Menggunakan atribut id untuk secara unik menentukan satu tabel
0 komentar:
Posting Komentar