Tujuan pelajaran: Keakraban dengan properti tabel dan prinsip tata letak tabel CSS
Mari kita lihat properti tabel CSS dasar
berbatasan
Sebuah properti dipertimbangkan dalam satu dan mencakup beberapa properti pada saat yang sama:
- GAYA BATAS
- LEBAR BATAS
- BATAS-WARNA
Ada juga aturan kolektif:
table.collapse (border-collapse: collapse;) table.separate (border-collapse: terpisah;)
Hasil:
lebar dan tinggi
(tinggi dan lebar meja)
Nilai:
Contoh:
perataan teks
(kesejajaran horizontal)
Nilai:
- tengah (terpusat)
- kiri (rata kiri)
- kanan (rata kanan)
- membenarkan (lebar)
vertikal-align
(penjajaran vertikal)
Nilai:
- dasar (baseline)
- sub (sebagai subindeks)
- super (sebagai superskrip)
- atas (atas)
- tengah (tengah)
- bawah (tepi bawah)
- % (dari ketinggian spasi baris)
Contoh:
lapisan
(pelapis meja)
latar belakang-warna (latar belakang)
warna (warna teks)
Tata letak tabel CSS
Karena banyaknya properti tabel dan variasi dalam desainnya, tabel lama adalah beberapa standar untuk tata letak halaman web. Jika Anda membuat batas tabel tidak terlihat, maka Anda dapat menggunakan sel individualnya sebagai blok halaman yang terpisah: header, menu, footer, dll.
Tapi ini tidak sepenuhnya benar, karena setiap tag memiliki tujuannya sendiri, dan tabel tidak seharusnya berfungsi untuk tata letak halaman. Namun, kurangnya alternatif mendorong para desainer untuk menggunakan metode tata letak jenis ini.
Sekarang ada cara lain - menggunakan lapisan, yang secara bertahap menggantikan tabel dalam pekerjaan seperti ini dengan halaman web. Namun, bahkan saat ini, beberapa desainer berhasil menggunakan tata letak tabel.
Tata letak spreadsheet dua kolom
Salah satu metode tata letak yang paling umum adalah dua kolom, mis. halaman dibagi menjadi dua bagian.
Contoh: atur bingkai utama halaman dalam dua kolom: yang pertama - dengan ukuran tetap, yang kedua - untuk sisa area browser. Jalankan tugas menggunakan gaya CSS ()
Pertunjukan:
| </ kepala> <tubuh> <tabel id = "maket" cellpacing = "0"> <tr> <td id = "kiri"> 1</ td> <td id = "kanan"> 2</ td> </ tr> </ meja> ... |
| 1 | 2 |
Hasil:
Contoh: mengatur latar belakang sel yang berbeda (untuk memisahkan dua kolom satu sama lain) dan mengatur jarak antar kolom (pemisah)
Pertunjukan:
Mari tambahkan properti gaya baru:
/ * untuk sel kiri * / td # kiri (lebar: 200px; latar belakang: #ccc; batas: 1px hitam pekat; / * tandai batas untuk sementara * /) / * untuk sel kanan * / td # kanan (latar belakang: # fc3; perbatasan: 1px hitam pekat; / * untuk sementara menunjukkan batas * /) / * untuk pemisah * / #razdel (lebar: 10px; / * Spasi antar kolom * /)
Bersama:
| </ kepala> <tubuh> <tabel id = "maket" cellpacing = "0"> <tr> <td id = "kiri"> 1</ td> <td id = "razdel"> <td id = "kanan"> 2</ td> </ tr> </ meja> |
| 1 | 2 |
Sel baru telah ditambahkan untuk pemisah.
Hasil:
Contoh: buat pemisah antar kolom tabel menggunakan garis putus-putus batas sel yang berdekatan
Pertunjukan:
Mari tambahkan properti perbatasan baru untuk sel:
/ * untuk sel kiri * / td # kiri (lebar: 200px; latar belakang: #ccc; / * Warna latar belakang kolom kiri * / / * baru * / batas-kanan: 1px putus-putus # 000; / * Opsi batas putus-putus kanan * / )
Bersama:
| </ kepala> <tubuh> <tabel id = "maket" cellpacing = "0"> <tr> <td id = "kiri"> 1</ td> <td id = "kanan"> 2</ td> </ tr> </ meja> |
| 1 | 2 |
Hasil:
Tata letak spreadsheet tiga kolom
Ada konsep tata letak tetap atau "cair".
CSS tata letak tetap
- Menggunakan tata letak tetap lebar seluruh tabel diatur dalam piksel, lalu, terlepas dari resolusi monitor dan jendela browser, tabel akan selalu memiliki lebar yang sama.
- Pada kasus ini lebar kolom yang tersisa juga harus diperbaiki.
- Dimungkinkan untuk tidak menentukan lebar satu sel, maka itu akan dihitung secara otomatis berdasarkan dimensi sel yang tersisa dan seluruh tabel.
Contoh: buat template halaman dengan tiga kolom. Gunakan tata letak tabel tetap:
- kolom kiri - 150 piksel;
- kolom tengah - 400 piksel;
Pertunjukan:
| </ kepala> <tubuh> <tabel id = "maket" cellpacing = "0"> <tr> <td id = "kiri"> 1</ td> <td id = "pusat"> 2</ td> <td id = "kanan"> 3</ td> </ tr> </ meja> |
| 1 | 2 | 3 |
Hasil:
Mockup karet
- Lebar Meja saat menggunakan desain "karet" atur dalam% dari lebar jendela browser... Itu. ketika jendela browser berubah, ukuran tabel juga berubah.
- Lebar semua sel bisa dipasang dalam persen.
- Pilihan kedua adalah ketika lebar beberapa sel didirikan dalam persen, A beberapa dalam piksel.
Penting: Jumlah lebar semua kolom harus 100%, terlepas dari lebar tabel.
Contoh:
- kolom kiri - 20%;
- kolom tengah - 40%;
- kolom kanan - 40%;
Atur latar belakang untuk kolom dan pisahkan kolom secara visual dengan batas.
Pertunjukan:
| </ kepala> <tubuh> <tabel id = "maket" cellpacing = "0"> <tr> <td id = "kiri"> 1</ td> <td id = "pusat"> 2</ td> <td id = "kanan"> 3</ td> </ tr> </ meja> |
| 1 | 2 | 3 |
Hasil:
Pertimbangkan opsi kedua, ketika lebar kolom tengah dipilih secara otomatis oleh browser; contohnya adalah gambar : 
Contoh: buat template halaman dengan tiga kolom. Gunakan tata letak tabel yang cair:
- kolom kiri - 150 piksel;
- kolom tengah - 40%;
- kolom kanan - 200 piksel;
Atur latar belakang untuk kolom dan pisahkan kolom secara visual dengan batas.
Pertunjukan:
| </ kepala> <tubuh> <tabel id = "maket" cellpacing = "0"> <tr> <td id = "kiri"> 1</ td> <td id = "pusat"> 2</ td> <td id = "kanan"> 3</ td> </ tr> </ meja> |
| 1 | 2 | 3 |
Hasil:
Hasilnya akan kurang lebih sama, hanya "peregangan" yang akan terjadi karena kolom tengah.
Menggunakan tabel bersarang dalam tata letak yang lancar
Jika lebar dua kolom diatur dalam persentase dan yang ketiga dalam piksel, Anda tidak akan bisa bertahan dengan satu tabel. Jadi, jika lebar seluruh tabel adalah 100 persen, kolom pertama adalah 200 piksel, dan kolom yang tersisa adalah 20 persen, maka perhitungan sederhana menunjukkan bahwa ukuran kolom pertama adalah 60 persen. Dalam hal ini, browser tidak akan menerima nilai yang ditentukan dalam piksel, dan ukurannya akan diatur dalam persen. 
- Tabel asli dibuat dengan dua sel. Lebar tabel diatur sebagai persentase.
- Untuk sel kiri(kolom pertama) lebar diatur dalam piksel.
- Lebar sel kanan(dasar untuk pembicara lain) tidak ditentukan... Tabel kedua disisipkan di dalam sel ini, juga terdiri dari dua sel.
- Lebar sel tabel bersarang ditetapkan sebagai persentase..
- Lebar meja bagian dalam harus diatur ke 100 persen sehingga tabel ini mengambil semua ruang kosong di tabel luar.
- Lebar kolom tengah dan kanan dihitung relatif terhadap lebar sel, bukan tabel luar secara keseluruhan.
Contoh: buat template halaman dengan tiga kolom. Gunakan tata letak yang lancar dengan tabel bersarang:
- kolom kiri - 150 piksel;
- kolom tengah - 60%;
- kolom kanan - 40%;
Mengatur latar belakang untuk kolom.
Pertunjukan:
Atribut tag cellpadding dan cellpacing diperlukan di sini, sehingga tidak ada "celah" di antara tabel. Jadi, kami paling banyak belajar denganmu tindakan sederhana yang dapat diimplementasikan dengan batas tabel. Dan sekarang meja terlihat jauh lebih estetis. Namun, pengisian sel secara langsung bertumpu pada batas. Anda dapat dengan mudah memperbaikinya hanya dengan membuat indentasi sel di tabel HTML. Dan kemudian teks di dalam bingkai, di dalam sel, akan lebih mudah dibaca. Untuk membuat indentasi dalam sel, gunakan atribut bantalan sel untuk tanda Dalam hal ini, indentasi diatur menggunakan properti lapisan... Dengan bantuannya, tidak akan sulit untuk membuat indentasi jika perlu, yaitu, atas, kanan, bawah atau kiri, masing-masing menggunakan salah satu properti ini: padding-top, padding-kanan, padding-bottom dan padding-kiri. Anda dapat mengatur berapa banyak piksel yang harus diindentasi. Berikut adalah contoh di mana margin bawah akan 20
piksel, dan sisanya akan menjadi 10
... Seperti CSS-kode akan terlihat seperti ini: Td (padding: 10px; padding-bottom: 20px;) Dan kode gaya lengkap pada tahap ini: Tabel (border: solid 1px blue; border-collapse: collapse;) td (border: solid 1px blue; padding: 10px; padding-bottom: 20px;) Hasil di browser: Biasanya, tugas yang terkait dengan pembuatan tabel dapat diselesaikan menggunakan tag, atribut, dan properti yang memungkinkan Anda membuat batas, indentasi dalam sel, dan juga mengatur latar belakang warna sel itu sendiri. Indentasi dalam tabel tidak hanya di dalam sel. Mereka juga dapat hadir di antara sel-sel itu sendiri. Ada dua cara untuk membuat indentasi antar sel: Harus ditekankan bahwa spasi-batas ditulis untuk tabel secara keseluruhan, sedangkan properti lapisan meresepkan langsung untuk sel. Mari kita lihat sebuah contoh: Tabel (border: solid 1px blue; border-collapse: terpisah; border-spacing: 5px;) td (border: solid 1px blue; padding: 10px; padding-bottom: 20px;) Dan hasil yang dihasilkan: Mari kita tetapkan segera bahwa Anda tidak boleh mencoba membuat indentasi seperti itu menggunakan perbatasan-runtuh: runtuh... Memang, saat menggunakan opsi ini, sel "menempel" satu sama lain. Dan untuk memisahkannya satu sama lain, Anda harus menggunakan border-collapse: terpisah... Penting untuk dipahami bahwa nilai ini adalah default. Dan itu hanya digunakan untuk menunjukkan dengan jelas bagaimana masalah ini diselesaikan. Jika kita menghapus baris ini, maka hasil dalam bentuk sel yang terletak terpisah satu sama lain akan disimpan. CSS memungkinkan Anda untuk mengatur tidak hanya gaya batas tabel, tetapi juga gaya batas sel individual. Karena setiap sel memiliki batasnya sendiri, batas antara sel yang berdekatan menjadi dua kali lipat. Tetapi dimungkinkan untuk menggabungkan batas sel tetangga menjadi satu. Ada properti border-collapse untuk ini. Ini mengambil nilai-nilai: border-collapse: terpisah - setiap sel memiliki batasnya sendiri (default) border-collapse: runtuh - perbatasan umum border-collapse: mewarisi - nilainya diambil dari elemen induk Misalnya, mari buat tabel dan atur bingkai untuk sel semua tabel yang akan ada di halaman. Pertama, jangan mengubah apa pun untuk melihat bagaimana tabel akan terlihat: Gaya: 1 Setelah menambahkan bingkai ke sel tabel, terlihat bahwa isi sel terlalu dekat dengan tepi. Anda dapat menggunakan properti padding untuk menambahkan spasi putih di antara tepi sel dan isinya: Th, td (padding: 7px;) Cobalah" Ukuran meja tergantung pada isinya, tetapi situasi sering muncul ketika meja terlalu sempit dan perlu diregangkan. Lebar dan tinggi tabel dapat diubah menggunakan properti lebar dan tinggi, mengatur dimensi yang diinginkan baik ke tabel itu sendiri atau ke sel: Tabel (lebar: 70%;) th (tinggi: 50px;) Cobalah " Secara default, teks di sel header tabel rata tengah, dan teks di sel normal rata kiri, menggunakan properti perataan teks Anda bisa mengontrol perataan horizontal teks. Properti CSS perataan vertikal memungkinkan Anda untuk mengontrol perataan vertikal konten teks. Secara default, teks disejajarkan secara vertikal ke tengah sel. Perataan vertikal dapat diganti dengan salah satu nilai untuk properti perataan vertikal: Saat memindai tabel besar yang berisi banyak baris dengan jumlah besar informasi, mungkin sulit untuk melacak data mana yang termasuk dalam baris tertentu. Untuk membantu pengguna menavigasi, Anda dapat menggunakan dua warna latar belakang yang berbeda secara bergantian. Untuk membuat efek yang dijelaskan, Anda dapat menggunakan pemilih kelas, menambahkannya ke setiap baris kedua tabel:
Menambahkan atribut kelas ke setiap baris kedua adalah tugas yang membosankan. Pseudo-class: nth-child telah ditambahkan di CSS3 untuk menyelesaikan masalah ini cara alternatif... Efek pergantian sekarang dapat dicapai secara eksklusif melalui CSS tanpa harus mengubah markup HTML dokumen. Dengan pseudo-class: n-child dimungkinkan untuk memilih semua baris tabel ganjil atau genap menggunakan salah satu dari kata kunci: genap (genap) atau ganjil (ganjil): Tr: anak ke-n (ganjil) (warna latar: # EAF2D3;) Coba" Cara lain untuk meningkatkan keterbacaan data tabular adalah dengan mengubah warna latar belakang baris ketika Anda mengarahkan kursor mouse ke atasnya. Ini akan membantu menyoroti konten tabel yang diinginkan dan meningkatkan persepsi visual data. Menerapkan efek ini sangat sederhana, untuk ini Anda perlu menambahkan: hover pseudo-class ke pemilih baris tabel dan mengatur warna latar belakang yang diinginkan: Tr: hover (background-color: #E0E0FF;) Cobalah" Menyejajarkan tabel HTML ke tengah hanya dimungkinkan jika lebar tabel kurang dari lebar elemen induknya. Untuk menyelaraskan tabel di tengah, Anda perlu menggunakan properti margin, mengaturnya setidaknya dua nilai: nilai pertama akan bertanggung jawab untuk margin luar tabel di bagian atas dan bawah, dan yang kedua - untuk perataan tengah otomatis : Tabel (margin: 10px otomatis;) Cobalah" Jika Anda memerlukan margin yang berbeda di bagian atas dan bawah tabel, maka Anda dapat mengatur properti margin ke tiga nilai: yang pertama akan bertanggung jawab untuk margin atas, yang kedua untuk perataan horizontal, dan yang ketiga untuk margin bawah: Tabel (margin: 10px otomatis 30px;) Kami telah mempertimbangkan banyak metode elemen penataan gaya pada halaman seperti informasi teks, tautan, gambar, judul, tetapi semua ini belum cukup. Dalam artikel saya, saya sering menggunakan elemen HTML seperti tabel, karena dalam kebanyakan kasus mereka adalah membantu mensistematisasikan informasi penting dan mempermudah penyajiannya. Dalam artikel ini, saya akan memperkenalkan Anda pada seluk-beluk penataan tabel HTML, dan Anda akan mempelajari properti CSS baru yang dirancang untuk mencapai tujuan ini. HTML Hypertext Markup Language memberi kami sejumlah besar peluang untuk mengikat gaya CSS ke sepuluh tag unik yang dirancang untuk bekerja dengan tabel, saya sarankan untuk mengulanginya sebelum mempelajari lebih lanjut: Dalam contoh ini, kami: Hasil dari contoh kita: Setelah contoh di atas, Anda mungkin telah memperhatikan bahwa kami memiliki celah di antara semua sel dalam tabel. Mari kita lihat cara menghilangkan celah di antara sel tabel, atau menambahnya. Untuk mengatur jarak antara batas sel yang berdekatan, Anda harus menggunakan properti CSS - spasi batas. Dalam contoh ini, kami: Saya menarik perhatian Anda pada fakta bahwa jika hanya satu nilai panjang yang ditentukan dalam properti border-spacing, maka itu menunjukkan jarak, baik secara horizontal maupun vertikal, dan jika dua nilai panjang ditentukan, maka yang pertama menentukan jarak horizontal , dan vertikal kedua. Jarak antara batas sel yang berdekatan dapat ditentukan dalam satuan CSS (px, cm, em, dll.). Nilai negatif tidak diperbolehkan. Hasil dari contoh kita: Anda dapat mengatakan: - jadi, kita menghilangkan jarak antar sel menggunakan properti border-spacing dengan nilai 0, tapi mengapa kita sekarang memiliki batas sel yang berpotongan? Batas ganda terbentuk karena fakta bahwa batas bawah satu sel ditambahkan ke batas atas sel yang ada di bawahnya, situasi serupa terjadi di sisi sel dan ini logis dari sudut pandang tampilan tabel, tapi untungnya ada cara untuk memberitahu browser bahwa kita tidak ingin melihat perilaku nakal seperti batas sel. Untuk melakukan ini, Anda perlu menggunakan properti CSS border-collapse. Anehnya, menggunakan properti border-collapse dengan nilai collapse adalah jalan terbaik bagaimana Anda dapat menghilangkan celah di antara sel dan tidak mendapatkan batas ganda di antara mereka. Pertimbangkan perbandingan perilaku border saat menggunakan properti border-spacing dengan nilai 0 dan properti border-collapse dengan nilai collapse: Dalam contoh ini, kami: Hasil dari contoh kita: Menggunakan CSS, Anda dapat mengatur apakah akan menampilkan batas dan latar belakang sel kosong dalam tabel atau tidak. Properti sel kosong bertanggung jawab atas perilaku ini, yang secara default, seperti yang mungkin Anda perhatikan dari contoh sebelumnya, menampilkan sel kosong. Mari kita beralih ke sebuah contoh: Untuk memahami cara kerja properti sel kosong dari contoh ini sangat sederhana, jika disetel untuk disembunyikan, maka sel kosong dan latar belakang di dalamnya akan disembunyikan, jika disetel untuk ditampilkan (default), maka akan ditampilkan. Mari kita lihat properti sederhana lainnya untuk menata tabel - sisi keterangan, yang mengatur posisi keterangan tabel (di atas atau di bawah tabel). Secara default, properti sisi teks diatur ke atas, yang menempatkan teks di atas tabel. Untuk menempatkan judul di bawah tabel, Anda perlu menggunakan properti dengan nilai bawah. Mari kita lihat contoh penggunaan properti ini: Dalam contoh ini, kami telah membuat dua kelas yang mengontrol posisi header tabel. Kelas satu ( .topKeterangan) menempatkan judul tabel di atasnya, kami menerapkannya ke tabel pertama, dan kelas kedua ( .keterangan bawah) menempatkan judul tabel di bawahnya, kami menerapkannya ke tabel kedua. Kelas .topKeterangan memiliki properti sisi teks default dan dibuat untuk tujuan demonstrasi. Hasil dari contoh kita: Dalam kebanyakan kasus, saat bekerja dengan tabel, Anda perlu menyesuaikan perataan konten di dalam sel header dan data. Properti perataan teks digunakan untuk perataan horizontal yang serupa dengan informasi teks apa pun. Kami membahas penggunaan properti ini untuk teks sebelumnya di artikel "". Untuk mengatur perataan konten dalam sel, Anda perlu menggunakan kata kunci khusus dengan properti perataan teks. Mari kita perhatikan penerapan kata kunci dari properti ini dalam contoh berikut. Dalam contoh ini, kami telah membuat empat kelas, yang mengatur perataan horizontal yang berbeda dalam sel dan menerapkannya ke baris tabel. Nilai dalam sel cocok dengan nilai properti perataan teks Hasil dari contoh kita: Selain perataan horizontal, Anda juga bisa menentukan perataan vertikal di sel tabel menggunakan properti perataan vertikal. Harap dicatat bahwa saat bekerja dengan sel tabel, hanya nilai * berikut dari properti ini yang digunakan: *
- Nilai sub, super, text-top, text-bottom, length, dan% yang diterapkan ke sel tabel akan berperilaku seolah-olah menggunakan nilai dasar. Mari kita lihat contoh penggunaan: Dalam contoh ini, kami telah membuat empat kelas, yang mengatur perataan vertikal berbeda dalam sel dan menerapkannya ke baris tabel. Nilai dalam sel cocok dengan nilai properti perataan vertikal yang diterapkan ke baris tersebut. CSS menggunakan algoritma tata letak tabel otomatis browser secara default. Pada kasus ini lebar kolom diatur oleh konten sel tanpa putus terluas. Algoritma ini bisa lambat dalam beberapa kasus, karena browser harus membaca semua konten dalam tabel sebelum menentukan tata letak akhirnya. Untuk mengubah jenis tata letak tabel oleh browser dengan otomatis pada tetap, Anda harus menggunakan properti CSS tata letak tabel yang disetel ke tetap. Dalam hal ini, penempatan horizontal hanya bergantung pada dari lebar tabel dan lebar kolom, dan bukan dari isi sel. Browser mulai menampilkan tabel segera setelah baris pertama diterima. Akibatnya, algoritme tetap memungkinkan Anda membuat tata letak tabel seperti itu lebih cepat daripada menggunakan versi otomatis. Saat bekerja dengan tabel besar, Anda dapat menggunakan algoritme tetap untuk meningkatkan kinerja. Mari kita lihat penerapan properti ini dengan contoh berikut: Dalam contoh ini, kami: Kami telah menyentuh sebagian metode penataan baris dan kolom tabel dalam artikel "". Dalam artikel ini, kita melihat penggunaan kelas semu grup yang memungkinkan Anda untuk mengganti gaya baris dalam tabel menggunakan nilai bahkan (jujur) dan aneh (aneh), atau dengan dasar rumus matematika. Mari kita tinjau kembali teknik sebelumnya dan jelajahi cara baru untuk menata baris dan kolom dalam tabel. Mari kita beralih ke contoh. Dalam contoh ini, kami: Hasil dari contoh kita: Mari beralih ke contoh berikutnya, di mana kita akan melihat opsi untuk menata baris tabel. Dalam contoh ini, kami: Hasil dari contoh kita: Beras. 153 Contoh Penataan Baris dalam Tabel Contoh berikut menunjukkan cara menerapkan pembulatan sudut ke sel tabel (properti). Dalam contoh ini, kami: Hasil dari contoh kita: Contoh berikut menyentuh penggunaan elemen HTML Dalam contoh ini, kami: Hasil dari contoh kita: Nah, dan contoh terakhir, yang cukup sulit untuk dipahami dan membutuhkan pengetahuan lanjutan tentang CSS, karena menyentuh topik masa depan yang direncanakan untuk studi terperinci dalam kerangka kursus ini. Dalam contoh sebelumnya, kami menyadari bahwa dengan elemen HTML Dalam contoh ini, kami: Hasil dari contoh kita: Jika pada tahap studi ini Anda tidak memahami proses elemen pemosisian, maka jangan berkecil hati, ini adalah topik yang sulit untuk dipahami, yang juga tidak kami pertimbangkan, tetapi kami pasti akan mempertimbangkannya di artikel berikutnya dari artikel ini. tutorial "Memosisikan elemen dalam CSS". Selesaikan Kegiatan Praktik sebelum melanjutkan ke topik berikutnya: Jika Anda mengalami kesulitan menyelesaikan latihan, Anda selalu dapat membuka contoh di jendela terpisah dan memeriksa halaman untuk melihat CSS apa yang digunakan. 2016-2020 Denis Bolshakov, Anda dapat mengirim komentar dan saran tentang pekerjaan situs ke situs [email protected] |
