Table, th, td (style-border: solid; border-width: 1px; border-collapse: collapse; padding: 2px;) th (tinggi: 28px; latar belakang-warna: # f892dc; warna: putih; sempadan-warna: hitam;) .ts1 (warna latar: #ffeffb;)

Pandangan pantas

Lebar dan Tinggi Jadual

Menggunakan sifat CSS lebar Anda boleh menetapkan lebar jadual.

Pada dasarnya, lebarnya ditetapkan piksel atau %

Tab1 (lebar: 100%;). Tab2 (lebar: 70%;). Tab3 (lebar: 300 piksel;)

Pandangan pantas

Harta CSS ketinggian membolehkan anda mengatur ketinggian meja. Ketinggian terutamanya ditunjukkan dalam pikseltetapi cm dan em juga boleh digunakan.

Tab1 (tinggi: 200px;). Tab2 (tinggi: 7cm;)

Pandangan pantas

Hiasan sempadan

Untuk menggayakan sempadan meja dalam CSS, gunakan harta tanah sempadan.

Table, th, td (gaya sempadan: padat; warna sempadan: hijau; lebar sempadan: 1px;)

Pandangan pantas

Nota: harta sempadan tidak unik untuk jadual; ia boleh digunakan dengan unsur apa pun. Harta ini akan dibincangkan secara terperinci kemudian dalam tutorial ini.

Harta runtuh sempadan

Jadual dalam contoh di atas mempunyai batas dua kerana jadual itu sendiri dan selnya (elemen th dan td) mempunyai sempadannya sendiri.

Harta tanah runtuh sempadan membolehkan anda menyambungkan sempadan jadual dan sel. Sempadan yang bersambung biasanya kelihatan lebih kemas dan lebih cantik.

Table, th, td (gaya sempadan: padat; warna sempadan: hijau; lebar sempadan: 1px; sempadan-runtuh: runtuh;)

Pandangan pantas

Penjajaran teks jadual

Menggunakan harta tanah selaras teks Anda boleh meluruskan teks secara mendatar dalam sel jadual. Teks boleh diselaraskan:

• Jajaran kiri (nilai kiri)
• Betul
• Pusat

Tab1 (text-align: right;) .tab2 (text-align: left;) .tab3 (text-align: center;)

Pandangan pantas

Menggunakan harta tanah menegak-sejajar Anda boleh meluruskan teks sel jadual secara menegak. Teks boleh diselaraskan:

• Di sempadan atas (atas)
• Pusat (tengah)
• Bawah

Atas (vertical-align: top;). Mid (vertical-align: tengah;). Bot (vertical-align: bottom;)

Pandangan pantas

Mengemas harta tanah

Menggunakan harta tanah pembalut Anda boleh menetapkan jumlah lekukan antara sempadan sel dan isinya.

# tab1 td (padding: 10px;) # tab2 td (padding: 5px;) # tab3 td (padding: 0px;)

Pandangan pantas

Buat sendiri

Latihan 1 ulangi jadual dalam editor:

Lebar meja adalah 700 piksel. Baris pertama setinggi 70 piksel. Batas jadual dan sel dihubungkan.

Teks sel selaras atas	Teks sel berpusat	Teks sel selaras bawah	Teks sel berpusat
Ketebalan sempadan ini sel ialah 2 piksel	Ketebalan sempadan ini sel ialah 3 piksel	Ketebalan sempadan ini sel ialah 4 piksel	Ketebalan sempadan ini sel ialah 1 piksel
Teks sel sejajar dengan tepi kiri	Teks sel sejajar dengan tepi kanan	Teks sel berpusat

Sila aktifkan JavaScript untuk digunakan

Tujuan pelajaran: Keakraban dengan sifat jadual dan prinsip susun atur jadual CSS

Mari lihat sifat jadual CSS asas

sempadan

Harta tanah dipertimbangkan dalam satu dan merangkumi beberapa harta pada masa yang sama:

• GAYA Sempadan
• BIDANG-LENGKAP (LUAR BATAS)
• WARNA SULIT (WARNA Sempadan)

Terdapat juga peraturan kolektif:

table.collapse (border-runtuh: runtuh;) table.separate (sempadan-runtuh: terpisah;)

Keputusan:

lebar dan tinggi
(tinggi dan lebar meja)

Nilai:

Contoh:

selaras teks
(penjajaran mendatar)

Nilai:

• tengah (berpusat)
• kiri (penjajaran kiri)
• kanan (sejajar kanan)
• membenarkan (lebar)

menegak-sejajar
(penjajaran menegak)

Nilai:

• garis dasar (garis dasar)
• sub (sebagai subindeks)
• super (sebagai superskrip)
• atas (atas)
• tengah (tengah)
• bawah (tepi bawah)
• % (dari ketinggian jarak garis)

Contoh:

pembalut
(pelapik meja)

warna latar (latar belakang)
warna (warna teks)

Susun atur jadual CSS

Oleh kerana sebilangan besar sifat jadual dan variasi reka bentuknya, jadual telah lama menjadi beberapa standard untuk susun atur halaman web. Sekiranya anda membuat sempadan jadual tidak kelihatan, maka anda boleh menggunakan sel-selnya sebagai blok halaman yang berasingan: tajuk, menu, footer, dll.

Tetapi ini tidak sepenuhnya betul, kerana setiap tag mempunyai tujuannya sendiri, dan jadual tidak seharusnya berfungsi untuk susun atur halaman. Walau bagaimanapun, kekurangan alternatif mendorong pereka untuk menggunakan kaedah susun atur jenis ini.

Sekarang ada cara lain - menggunakan lapisan, yang secara beransur-ansur mengganti jadual dalam jenis kerja ini dengan laman web. Namun, walaupun pada masa kini, sebilangan pereka berjaya menggunakan susun atur meja.

Susun atur hamparan dua lajur

Salah satu kaedah susun atur yang paling biasa adalah dua lajur, iaitu halaman terbahagi kepada dua bahagian.

Biasanya sebelah kiri adalah menu dan elemen tambahan, dan sebelah kanan adalah yang utama untuk kandungan utama.

Dalam kes ini, lebar sisi kiri ditetapkan ke nilai tertentu, iaitu sukar, dan sebelah kanan mengambil bahagian lain dari halaman.

Dalam kes ini, anda perlu menetapkan lebar keseluruhan keseluruhan jadual (tag jadual) dalam peratus hingga properti lebar (100%), dan untuk sel pertama (tag td) tetapkan lebar (juga sifat lebar) dalam piksel atau persen.

Contoh: tetapkan bingkai utama halaman dalam dua lajur: yang pertama - dengan ukuran tetap, yang kedua - untuk seluruh kawasan penyemak imbas. Laksanakan tugas dengan menggunakan gaya CSS ()

Persembahan:

</ kepala\u003e <badan\u003e <jadual id \u003d "maket" sel ruang \u003d "0"\u003e <tr\u003e <td id \u003d "kiri"\u003e1</ td\u003e <td id \u003d "betul"\u003e2</ td\u003e </ tr\u003e </ jadual\u003e ...

1

2

...

Keputusan:

Sekarang mari kita cuba memisahkan dua lajur jadual secara visual antara satu sama lain.

Contoh: tetapkan latar belakang sel yang berbeza (untuk memisahkan dua lajur antara satu sama lain) dan tetapkan jarak antara lajur (pemisah)

Persembahan:
Mari tambahkan sifat gaya baru:

/ * untuk sel kiri * / td # kiri (lebar: 200 piksel; latar belakang: #ccc; sempadan: 1 px hitam pekat; / * tunjukkan sempadan buat sementara waktu * /) / * untuk sel kanan * / td # kanan (latar belakang: # fc3; sempadan: 1 px hitam pekat; / * menunjukkan sempadan buat sementara waktu * /) / * untuk pemisah * / #razdel (lebar: 10 piksel; / * Jarak antara lajur * /)

Bersama:

</ kepala\u003e <badan\u003e <jadual id \u003d "maket" sel ruang \u003d "0"\u003e <tr\u003e <td id \u003d "kiri"\u003e1</ td\u003e <td id \u003d "razdel"\u003e <td id \u003d "betul"\u003e2</ td\u003e </ tr\u003e </ jadual\u003e

1

2

Sel baru telah ditambahkan untuk pemisah.
Keputusan:

Anda juga boleh menjadikan pemisah antara lajur menjadi kurang menonjol. Untuk ini kita akan menggunakan gaya sempadan.

Contoh: buat pemisah antara lajur jadual menggunakan sempadan putus sel bersebelahan

Persembahan:
Mari tambahkan sifat sempadan baru untuk sel:

/ * untuk sel kiri * / td # kiri (lebar: 200 piksel; latar belakang: #ccc; / * Warna latar lajur kiri * / / * baru * / sempadan-kanan: 1 px putus-putus # 000; / * Pilihan sempadan putus-putus kanan * / )

Bersama:

</ kepala\u003e <badan\u003e <jadual id \u003d "maket" sel ruang \u003d "0"\u003e <tr\u003e <td id \u003d "kiri"\u003e1</ td\u003e <td id \u003d "betul"\u003e2</ td\u003e </ tr\u003e </ jadual\u003e

1

2

Keputusan:

Susun atur hamparan tiga lajur

Terdapat konsep susun atur tetap atau "bendalir".

CSS susun atur tetap

• Menggunakan susun atur tetap lebar keseluruhan jadual ditetapkan dalam piksel, dan kemudian, tanpa mengira resolusi monitor dan tetingkap penyemak imbas, jadual akan selalu mempunyai lebar yang sama.
• Dalam kes ini lebar lajur yang tinggal juga harus diperbaiki.
• Anda boleh meninggalkan lebar satu sel, maka ia akan dikira secara automatik berdasarkan dimensi sel yang tinggal dan keseluruhan jadual.

Contoh: buat templat halaman dengan tiga lajur. Gunakan susun atur jadual tetap:

• lajur kiri - 150 piksel;
• lajur tengah - 400 piksel;

Persembahan:

</ kepala\u003e <badan\u003e <jadual id \u003d "maket" sel ruang \u003d "0"\u003e <tr\u003e <td id \u003d "kiri"\u003e1</ td\u003e <td id \u003d "tengah"\u003e2</ td\u003e <td id \u003d "betul"\u003e3</ td\u003e </ tr\u003e </ jadual\u003e

1

2

3

Keputusan:

Susun atur getah

• Lebar Jadual semasa menggunakan reka bentuk "getah" tetapkan% lebar tetingkap penyemak imbas... Jadi apabila tetingkap penyemak imbas berubah, ukuran jadual juga berubah.
• Lebar semua sel boleh dipasang dalam peratusan.
• Pilihan kedua ialah bila lebar beberapa sel ditubuhkan dalam peratusan, dan sebilangan dalam piksel.

Penting: Jumlah lebar semua lajur mestilah 100%, tanpa mengira lebar jadual.

Contoh:

• lajur kiri - 20%;
• lajur tengah - 40%;
• lajur kanan - 40%;

Tetapkan latar belakang lajur dan pisahkan lajur secara visual dengan sempadan.

Persembahan:

</ kepala\u003e <badan\u003e <jadual id \u003d "maket" sel ruang \u003d "0"\u003e <tr\u003e <td id \u003d "kiri"\u003e1</ td\u003e <td id \u003d "tengah"\u003e2</ td\u003e <td id \u003d "betul"\u003e3</ td\u003e </ tr\u003e </ jadual\u003e

1

2

3

Keputusan:

Pertimbangkan pilihan kedua, apabila lebar lajur tengah dipilih secara automatik oleh penyemak imbas; contohnya ialah gambar:

Contoh: buat templat halaman dengan tiga lajur. Gunakan susun atur jadual cecair:

• lajur kiri - 150 piksel;
• lajur tengah - 40%;
• lajur kanan - 200 piksel;

Tetapkan latar belakang lajur dan pisahkan lajur secara visual dengan sempadan.

Persembahan:

</ kepala\u003e <badan\u003e <jadual id \u003d "maket" sel ruang \u003d "0"\u003e <tr\u003e <td id \u003d "kiri"\u003e1</ td\u003e <td id \u003d "tengah"\u003e2</ td\u003e <td id \u003d "betul"\u003e3</ td\u003e </ tr\u003e </ jadual\u003e

1

2

3

Keputusan:
Hasilnya akan hampir sama, hanya "regangan" yang akan berlaku disebabkan oleh lajur tengah.

Menggunakan jadual bersarang dalam susun atur cecair

Sekiranya lebar dua lajur ditetapkan dalam bentuk peratusan, dan yang ketiga dalam piksel, anda tidak boleh mendapatkannya dengan satu jadual. Jadi, jika lebar keseluruhan jadual adalah 100 peratus, lajur pertama adalah 200 piksel, dan lajur selebihnya adalah 20 peratus, maka pengiraan sederhana menunjukkan bahawa ukuran lajur pertama adalah 60 peratus. Dalam kes ini, penyemak imbas tidak akan menerima nilai yang ditentukan dalam piksel, dan ukurannya akan ditetapkan sebagai peratusan.

• Jadual asal dibuat dengan dua sel. Lebar jadual ditetapkan sebagai peratusan.
• Untuk sel kiri (lajur pertama) lebar ditetapkan dalam piksel.
• Lebar sel kanan (asas untuk pembesar suara lain) tidak dinyatakan... Jadual kedua dimasukkan di dalam sel ini, juga terdiri daripada dua sel.
• Lebar sel jadual bersarang ditetapkan sebagai peratusan.
• Lebar meja dalaman mesti ditetapkan hingga 100 peratussupaya jadual ini mengambil semua ruang kosong di meja luar.
• Lebar lajur tengah dan kanan relatif terhadap lebar sel, bukan meja luar secara keseluruhan.

Contoh: buat templat halaman dengan tiga lajur. Gunakan susun atur cecair dengan jadual bersarang:

• lajur kiri - 150 piksel;
• lajur tengah - 60%;
• lajur kanan - 40%;

Tetapkan latar belakang lajur.

Persembahan:

dan (contoh 4).

Contoh 4. Membuat zebra

1 2 3 Atribut tag sel padding dan cellpacing diperlukan di sini, sehingga tidak ada "jurang" antara jadual. Keputusan: Banyak webmaster percaya bahawa menggunakan jadual HTML dalam templat adalah amalan yang tidak baik. Tetapi dalam tutorial ini, kita hanya akan merangkumi jadual CSS. Apakah perbezaan antara jadual HTML dan CSS? Adakah saya perlu menggunakan jadual CSS? Sekiranya demikian, bagaimana? Cara membuat jadual CSS Model jadual CSS didasarkan pada model jadual HTML4 dan disokong dengan baik oleh penyemak imbas. Dalam kedua-dua model, struktur jadual wujud selari dengan persembahan visual. Unsur utama struktur adalah tali. Baris ditentukan secara jelas, dan lajur bergantung pada bagaimana baris dan sel ditakrifkan. Anda mungkin pernah menggunakan jadual HTML sebelum ini. Sekiranya demikian, anda tidak akan mempunyai masalah untuk membuat jadual CSS. Setiap elemen jadual HTML mempunyai setara CSS. Satu-satunya perbezaan adalah bahawa tidak ada perbezaan antara td dan th dalam varian CSS. Berikut adalah senarai elemen jadual HTML dan nilai CSS yang sesuai. Table (display: table) tr (display: table-row) thead (display: table-header-group) tbody (display: table-row-group) tfoot (display: table-footer-group) col (paparan: table- kolum) kumpulan kumpulan (paparan: jadual-lajur-kumpulan) td, th (paparan: meja-sel) kapsyen (paparan: kapsyen meja) Kapsyen boleh diletakkan di bahagian atas atau bawah meja menggunakan harta sisi kapsyen: #caption (caption-side: top) #caption (caption-side: bawah) Tidak sukar untuk mengetahui cara membuat jadual CSS dari senarai berikut. Berikut adalah contoh jadual. #table (display: table;) .row (display: table-baris;) .cell (paparan: table-cell;) Sekiranya anda melihat kod HTML contohnya, anda dapat membezakan struktur jadual dengan mudah (menggunakan elemen div dan span dengan kelas dan ID dan bukannya jadual, td dan tr). Dengan CSS yang sangat sedikit, elemen div dan span muncul sebagai jadual. Sebagai tambahan kepada sifat di atas, model jadual CSS termasuk nilai tabel sebaris, yang mendefinisikan jadual baru sebagai paparan: tabel, tetapi dalam konteks format yang disisipkan HTML. Lajur dan pengelompokannya Oleh kerana sel jadual adalah keturunan dari baris jadual, masuk akal untuk menggunakan beberapa sifat untuk membentuk lajur. Model jadual CSS membolehkan sifat berikut diterapkan pada lajur dan pengelompokannya: sempadan - harta bersama, kecuali harta runtuh sempadan digunakan untuk elemen jadual; latar belakang - sifat biasa, sementara baris dan sel mempunyai latar belakang yang telus; lebar - menetapkan lebar lajur; penglihatan - jika keruntuhan diatur (satu-satunya nilai yang tersedia), sel lajur tidak akan ditampilkan (digabungkan dengan lajur lain dan lebar meja diselaraskan). Tumpukan jadual CSS Elemen jadual yang berbeza mempunyai tahap yang berbeza dalam timbunan untuk membolehkan latar belakang yang berbeza digunakan pada lapisan yang berbeza. Lapisan ini dapat dilihat pada gambar di bawah. meja adalah lapisan paling rendah kumpulan lajur lajur kumpulan garisan tali sel - lapisan paling atas Latar belakang lapisan akan dapat dilihat hanya jika lapisan di atas mempunyai latar belakang yang telus. Ini adalah cara yang baik untuk menjadikan sel kosong benar-benar kosong dengan menggunakan latar belakang yang telus untuk menunjukkan baris, lajur, atau jadual. Algoritma Templat Jadual Lebar jadual CSS dapat dikira menggunakan salah satu daripada dua algoritma. Algoritma dipilih menggunakan sifat susun atur jadual dan dua nilai: tetap(tetap) - lebar templat ditentukan bukan oleh isi, tetapi dengan menetapkan lebar meja, sel, bingkai dan jarak antara sel; automatik (automatik) - lebar jadual ditetapkan berdasarkan lebar lajur dan sempadan. Model templat tetap dikira sekali dan sangat pantas. Dan mod automatik (lalai) memerlukan beberapa hantaran melalui jadual HTML. Sekiranya anda secara jelas menentukan lebar jadual, maka anda harus menggunakan model pengiraan lebar tetap. Secara lalai, ketinggian sel ditetapkan ke minimum yang diperlukan untuk menampilkan kandungan. Tetapi anda boleh menentukan ketinggian sel secara jelas. Semua sel dalam baris akan mempunyai ketinggian sel dengan nilai maksimum. Sifat menegak-menegak menentukan penjajaran kandungan pada baris garis dasar bawah tengah sub, super, teks atas, bawah teks,<длина>, <процент> Kumpulan nilai terakhir diterapkan bukan pada sel, tetapi pada teks di dalamnya. Sel dalam kes ini akan diselaraskan mengikut nilai asas. Bingkai meja CSS Terdapat tiga sifat menarik untuk sempadan meja: runtuh sempadan - boleh runtuh, terpisah, atau diwarisi jarak sempadan - mungkin penting<расстояние_по_горизонтали>, <расстояние_по_вертикали>, atau mewarisi. Menentukan jarak antara bingkai sel. sel kosong - boleh ditunjukkan, disembunyikan, atau diwarisi. Sekiranya sel kosong atau mempunyai keterlihatan: harta tersembunyi, maka kandungannya tidak akan dipaparkan secara lalai. Menetapkan sel kosong: menunjukkan sifat akan memaparkan latar belakang dan sempadan untuk sel kosong. Adakah saya perlu menggunakan jadual CSS? Adakah jadual CSS lebih baik daripada jadual HTML? Sekiranya demikian, apakah kelebihan mereka? Sekiranya tidak, mengapa tidak digunakan? Soalan yang bagus tanpa jawapan yang pasti. Melihat penggunaan jadual HTML berbanding gabungan kod div dan CSS, kelemahan jadual berikut dinyatakan: Pengekodan tambahan - Jadual HTML memerlukan pengekodan struktur tambahan berbanding elemen div. Tetapi jadual CSS juga memerlukan kelas dan ID tambahan. Struktur tegar - Jadual HTML sangat terikat dengan kandungan. Urutan sel harus sama seperti yang akan dipaparkan. Tetapi sekatan yang sama berlaku untuk CSS / Keluaran dalam penyemak imbas - penyemak imbas membuat beberapa hantaran struktur HTML jadual. Tetapi keadaan akan serupa untuk jadual CSS. Seperti yang dinyatakan di atas, jadual CSS tidak mempunyai kelebihan yang signifikan berbanding jadual HTML ketika digunakan dalam templat. Jadual CSS lebih semantik kerana terdapat pemisahan struktur data dan persembahan yang jelas. Kesimpulannya Jadual CSS senang dipelajari dan digunakan. Tetapi mereka tidak mempunyai kelebihan yang jelas daripada jadual HTML, kecuali kod semantik yang lebih banyak. Mungkin latihan akan menunjukkan kelebihan atau kekurangan jadual CSS. Adakah anda mempunyai pengalaman menggunakan jadual CSS dalam projek sebenar? Jadual adalah elemen yang banyak digunakan untuk membentangkan pelbagai data dalam pembentangan, kuliah, risalah dan banyak lagi. Oleh kerana kejelasan, fleksibiliti dan kesederhanaan mereka, jadual juga banyak digunakan di laman web untuk menyampaikan bahan yang diperlukan dengan lebih baik kepada pembaca. Dengan menambahkan semua kekuatan gaya ke dalam jadual, anda dapat memasukkan meja dengan jayanya ke dalam reka bentuk laman web, dengan jelas menampilkan data jadual. Lebar Jadual Secara lalai, lebar jadual ditetapkan oleh penyemak imbas secara bebas, berdasarkan jumlah data jadual di dalamnya. Sekiranya terdapat banyak teks dalam sel, maka tabel akan menempati keseluruhan lebar yang tersedia padanya, dan jika tidak ada cukup, maka lebar jadual akan berkurang secara automatik. Sekiranya terdapat beberapa jadual di halaman, lebarnya yang berbeza kadang-kadang kelihatan ceroboh. Oleh itu, lebih baik menetapkan lebar jadual secara jelas dalam peratusan, piksel, em, atau unit CSS lain, seperti yang ditunjukkan dalam Contoh 1. Contoh 1. Lebar meja dalam peratus Jadual (lebar: 100%;) .tbl-medium (lebar: 60%;) .tbl-kecil (lebar: 200px;) Dalam contoh ini, lebar 100% digunakan untuk semua jadual. Sekali lagi, kelas membantu menetapkan lebar untuk jadual yang dipilih menggunakan kelas yang dibuat sebelumnya. Untuk menentukan lebar jadual 200 piksel, tambahkan ke elemen kelas tbl-kecil. Menyelaraskan jadual Pada mulanya, mana-mana meja terletak di tepi kiri tetingkap penyemak imbas. Anda boleh meluruskannya ke tengah, kecuali jadual memenuhi seluruh kawasan yang tersedia, dengan kata lain, kurang dari 100%. Untuk melakukan ini, tambahkan inden ke gaya jadual melalui properti margin dengan nilai automatik, seperti yang ditunjukkan dalam contoh 2. Contoh 2. Menyelaraskan jadual dengan margin ... Dalam contoh ini, semua jadual di halaman diselaraskan ke tengah. Warna latar belakang Warna latar belakang semua sel meja secara bersamaan ditetapkan melalui properti latar belakang, yang diterapkan pada pemilih tabel. Pada masa yang sama, ingat peraturan untuk menggunakan gaya, khususnya, pewarisan sifat unsur. Jika pada waktu yang sama dengan jadual menetapkan warna untuk pemilih td atau th, maka ia akan ditetapkan sebagai latar belakang (contoh 3). Contoh 3. Warna latar belakang Jenis sambungan Poros Lengan Percuma H9 D10 Biasa N9 Saya s9 Padat P9 Hasil contoh ini ditunjukkan dalam Rajah. 1. Gambar: 1. Tukar warna latar belakang Sekiranya kita perlu membuat zebra - ini adalah nama garis gantian dengan warna yang berbeza, maka kita harus menggunakan: pseudo-class anak-n, menambahkannya ke pemilih tr. Agar zebra hanya menyebar ke badan meja, dan bukan tajuknya, kami akan memisahkannya antara satu sama lain menggunakan elemen

Selang ukuran, mm	Toleransi IT, mikron, untuk kualiti
	5	6	7	8
Sehingga 3	4	6	10	14
St. 3 hingga 6	5	8	12	18
St. 6 hingga 10	6	9	15	22
St. 10 hingga 18	8	11	18	27
St. 18 hingga 30	9	13	21	33
St. 30 hingga 50	11	16	25	39
St. 50 hingga 80	13	19	30	46

Hasil contoh ini ditunjukkan dalam Rajah. 2.

Gambar: 2. Zebra

Nilai genap: pemilih anak ke-9 menerapkan gaya ke semua garis genap dan menetapkan warna latar belakangnya. Anda juga boleh mengubahnya menjadi ganjil, maka garis ganjil akan diserlahkan dengan warna kelabu.

Begitu juga, bukan baris, tetapi lajur diserlahkan dengan warna, untuk ini anda harus menggunakan pemilih tbody td: nth-child (genap).

Margin dalam sel

Medan adalah jarak antara sempadan sel dan kandungannya. Tanpa margin, teks dalam jadual "melekat" pada bingkai, sehingga mengganggu persepsi, sementara menambahkan margin meningkatkan keterbacaan teks. Untuk tujuan ini, sifat gaya padding digunakan, yang berfungsi dengan pemilih td atau th, seperti yang ditunjukkan di atas dalam contoh 3 dan 4. Biasanya satu nilai ditentukan, ia kemudian menetapkan ruang kosong di sekitar isi sel dari semua sisi sekaligus. Dua nilai ditulis apabila perlu menetapkan bidang yang berbeza secara menegak (nilai pertama) dan mendatar (nilai kedua).

Jarak antara sel

Terdapat ruang kosong kecil di antara sel, yang tidak dapat dilihat sehingga anda menetapkan sempadan atau warna latar untuk sel. Jarak ini pada awalnya 2px dan dapat diubah menggunakan properti jarak sempadan dengan menambahkannya ke pemilih jadual (contoh 5).

Contoh 5. Menggunakan jarak sempadan

Jadual (jarak sempadan: 3px; / * Jarak antara sel * /) thad (latar belakang: # e08156; / * Warna latar tajuk * / warna: # 333; / * Warna teks * /) td, th (padding: 5px ; / * Medan dalam sel * / latar belakang: # 4c715b; / * Warna latar sel * / warna: # f5e8d0; / * Warna teks * /)

Menambah gaya ini ke mana-mana jadual akan mendapat hasil yang ditunjukkan dalam Rajah. 3.

Gambar: 3. Pandangan jadual dengan jarak antara sel

Sekiranya harta runtuh sempadan ditambahkan ke jadual dengan nilai runtuh, jarak sempadan diabaikan kerana tidak ada lagi ruang antara sel.

Sempadan dan bingkai

Border ditambahkan ke sel untuk memisahkan isi satu sel dengan jelas dari sel yang lain. Properti gaya sempadan bertanggungjawab untuk penciptaannya, yang diterapkan pada elemen ( atau ). Walau bagaimanapun, terdapat perangkap di sini. Oleh kerana kerangka dibuat untuk setiap sel, batas ketebalan dua kali ganda diperoleh pada titik kontak sel. Terdapat beberapa cara untuk menghilangkan ciri ini. Yang paling mudah ialah menggunakan harta runtuh sempadan dengan nilai runtuh. Tugasnya adalah untuk mengesan hubungan talian dan, bukannya perbatasan dua, menggambarkan satu. Cukup untuk menambahkan sifat ini ke pemilih jadual, dan kemudian ia akan melakukan semuanya sendiri (contoh 6).

Contoh 6. Menggunakan harta runtuh sempadan untuk membuat sempadan jadual

O	X	X
O	O	X
X	X	O

Perbezaan antara sempadan meja dengan dan tanpa harta runtuh sempadan ditunjukkan dalam Rajah. 4.

Gambar: 4. Paparan jadual semasa menggunakan sempadan-runtuh

Dalam rajah. 4a menunjukkan bingkai jadual lalai. Perhatikan bahawa di dalam jadual, semua garis mempunyai lebar dua kali ganda. Menambah keruntuhan sempadan menghilangkan ciri ini, dan ketebalan semua garis menjadi sama (Gambar 4b).

Garis tidak harus dibuat untuk semua sisi sel; mengikut reka bentuk, mereka boleh memisahkan satu baris atau lajur dari yang lain. Untuk melakukan ini, kami menggunakan sifat sempadan bawah, sempadan kiri dan serupa. Terapkan sempadan pada elemen , , dan tidak, jadi kami menambahkannya ke pemilih jadual dan td (contoh 7).

Contoh 7. Garisan antara garisan

Jenis sambungan	Medan toleransi lebar jalan masuk
	Poros	Lengan
Percuma	H9	D10
Biasa	N9	Saya s9
Padat	P9

Hasil contoh ini ditunjukkan dalam Rajah. lima.

Gambar: 5. Jadual dengan garis mendatar

Secara lalai, teks dalam sel jadual diselaraskan kiri dan berpusat pada ketinggian. Pengecualian adalah elemen , ia menentukan sel header di mana penjajaran berpusat. Untuk mengubah penjajaran, gunakan sifat gaya penjajaran teks (contoh 8).

Contoh 8. Menyelaraskan kandungan sel secara mendatar

Tajuk 1	Sel 1	Sel 2
Tajuk 2	Sel 3	Sel 4

Dalam contoh ini, kandungannya diselaraskan kiri dan kandungannya - di pusat. Hasil contoh ditunjukkan di bawah (Gambar 6).

Gambar: 6. Menyelaraskan teks dalam sel

Penjajaran menegak dalam sel selalu berpusat, kecuali dinyatakan sebaliknya. Perkara ini tidak selalu sesuai, terutamanya untuk jadual di mana kandungan sel berbeza dengan ketinggian. Dalam hal ini, penjajaran diatur ke atas sel menggunakan sifat menegak-menegak yang ditetapkan ke atas, seperti yang ditunjukkan dalam Contoh 9.

Contoh 9. Menyelaraskan kandungan sel secara menegak

Jenis sambungan	Medan toleransi lebar jalan masuk
	Poros	Lengan
Percuma	H9	D10
Biasa	N9	Saya s9
Padat	P9

Dalam contoh ini, teks diselaraskan ke bahagian atas. Hasil contoh ditunjukkan dalam Rajah. 7.

Gaya penyemak imbas lalai menampilkan jadual dan selnya tanpa sempadan atau latar belakang yang kelihatan, dan sel di dalam jadual tidak berdekatan satu sama lain. Dengan bantuan gaya CSS, anda boleh menggayakan meja dengan cantik sesuai dengan isinya.

Jadual jarak baris membantu anda memberi tumpuan kepada maklumat berkaitan yang terletak di baris yang sama dalam jadual, tetapi di sel yang berdekatan. Untuk memisahkan teks dari gambar, kami meletakkannya di sel lain, sambil menggabungkan dua sel di tajuk meja Model , dan lepaskan sempadan kanan antara sel.

Penandaan HTML

Gaya CSS

meja (
jarak sempadan: 0 10 piksel;
font-family: "Open Sans", sans-serif;
font-weight: tebal;
}
th (
pelapik: 10px 20px;
latar belakang: # 56433D;
warna: # F9C941;
sempadan-kanan: pepejal 2px;
saiz fon: 0.9em;
}
th: anak pertama (
text-align: kiri;
}
th: anak terakhir (
sempadan-kanan: tiada;
}
td (
menegak-sejajar: tengah;
pembalut: 10px;
saiz fon: 14 piksel;
text-align: tengah;
border-top: pepejal 2px # 56433D;
sempadan-bawah: pepejal 2px # 56433D;
sempadan-kanan: pepejal 2px # 56433D;
}
td: anak pertama (
sempadan-kiri: pepejal 2px # 56433D;
sempadan-kanan: tiada;
}
td: nth-anak (2) (
text-align: kiri;
}

Dengan menggunakan teknik ini, anda dapat menghiasi meja dengan berkesan dengan warna kontras yang sesuai dengan skema warna laman web anda.

Penandaan HTML

Syarikat	S1	S2	S3	S4
Microsoft	20.3	30.5	23.5	40.3
Google	50.2	40.63	45.23	39.3
epal	25.4	30.2	33.3	36.7
IBM	20.4	15.6	22.3	29.3

Gaya CSS

meja (

saiz fon: 14 piksel;
sempadan-runtuh: runtuh;
text-align: tengah;
}
th, td: anak pertama (
latar belakang: # AFCDE7;
warna: putih;
pelapik: 10px 20px;
}
th, td (
gaya sempadan: padat;
lebar sempadan: 0 1px 1px 0;
warna sempadan: putih;
}
td (
latar belakang: # D8E6F3;
}

text-align: kiri;
}

Dengan penambahan properti sempadan-radius ke spesifikasi CSS3, kini mungkin untuk sudut meja bulat tanpa menggunakan gambar latar. Untuk mencapai kesan ini, anda perlu membundarkan sudut sel yang sesuai.

Penandaan HTML
- serupa dengan contoh 2.

Gaya CSS

meja (
font-keluarga: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
saiz fon: 14 piksel;
sempadan-jejari: 10px;
jarak sempadan: 0;
text-align: tengah;
}
th (
latar belakang: #BCEBDD;
warna: putih;
teks-bayangan: 0 1px 1px # 2D2020;
pelapik: 10px 20px;
}
th, td (
gaya sempadan: padat;
lebar sempadan: 0 1px 1px 0;
warna sempadan: putih;
}
th: anak pertama, td: anak pertama (
text-align: kiri;
}
th: anak pertama (

}
th: anak terakhir (

sempadan-kanan: tiada;
}
td (
pelapik: 10px 20px;
latar belakang: # F8E391;
}
tr: anak terakhir td: anak pertama (
sempadan-jejari: 0 0 0 10px;
}
tr: anak terakhir td: anak terakhir (
sempadan-jejari: 0 0 10px 0;
}
tr td: anak terakhir (
sempadan-kanan: tiada;
}

4. Jadual dengan sel yang berasingan

Penandaan HTML

- serupa dengan contoh 2.

Gaya CSS

meja (
font-keluarga: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
text-align: kiri;
sempadan-runtuh: terpisah;
jarak sempadan: 5px;
latar belakang: # ECE9E0;
warna: # 656665;
sempadan: 16px pepejal # ECE9E0;
sempadan-jejari: 20 piksel;
}
th (
saiz fon: 18px;
pembalut: 10px;
}
td (
latar belakang: # F5D7BF;
pembalut: 10px;
}

Penandaan HTML

Minggu kerja saya, Mac 2015
Isnin	Selasa	Hari Rabu	Khamis	Jumaat
2	3	4	5	6
9	10	11	12	13
16	17	18	19	20
23	24	25	26	27
30	31

Gaya CSS

meja (
font-keluarga: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
text-align: tengah;
sempadan-runtuh: runtuh;
jarak sempadan: 5px;
latar belakang: # E1E3E0;
sempadan-jejari: 20 piksel;
}
th (
saiz fon: 22 piksel;
berat huruf: 300;
pembalut: 12px 10px;

warna: # F56433;
}
tbody tr: nth-anak (2) (
sempadan-bawah: pepejal 2px # F56433;
}
td (
pembalut: 10px;
warna: # 8D8173;
}

Penandaan HTML

Pekerja	Gaji	Bonus	Penyelia
Stephen C. Cox	$300	$50	Bob
Josephin tan	$150	—	Annie
Joyce ming	$200	$35	Andy
James A. Pentel	$175	$25	Annie

Gaya CSS

meja (
font-keluarga: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
saiz fon: 14 piksel;
text-align: kiri;
sempadan-runtuh: runtuh;
sempadan-jejari: 20 piksel;
kotak-bayangan: 0 0 0 10px # F2906B;
warna: # 452F21;
}
th (
padding: 10px 8px;
latar belakang: putih;
}
jadual th: anak pertama (
sempadan atas-kiri-jari-jari: 20 piksel;
}
jadual th: anak terakhir (
sempadan atas-kanan-jari-jari: 20 piksel;
}
td (
border-top: 10px pepejal # F2906B;
pembalut: 8px;
latar belakang: putih;
}
jadual td: anak pertama (
sempadan-bawah-kiri-jari-jari: 20 piksel;
}
jadual td: anak terakhir (
sempadan-bawah-kanan-jari-jari: 20 piksel;
}

Corak zebra menegak dalam reka bentuk meja akan membolehkan anda memusatkan perhatian pada lajur, dan kesan melayang pada baris akan menambah daya tarikan pada meja tersebut.

Penandaan HTML

	S1	S2	S3	S4
Microsoft	20.3	30.5	23.5	40.3
Google	50.2	40.63	45.23	39.3
epal	25.4	30.2	33.3	36.7
IBM	20.4	15.6	22.3	29.3

Gaya CSS

meja (
jarak sempadan: 0;
sel kosong: sembunyikan;
}
td (
pelapik: 10px 20px;
text-align: tengah;

peralihan: semua 0.5s linear;
}
td: anak pertama (
text-align: kiri;
warna: # 3D3511;
font-weight: tebal;
}
th (
pelapik: 10px 20px;
warna: # 3D3511;
sempadan-bawah: 1px pepejal # F4EEE8;
sempadan atas-kiri-jari-jari: 10 piksel;
sempadan atas-kanan-jari-jari: 10 piksel;
}
td: anak ke-9 (genap) (
latar belakang: # F6D27E;
}
td: anak ke-9 (ganjil) (
latar belakang: # D1C7BF;
}
th: anak ke-9 (genap) (
latar belakang: # F6D27E;
}
th: anak ke-9 (ganjil) (
latar belakang: # D1C7BF;
}
.round-atas (
sempadan atas-kiri-jari-jari: 5px;
}
.bawah-bawah (
sempadan-bawah-kiri-jari-jari: 5px;
}
tr: hover td (
latar belakang: # D1C7BF;
font-weight: tebal;
}

Penandaan HTML

Gaya CSS

meja (
font-keluarga: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
sempadan-runtuh: runtuh;
warna: # 686461;
}
kapsyen (
pembalut: 10px;
warna: putih;
latar belakang: # 8FD4C1;
saiz fon: 18px;
text-align: kiri;
font-weight: tebal;
}
th (
sempadan-bawah: 3px pepejal # B9B29F;
pembalut: 10px;
text-align: kiri;
}
td (
pembalut: 10px;
}
tr: nth-child (ganjil) (
latar belakang: putih;
}
tr: anak ke-9 (genap) (
latar belakang: # E8E6D1;
}

Penandaan HTML

Komedi	Pengembaraan	Tindakan	Anak-anak
Filem seram	Jones India	Penghukum	Dinding-E
Filem Epik	Star Wars	Budak jahat	Madagascar
Spartan	LOTR	Mati susah	Mencari Nemo
Dr. Berkurang	Mummy	300	Kehidupan seekor serangga

Gaya CSS

Jadual_kol (
font-keluarga: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
saiz fon: 14 piksel;
lebar: 660 piksel;
latar belakang: putih;
text-align: kiri;
sempadan-runtuh: runtuh;
warna: # 3E4347;
}
.table_col th: anak pertama, .table_col td: anak pertama (
warna: # F5F6F6;
sempadan kiri: tiada;
}
.tabel_kol (
berat-font: normal;
sempadan-bawah: pepejal 2px # F5E1A6;


padding: 8px 10px;
}
.tabel_col td (
sempadan-kanan: putih pejal 20 piksel;
sempadan kiri: putih pejal 20 piksel;
pembalut: 12px 10px;
warna: # 8b8e91;
}

Penandaan HTML

Syarikat	S1	S2	S3	S4
Microsoft	20.3	30.5	23.5	40.3
Google	50.2	40.63	45.23	39.3
epal	25.4	30.2	33.3	36.7
IBM	20.4	15.6	22.3	29.3

Gaya CSS

Jadual_blur (
latar belakang: # f5ffff;
sempadan-runtuh: runtuh;
text-align: kiri;
}
.tabel_blur th (
border-top: 1px padat # 777777;

kotak-bayangan: sisipan 0 1px 0 # 999999, sisipkan 0 -1px 0 # 999999;
latar belakang: kecerunan linear (# 9595b6, # 5a567f);
warna: putih;
pembalut: 10px 15px;
kedudukan: saudara;
}
.table_blur th: selepas (
kandungan: "";
paparan: blok;
kedudukan: mutlak;
kiri: 0;
atas: 25%;
tinggi: 25%;
lebar: 100%;
latar belakang: kecerunan linear (rgba (255, 255, 255, 0), rgba (255,255,255, .08));
}
.table_blur tr: nth-child (ganjil) (
latar belakang: # ebf3f9;
}
.table_blur th: anak pertama (
sempadan-kiri: pepejal 1px # 777777;
sempadan-bawah: 1px pepejal # 777777;
kotak-bayangan: sisipan 1px 1px 0 # 999999, sisipkan 0 -1px 0 # 999999;
}
.table_blur th: anak terakhir (
sempadan-kanan: 1px padat # 777777;
sempadan-bawah: 1px pepejal # 777777;
kotak-bayangan: sisipan -1px 1px 0 # 999999, sisipkan 0 -1px 0 # 999999;
}
.tabel_blur td (
sempadan: 1px pepejal # e3eef7;
pembalut: 10px 15px;
kedudukan: saudara;
peralihan: semua kemudahan 0.5s;
}
.tabel_blur tbody: arahkan td (
warna: telus;
teks-bayangan: 0 0 3px # a09f9d;
}
.tabel_blur tbody: hover tr: hover td (
warna: # 444444;
teks-bayangan: tidak ada;
}