Tutorial ini menjelaskan Pengaturan Tabel Menggunakan CSS. Tutorial ini akan mengajarkan Anda cara mengatur sifat yang berbeda dari tabel HTML menggunakan CSS.
Tutorial ini menjelaskan Pengaturan Tabel Menggunakan CSS. Tutorial ini akan mengajarkan Anda cara mengatur sifat yang berbeda dari tabel HTML menggunakan CSS. Anda dapat mengatur berikut properti dari tabel :
- Border-collapse menentukan apakah browser harus mengontrol penampilan perbatasan yang berdekatan yang menyentuh satu sama lain atau apakah setiap sel harus mempertahankan gaya.
- Border-spacing menentukan lebar yang akan muncul antara sel tabel.
- Caption-side - teks disajikan dalam <caption> elemen. Secara default, ini diberikan atas tabel dalam dokumen. Anda menggunakan properti caption-side untuk mengontrol penempatan judul tabel.
- Empty-cell menentukan apakah perbatasan harus ditampilkan jika cell kosong.
- Table-layout memungkinkan browser untuk mempercepat tata letak meja dengan menggunakan sifat lebar pertama datang di untuk sisa kolom daripada harus memuat seluruh meja sebelum rendering itu.
Sekarang, kita akan melihat bagaimana menggunakan properti ini dengan contoh-contoh.
Properti border-collapse :
Properti ini dapat memiliki dua nilai runtuh dan terpisah. Contoh berikut menggunakan kedua nilai-nilai:
<html><head><style type="text/css">table.one {border-collapse:collapse;}table.two {border-collapse:separate;}td.a {border-style:dotted;border-width:3px;border-color:#000000;padding: 10px;}td.b {border-style:solid;border-width:3px;border-color:#333333;padding:10px;}</style></head><body><table class="one"><caption>Collapse Border Example</caption><tr><td class="a"> Cell A Collapse Example</td></tr><tr><td class="b"> Cell B Collapse Example</td></tr></table><br /><table class="two"><caption>Separate Border Example</caption><tr><td class="a"> Cell A Separate Example</td></tr><tr><td class="b"> Cell B Separate Example</td></tr></table></body></html>
Ini akan menghasilkan hasil sebagai berikut :
Properti border-spacing
Properti border-spacing menentukan jarak yang memisahkan sel yang berdekatan. perbatasan. Hal ini dapat mengambil nilai-nilai satu atau dua; harus satuan panjang.
Jika Anda memberikan satu nilai, itu akan berlaku untuk kedua perbatasan vertikal dan horisontal. Atau Anda dapat menentukan dua nilai, dalam hal ini, yang pertama mengacu pada spacing horisontal dan yang kedua dengan space vertikal -
CATATAN - Sayangnya, properti ini tidak bekerja di Netscape 7 atau IE 6.
<style type="text/css">/* If you provide one value */table.example {border-spacing:10px;}/* This is how you can provide two values */table.example {border-spacing:10px; 15px;}</style>
Sekarang mari kita memodifikasi contoh sebelumnya dan melihat efek:
<html><head><style type="text/css">table.one {border-collapse:separate;width:400px;border-spacing:10px;}table.two {border-collapse:separate;width:400px;border-spacing:10px 50px;}</style></head><body><table class="one" border="1"><caption>Separate Border Example with border-spacing</caption><tr><td> Cell A Collapse Example</td></tr><tr><td> Cell B Collapse Example</td></tr></table><br /><table class="two" border="1"><caption>Separate Border Example with border-spacing</caption><tr><td> Cell A Separate Example</td></tr><tr><td> Cell B Separate Example</td></tr></table></body></html>
Penyanyi akan menghasilkan hasil temuan sebagai berikut:
Properti caption-side
Properti caption-side memungkinkan Anda untuk menentukan di mana isi dari <caption> elemen harus ditempatkan dalam hubungan ke meja. Tabel yang mengikuti daftar nilai yang mungkin.
Properti ini dapat memiliki salah satu dari empat nilai atas, bawah, kiri atau kanan. Contoh berikut ini menggunakan setiap nilai.
CATATAN: Properti ini mungkin tidak bekerja dengan Browser IE Anda.
<html><head><style type="text/css">caption.top {caption-side:top}caption.bottom {caption-side:bottom}caption.left {caption-side:left}caption.right {caption-side:right}</style></head><body><table style="width:400px; border:1px solid black;"><caption class="top">This caption will appear at the top</caption><tr><td > Cell A</td></tr><tr><td > Cell B</td></tr></table><br /><table style="width:400px; border:1px solid black;"><caption class="bottom">This caption will appear at the bottom</caption><tr><td > Cell A</td></tr><tr><td > Cell B</td></tr></table><br /><table style="width:400px; border:1px solid black;"><caption class="left">This caption will appear at the left</caption><tr><td > Cell A</td></tr><tr><td > Cell B</td></tr></table><br /><table style="width:400px; border:1px solid black;"><caption class="right">This caption will appear at the right</caption><tr><td > Cell A</td></tr><tr><td > Cell B</td></tr></table></body></html>
Ini akan menghasilkan hasil sebagai berikut :
Properti empty-cells
Properti empty-cell menunjukkan apakah sel tanpa konten apapun harus memiliki perbatasan ditampilkan.
Properti ini dapat memiliki salah satu dari tiga nilai - show, menyembunyikan atau inherit.
Berikut ini adalah properti empty-cell yang digunakan untuk menyembunyikan perbatasan sel kosong di <table> elemen.
<html><head><style type="text/css">table.empty{width:350px;border-collapse:separate;empty-cells:hide;}td.empty{padding:5px;border-style:solid;border-width:1px;border-color:#999999;}</style></head><body><table class="empty"><tr><th></th><th>Title one</th><th>Title two</th></tr><tr><th>Row Title</th><td class="empty">value</td><td class="empty">value</td></tr><tr><th>Row Title</th><td class="empty">value</td><td class="empty"></td></tr></table></body></html>
Ini akan menghasilkan hasil sebagai berikut :
Properti Table-layout
Properti table-layout seharusnya untuk membantu Anda mengontrol bagaimana browser harus membuat atau lay out meja.
Properti ini dapat memiliki salah satu dari tiga nilai: tetap, otomatis atau inherit.
Contoh berikut menunjukkan perbedaan antara sifat ini.
CATATAN - Properti ini tidak didukung oleh banyak browser sehingga tidak bergantung pada properti ini.
<html><head><style type="text/css">table.auto {table-layout: auto}table.fixed{table-layout: fixed}</style></head><body><table class="auto" border="1" width="100%"><tr><td width="20%">1000000000000000000000000000</td><td width="40%">10000000</td><td width="40%">100</td></tr></table><br /><table class="fixed" border="1" width="100%"><tr><td width="20%">1000000000000000000000000000</td><td width="40%">10000000</td><td width="40%">100</td></tr></table></body></html>
Ini akan menghasilkan hasil sebagai berikut :
COMMENTS