Secara lalai, jadual HTML di laman web diberikan tanpa sempadan; untuk menambahkan sempadan ke meja, seperti semua elemen lain, harta CSS sempadan digunakan. Tetapi perlu diingat bahawa jika anda menambahkan sempadan hanya pada elemen
maka ia akan dipaparkan di seluruh jadual. Agar sel jadual juga mempunyai sempadan, anda perlu menetapkan sifat sempadan untuk elemen | dan | . Table, th, td (border: 1px black solid;) Cubalah " Sekarang kedua-dua jadual dan sel mempunyai sempadan, sementara setiap sel dan jadual mempunyai sempadannya sendiri. Akibatnya, ruang kosong muncul di antara bingkai; harta jarak sempadan membolehkan anda mengawal ukuran ruang ini, yang ditetapkan untuk seluruh meja. Dengan kata lain, jurang antara sel yang berlainan tidak dapat dikendalikan secara individu.
Walaupun kita membuang jurang antara sel menggunakan nilai 0 dari properti jarak sempadan, maka sel sel akan saling bersentuhan, berlipat ganda. Properti runtuh sempadan digunakan untuk menggabungkan sempadan sel. Ia boleh mengambil dua nilai:
- terpisah: adalah lalai. Sel-sel dipaparkan jarak dekat antara satu sama lain, setiap sel mempunyai sempadannya sendiri.
- runtuh: menghubungkan bingkai bersebelahan menjadi satu, semua jurang antara sel, serta antara sel dan bingkai meja tidak diendahkan.
Nama dokumen
| Nama | Nama keluarga |
|---|
| Homer | Simpson |
| Marge | Simpson |
| Nama | Nama keluarga |
|---|
| Homer | Simpson |
| Marge | Simpson |
Cuba " Saiz meja
Setelah menambahkan bingkai ke sel meja, dapat dilihat bahawa kandungan sel terlalu dekat dengan tepi. Anda boleh menggunakan sifat padding untuk menambahkan ruang putih di antara tepi sel dan isinya: Th, td (padding: 7px;) Cubalah " Ukuran meja bergantung pada isinya, tetapi situasi sering timbul apabila meja terlalu sempit dan perlu untuk meregangkannya. Lebar dan tinggi meja dapat diubah menggunakan sifat lebar dan tinggi, menetapkan dimensi yang diinginkan atau meja itu sendiri atau sel: Jadual (lebar: 70%;) th (tinggi: 50 piksel;) Cubalah " Penjajaran teks
Secara lalai, teks dalam sel header dijajaran tengah, dan teks dalam sel biasa diselaraskan ke kiri, dengan menggunakan properti selaraskan teks, anda dapat mengendalikan penjajaran mendatar teks.
Harta CSS menegak menegak membolehkan anda mengawal penjajaran menegak kandungan teks. Secara lalai, teks diselaraskan secara menegak ke tengah sel. Penjajaran menegak dapat diganti dengan salah satu nilai untuk sifat penjajaran menegak:
- atas: teks diselaraskan ke bahagian atas sel
- tengah: menjajarkan teks ke tengah (lalai)
- bawah: teks diselaraskan ke bahagian bawah sel
Nama dokumen
| Nama | Nama keluarga |
|---|
| Homer | Simpson |
| Marge | Simpson |
Cuba " Mengganti warna latar baris meja
Apabila melihat jadual besar yang mengandungi banyak baris dengan banyak maklumat, sukar untuk melacak data mana yang termasuk dalam baris tertentu. Untuk menolong pengguna menavigasi, anda boleh menggunakan dua warna latar belakang secara bergantian. Untuk membuat kesan yang dijelaskan, anda boleh menggunakan pemilih kelas, menambahkannya pada setiap baris kedua jadual:
Nama dokumen
| Nama | Nama keluarga | Kedudukan |
|---|
| Homer | Simpson | bapa |
| Marge | Simpson | ibu |
| Bart | Simpson | anak lelaki |
| Liza | Simpson | anak perempuan |
Cuba "Menambah atribut kelas ke setiap baris kedua adalah tugas yang membosankan. Dalam CSS3, kelas pseudo-nth-anak ditambahkan untuk mengatasi masalah ini dengan cara alternatif. Kini kesan interleaving dapat dicapai secara eksklusif menggunakan CSS, tanpa perlu mengubah markup HTML dokumen. Dengan pseudo-class: nth-child, anda boleh memilih semua baris ganjil atau genap jadual menggunakan salah satu kata kunci genap (genap) atau ganjil (ganjil): Tr: nth-child (ganjil) (warna latar: # EAF2D3;) Cubalah " Tukar latar garisan pada hover
Cara lain untuk meningkatkan keterbacaan data tabular adalah dengan menukar warna latar belakang baris semasa anda mengarahkannya ke atasnya. Ini akan membantu menonjolkan kandungan jadual yang diinginkan dan meningkatkan persepsi visual terhadap data.
Melaksanakan kesan ini sangat mudah, untuk ini anda perlu menambahkan: hover pseudo-class ke pemilih baris jadual dan tetapkan warna latar belakang yang diinginkan: Tr: hover (warna latar: # E0E0FF;) Cubalah " Tengah sejajarkan jadual
Menyelaraskan jadual HTML ke tengah hanya mungkin jika lebar jadual kurang dari lebar elemen induknya. Untuk menyelaraskan jadual di tengah, anda perlu menggunakan properti margin, menetapkannya sekurang-kurangnya dua nilai: nilai pertama akan bertanggungjawab untuk margin luar meja di bahagian atas dan bawah, dan yang kedua - untuk penjajaran tengah automatik: Jadual (margin: 10px auto;) Cubalah " Sekiranya anda memerlukan margin yang berbeza di bahagian atas dan bawah jadual, maka anda boleh menetapkan harta margin menjadi tiga nilai: yang pertama akan bertanggungjawab untuk margin atas, yang kedua untuk penjajaran mendatar, dan yang ketiga untuk margin bawah: Jadual (margin: 10px auto 30px;)
Jadual HTML interaktif dalam talian percuma dan styler grid grid dan penjana kod berstruktur.
Pilih gaya dari galeri dan sesuaikan tetapan untuk mendapatkan kod HTML dan CSS. Terdapat 3 editor di bahagian bawah halaman yang menunjukkan kod dan pratonton berubah semasa anda menyesuaikan tetapan di panel kawalan.
Cara Menggunakan Styler Jadual CSS
Mula-mula pilih gaya dari galeri yang kelihatan serupa dengan reka bentuk anda.
Pilih ke mana anda mahu menggunakan tag Jadual HTML atau tag Div berstruktur dalam markup anda dan sesuaikan rupa reka bentuk anda dengan pemilih warna, slaid dan kotak pilihan. Terdapat kotak berasingan untuk menggayakan keseluruhan meja, tajuk, badan dan kaki.
Anda boleh membuat penyesuaian lebih lanjut dalam kod atau penyunting WYSIWYG. Ubah salah satu daripada tiga editor dan hasilnya akan dapat dilihat pada yang lain. Pastikan untuk mengklik butang "Terapkan CSS" ketika anda menukar kod CSS.
Mungkin terdapat sedikit perbezaan antara pratonton div dan jadual yang dapat disesuaikan dengan CSS.
Perhatikan bahawa hasil akhirnya mungkin kelihatan sedikit berbeza ketika anda menerbitkannya di laman web langsung.
Ciri-ciri lain
Alat penata meja dalam talian ini membolehkan anda menyimpan / mengeksport tetapan semasa dalam format teks biasa, yang boleh anda buka / import kemudian.
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 BORDER (WARNA Sempadan)
Terdapat juga peraturan kolektif:
table.collapse (border-runtuh: runtuh;) table.separate (border-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 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
...
|
...
Keputusan:
Sekarang mari kita cuba memisahkan dua lajur jadual 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: 1px hitam pekat; / * buat sementara waktu menandakan sempadan * /) / * untuk pemisah * / #razdel (lebar: 10px; / * 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
|
Sel baru telah ditambahkan untuk pemisah.
Keputusan:
Anda juga boleh menjadikan pemisah antara lajur menjadi kurang menonjol. Untuk melakukan ini, kami 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
|
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.
- Adalah mungkin untuk tidak menentukan lebar satu sel, maka ia akan dikira secara automatik berdasarkan ukuran sel yang tersisa 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
|
Keputusan:
Susun atur getah
- Lebar Jadual semasa menggunakan reka bentuk "getah" tetapkan% lebar tetingkap penyemak imbas... Jadi apabila tetingkap penyemak imbas berubah, ukuran jadual 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
|
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
|
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 persen. 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:
|
Atribut tag sel padding dan ruang sel diperlukan di sini, sehingga tidak ada "jurang" antara jadual.
Keputusan:
Jadual itu sendiri kelihatan agak "buruk", selain itu, penyemak imbas memaparkan beberapa ciri jadual dengan cara mereka sendiri, khususnya bingkai. Walau bagaimanapun, kekurangan ini dapat diperbaiki dengan mudah menggunakan kekuatan gaya. Pada masa yang sama, alat untuk reka bentuk meja sangat diperluas, yang membolehkan anda berjaya memasukkan jadual ke dalam reka bentuk laman web dan mempersembahkan data jadual dengan lebih jelas.
Warna latar belakang sel
Warna latar semua sel jadual secara bersamaan ditetapkan melalui properti latar belakang, yang diterapkan pada pemilih TABLE. Pada masa yang sama, ingat peraturan untuk menggunakan gaya, khususnya, pewarisan sifat unsur. Walaupun sifat latar belakang tidak diwarisi, nilai latar belakang lalai untuk sel adalah telus, iaitu ketelusan, jadi kesan pengisian latar belakang diperoleh untuk sel juga. Sekiranya serentak dengan TABLE anda menetapkan warna untuk pemilih TD \u200b\u200batau TH, maka warna ini akan ditetapkan sebagai latar sel (contoh 2.3).
Contoh 2.3. Warna latar belakang
Jadual
| Tajuk 1 | Tajuk 2 |
|---|
| Sel 3 | Sel 4 |
Dalam contoh ini, kita akan mendapat warna latar belakang biru untuk sel (tag | ) dan merah pada tajuk (tag | ). Ini kerana gaya untuk pemilih TH tidak ditentukan, jadi latar belakang induk, dalam hal ini, pemilih TABLE, "dilewati". Dan warna untuk pemilih TD \u200b\u200bditentukan secara eksplisit, sehingga sel-sel "diisi" dengan warna biru.
Hasil contoh ini ditunjukkan dalam Rajah. 2.4.
Gambar: 2.4. Tukar warna latar belakang
Margin dalam sel
Margin adalah jarak antara tepi kandungan sel dan sempadannya. Biasanya atribut sel padding dari tag digunakan untuk tujuan ini. ... Ini menentukan nilai margin dalam piksel di semua sisi sel. Anda dapat menggunakan sifat gaya padding dengan menambahkannya ke pemilih TD, seperti yang ditunjukkan dalam Contoh 2.4.
Contoh 2.4. Medan dalam jadual
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Jadual
| Tajuk 1 | Tajuk 2 |
|---|
| Sel 3 | Sel 4 |
Dalam contoh ini, menggunakan pemilih pengelompokan, medan ditetapkan secara serentak untuk pemilih TD \u200b\u200bdan TH. Hasil contoh ditunjukkan dalam Rajah. 2.5.
Gambar: 2.5. Medan dalam sel
Sekiranya sifat gaya padding diterapkan pada sel meja, maka tindakan atribut sel padding dari tag tidak diendahkan.
Jarak antara sel
Untuk mengubah jarak antara sel, terapkan atribut sel ruang pada tag ... Kesan atribut ini dapat dilihat dengan jelas ketika menggunakan sempadan di sekitar sel atau ketika mengisi sel dengan warna yang menonjol dari latar belakang halaman. Properti gaya jarak sempadan bertindak sebagai pengganti jarak sel, ia menetapkan jarak antara batas sel. Satu nilai menetapkan jarak menegak dan mendatar antara sempadan sel. Sekiranya sifat ini mempunyai dua nilai, maka yang pertama menentukan jarak mendatar (iaitu ke kiri dan kanan sel), dan yang kedua menentukan jarak menegak (atas dan bawah).
Properti jarak sempadan hanya berkesan jika harta runtuh sempadan tidak ditetapkan untuk pemilih TABLE dengan nilai runtuh (contoh 2.5).
Contoh 2.5. Jarak antara sempadan sel
XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx
Menggantikan jarak sel
| Leonardo | 5 | 8 |
| Raphael | 4 | 11 |
| Michelangelo | 24 | 9 |
| Donatello | 2 | 13 |
Hasil contoh ini ditunjukkan dalam Rajah. 2.6.
Gambar: 2.6. Paparan jadual semasa menggunakan jarak sempadan
Internet Explorer hingga dan termasuk versi 7 tidak menyokong harta jarak-sempadan, jadi penyemak imbas ini menggunakan nilai jarak sel lalai (biasanya 2px) untuk jadual.
Apabila anda menambahkan harta runtuh sempadan dengan nilai runtuh ke pemilih TABLE, atribut jarak ruang diabaikan dan nilai jarak sempadan dihapus.
Sempadan dan bingkai
Secara lalai, pada awalnya tidak ada sempadan dalam jadual, dan ditambahkan menggunakan atribut batas tag ... Penyemak imbas menampilkan sempadan seperti itu dengan cara yang berbeza, jadi lebih baik tidak menentukan atribut ini sama sekali, dan biarkan gambar sempadan menjadi gaya. Mari kita lihat dua kaedah yang berkaitan secara langsung dengan gaya.
Menggunakan atribut sel ruang
Atribut sel ruang dari tag diketahui menetapkan jarak antara sel jadual. Sekiranya warna latar belakang jadual dan sel yang berbeza digunakan, maka garis garis akan muncul di antara sel, warnanya sesuai dengan warna meja, dan ketebalannya sama dengan nilai atribut sel ruang dalam piksel. Contoh 2.3 di atas menunjukkan kesan ini, jadi saya tidak akan mengulanginya.
Perhatikan bahawa ini bukan cara yang sangat mudah untuk membuat sempadan, kerana ia mempunyai ruang lingkup yang terhad. Dengan cara ini, anda hanya boleh mendapatkan grid satu warna, dan bukan garis menegak atau mendatar di tempat yang betul.
Mengaplikasikan harta sempadan
Properti gaya sempadan secara serentak menetapkan warna, gaya dan ketebalan sempadan di sekitar elemen. Apabila anda perlu membuat garis berasingan di sisi yang berbeza, lebih baik menggunakan derivatif - sempadan-kiri, sempadan-kanan, sempadan-atas dan sempadan-bawah, sifat-sifat ini masing-masing menentukan sempadan ke kiri, kanan, atas dan bawah.
Dengan menerapkan sifat perbatasan ke pemilih TABLE, kita menambahkan batas di sekitar meja secara keseluruhan, dan ke pemilih TD \u200b\u200batau TH, kita menambahkan batas di sekitar sel (Contoh 2.6).
Contoh 2.6. Menambah sempadan berganda
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Jadual
| Tajuk 1 | Tajuk 2 |
|---|
| Sel 3 | Sel 4 |
Contoh ini menggunakan sempadan hitam berganda di sekitar meja itu sendiri dan sempadan putih padat di sekitar setiap sel. Hasil contoh ditunjukkan dalam Rajah. 2.7.
Gambar: 2.7. Bersempadan dengan meja dan sel
Harap maklum bahawa garis berganda terbentuk di tempat sel bergabung. Mereka diperoleh lagi kerana tindakan atribut sel ruang pada tag ... Walaupun atribut ini tidak muncul di mana-mana kod contoh, penyemak imbas menggunakannya secara lalai. Sekiranya anda bertanya , maka kita tidak mendapat dua kali ganda, tetapi satu baris, tetapi ketebalan berganda. Untuk mengubah ciri ini, gunakan sifat gaya batas-runtuh dengan nilai runtuh, yang ditambahkan ke pemilih TABLE (contoh 2.7).
Contoh 2.7. Membuat bingkai tunggal
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Jadual
| Tajuk 1 | Tajuk 2 |
|---|
| Sel 3 | Sel 4 |
Contoh ini mewujudkan garis hijau pepejal antara sel dan garis pepejal hitam di sekeliling meja. Semua sempadan dalam jadual mempunyai ketebalan yang sama. Hasil contoh ditunjukkan dalam Rajah. 2.8.
Gambar: 2.8. Sempadan di sekitar meja
Menyelaraskan kandungan sel
Secara lalai, teks dalam sel jadual diselaraskan ke kiri. Pengecualian untuk peraturan ini adalah teg , ia menentukan tajuk di mana penjajaran berpusat. Untuk mengubah penjajaran, gunakan sifat gaya penjajaran teks (contoh 2.8).
Contoh 2.8. Sejajarkan kandungan sel secara mendatar
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Jadual
| Tajuk 1 | Sel 1 | Sel 2 |
|---|
| Tajuk 2 | Sel 3 | Sel 4 |
|---|
Dalam contoh ini, kandungan teg | sejajar kiri dan kandungan teg | - di pusat. Hasil contoh ditunjukkan di bawah (Gambar 2.9).
Gambar: 2.9. Sejajarkan 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 kes ini, penjajaran diatur ke tepi atas sel menggunakan sifat menegak-tegak, seperti yang ditunjukkan dalam Contoh 2.9.
Contoh 2.9. Menyelaraskan kandungan sel secara menegak
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Jadual
| Tajuk 1 | Tajuk 2 |
|---|
| Sel 1 | Sel 2 |
Contoh ini menetapkan ketinggian pengepala | sebagai 40 piksel dan teks diselaraskan ke bawah. Hasil contoh ditunjukkan dalam Rajah. 2.10.
Gambar: 2.10. Sejajarkan teks dalam sel
Sel kosong
Penyemak imbas memaparkan sel secara berbeza dengan tiada di dalamnya. "Tidak ada" dalam hal ini berarti tidak ada gambar atau teks yang ditambahkan di dalam sel, dan ruang tersebut tidak diperhitungkan. Secara semula jadi, penampilan sel hanya berbeza jika terdapat garis batas di sekitarnya. Semasa menggunakan sempadan yang tidak kelihatan, penampilan sel, sama ada terdapat sesuatu di dalamnya atau tidak, adalah sama.
Penyemak imbas lama tidak memaparkan warna latar belakang sel pandangan kosong | | , oleh itu, jika diperlukan untuk meninggalkan sel tanpa isi, tetapi menampilkan warna latar belakang, ruang yang tidak dapat dipisahkan () ditambahkan di dalam sel. Ruang tidak selalu sesuai, terutama ketika anda perlu mengatur ketinggian sel menjadi 1-2 piksel, itulah sebabnya mengapa gambar telus satu piksel digunakan secara meluas. Sesungguhnya, gambar seperti itu dapat diturunkan mengikut budi bicara anda, tetapi ia tidak dipaparkan di laman web dengan cara apa pun.
Nasib baik, era gambar piksel tunggal dan semua jenis spacer berdasarkannya telah berlalu. Penyemak imbas berfungsi dengan baik dengan jadual tanpa kehadiran kandungan sel.
Properti sel kosong digunakan untuk mengawal penampilan sel kosong; apabila diset untuk disembunyikan, sempadan dan latar belakang sel kosong tidak dipaparkan. Sekiranya semua sel berturut-turut kosong, maka keseluruhan baris tersembunyi. Sel dianggap kosong dalam kes berikut:
- sama sekali tidak ada simbol;
- sel hanya mengandungi umpan baris, tab atau ruang;
- keterlihatan ditetapkan kepada tersembunyi.
Menambah ruang yang tidak putus-putus dianggap sebagai kandungan yang dapat dilihat, iaitu sel tidak lagi kosong (contoh 2.10).
Contoh 2.10. Sel kosong
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Menggunakan sel kosong
| Leonardo | 5 | 8 |
| Raphael | | 11 |
| Michelangelo | 24 | |
| Donatello | | 13 |
Paparan jadual dalam penyemak imbas Safari ditunjukkan dalam Rajah 2.11a. Jadual yang sama dalam IE7 ditunjukkan dalam Rajah. 2.11b.
dan. Dalam penyemak imbas Safari, Firefox, Opera, IE8, IE9
b. Dalam penyemak imbas IE7
Gambar: 2.11. Paparan jadual dengan sel kosong
|
|---|
|
Menguji GTA V di PC: menekan maksimum grafik komputer
Bagaimana untuk mengetahui sama ada gambar ini asli atau photoshopped
Program apa yang akan saya lakukan pada 18
Ujian pendidikan dalam sains komputer
Ujian dalam talian untuk sains komputer