Ini lebih baik, tetapi jadual kami ditekan ke tepi kiri tetingkap, seperti teks di dalamnya. Mari kita betulkan ini dengan menambah tiga lagi parameter:
Sila ambil perhatian bahawa jadual mempunyai dua sempadan. Jika anda nyatakan cellspacing="0", maka sempadan akan mengambil bentuk biasa:
Keputusan:
Secara umum, dua parameter bertanggungjawab untuk sempadan:
- bingkai- menetapkan jenis bingkai di sekeliling meja dan boleh mengambil nilai berikut:
- batal- tiada bingkai,
- atas- hanya bingkai atas,
- di bawah- bingkai bawah sahaja,
- hsides- hanya bingkai atas dan bawah,
- vs- hanya bingkai kiri dan kanan,
- lhs- bingkai kiri sahaja,
- rhs- bingkai kanan sahaja,
- kotak- keempat-empat bahagian bingkai.
- peraturan- menetapkan jenis sempadan jadual dalaman dan boleh mengambil nilai berikut:
- tiada- tiada sempadan antara sel,
- kumpulan- sempadan hanya antara kumpulan baris dan kumpulan lajur (akan dibincangkan sedikit kemudian),
- barisan- sempadan hanya antara garisan,
- cols- sempadan hanya antara lajur,
- semua- paparkan semua sempadan.
Menggunakan parameter ini, anda boleh menetapkan sempadan seperti yang anda mahukan. Di sini kami akan memberikan hanya satu contoh, bereksperimen dengan mereka semua sendiri. Keputusan:
Perlu diingatkan bahawa sempadan dipaparkan sedikit berbeza dalam pelayar yang berbeza.
Tag HTML tr dan td
Jadual dibentuk baris demi baris. Oleh itu, parameter yang dinyatakan dalam baris (tr) memanjangkan kesannya kepada semua sel (td) baris. Rentetan boleh mempunyai tiga parameter:
- selaraskan- menjajarkan teks dalam sel secara mendatar, boleh mengambil nilai: kiri (kanan), kanan (kiri), tengah (tengah),
- tidak jelas- menjajarkan teks dalam sel secara menegak, boleh mengambil nilai: atas (atas), bawah (bawah), tengah (tengah),
- bgcolor- menetapkan warna garisan.
Mari lihat contoh: - lebar- menetapkan lebar lajur (dalam piksel atau sebagai peratusan, dengan 100% ialah lebar jadual),
- ketinggian- menetapkan ketinggian sel, dan semua sel dalam baris yang sama akan menjadi ketinggian ini.
Sebagai contoh, mari tambah pada kod kami, dalam tag
parameter ini | | 1
|
2
|
3
|
|---|
Keputusan:
Perlu diingatkan bahawa jika anda tidak menetapkan lebar dan ketinggian, jadual akan dibentuk mengikut kandungan (ini adalah kes dalam contoh sebelumnya).
Pelajaran ini telah tamat, berlatih mencipta dan mereka bentuk jadual, anda akan memerlukan kemahiran ini dalam pelajaran seterusnya, di mana kita akan mencipta jadual struktur kompleks.
Sempadan jadual HTML boleh ditukar dengan mudah menggunakan alat CSS. Paparan mereka dikonfigurasikan menggunakan sifat: runtuh dan jarak.
Untuk mengedit paparan jadual, gunakan kumpulan sifat sempadan. Ia membolehkan anda menyesuaikan lebar, warna, kehadiran/ketiadaan sempadan, gaya mereka dan ciri paparan lain.
Asas
Jadual tanpa penggayaan akan muncul sebagai teks berstruktur tanpa sempadan. Jadual dalam html dibina menggunakan tag:
- tr untuk rentetan;
- ke untuk tajuk;
- td untuk lajur.
| kepala |
kepala |
kepala |
| sel |
sel |
sel |
| sel |
sel |
sel |
Saiz teks dan fon, latar belakang, inden dari tepi tetingkap penyemak imbas ditetapkan dalam css dalam bekas badan.
Badan ( keluarga fon: Helvetica, Sans-serif; saiz fon: 5vw; warna: hitam; warna latar belakang: rgba(228, 228, 245); pelapik: 20vh; )
Gaya digunakan untuk mereka bentuk rupa matriks. Sifat sempadan membolehkan anda menentukan ketebalan, jenis dan warna sempadan jadual html.
( lebar sempadan: 2vw; gaya sempadan: bertitik; warna sempadan: biru langit; )
Disingkatkan sebagai jidar: warna gaya lebar.
( sempadan: 1px pepejal #4c6ea1; )
Untuk bahagian tertentu, ia ditetapkan menggunakan template border-top(/kanan/bawah/kiri)-style(/color/width/radius).
(warna atas sempadan: biru tua; )
Pelapik menetapkan pelapik di dalam sel daripada teks ke bingkai, penjajaran teks menetapkan penjajaran.
Gaya digunakan untuk mereka bentuk rupa meja. Sifat sempadan membolehkan anda menentukan ketebalan, gaya dan warna sempadan. Padding menetapkan lekukan daripada teks, penjajaran teks menetapkan penjajaran.
Th, td ( sempadan: 1vw pepejal #4c6ea1; padding: 1vw; text-align: left; )
Tiada bingkai
Anda tidak perlu menggunakan sempadan atau nyatakan warna sempadan, -lebar dan gaya secara berasingan, kerana anda boleh membuat jadual HTML tanpa sempadan dengan reka bentuk penuh. Sebagai contoh, kod berikut menetapkan latar belakang, padding dan bucu bulat (matriks kedua tanpa garisan dalam atau luar).
Jadual ( jajaran teks: kiri; warna latar belakang: rgba(228, 228, 245); jejari-jejari-atas-kiri-: 15em 1em; jejari-jejari-bawah-kanan: 15em 1em; ) td, th ( pelapik: 1.5vw;)
Dengan dapat menetapkan latar belakang untuk setiap sel, jadual tanpa sempadan boleh kelihatan seperti mempunyai satu.
Jadual ( jajaran teks: kiri; warna latar belakang: rgba(228, 228, 245); lebar: 70vw; jarak sempadan: 2vh 2vh; ) td, th ( pelapik: 1.5vh; ) td (warna latar belakang: rgba (247, 247, 255); )
Anda boleh mengalih keluar sempadan jadual html, meninggalkan yang dalaman. Untuk melakukan ini, sebagai contoh, tetapkan sifat sempadan untuk sel (tr), tetapkan bingkai biasa pada sisi bersebelahan (runtuh) dan larang melukis garisan di sekeliling matriks (tersembunyi). Tindakan terakhir akan menyembunyikan garisan sel, yang, apabila runtuh didayakan, muncul di tempat yang sama dengan tepi luar jadual.
Jadual ( penjajaran teks: tengah; runtuh sempadan: runtuh; warna latar belakang: rgba(228, 228, 245); jejari sempadan: 50%; lebar: 29vh; ketinggian: 10vh; gaya sempadan: tersembunyi; ) td ( padding: 1.5vh; sempadan: 0.5vh pepejal hitam; )
Runtuh dan terpisah
Salah satu sifat jadual utama dalam html, border-collapse, menentukan cara sempadan sel akan dipaparkan. Harta boleh mempunyai salah satu daripada tiga nilai: runtuh, berasingan, mewarisi.
jadual ( border-collapse: collapse; )
Lalai ditetapkan untuk memisahkan, jadi setiap sel akan mempunyai sempadannya sendiri. Terima kasih kepada runtuh, anda boleh menggabungkan garisan sel supaya kandungannya dipisahkan oleh satu bingkai. Gambar menunjukkan tiga negeri sempadan yang diterangkan di atas: tanpa gaya; dengan keruntuhan sempadan ditetapkan kepada lalai; dengan nilai sempadan-runtuh, meninggalkan garis yang sama antara sel.
Bingkai berganda
Sifat runtuh membolehkan anda menjadikan sempadan sel dalam jadual html bebas antara satu sama lain dan biasa. Sifat jarak sempadan sering digunakan dengannya, yang mengawal jarak antara bingkai sel. Anda boleh menentukan kedua-dua jarak mendatar dan menegak.
Jadual (jarak sempadan: 0.5vw 1vw; )
Nilai pertama menunjukkan jarak antara sel secara mendatar, yang kedua - secara menegak. Jika bingkai ditentukan untuk jadual itu sendiri, maka jarak daripadanya ke sel juga dibentuk oleh sifat spasi, tetapi ia juga boleh dipengaruhi oleh pelapik matriks. Dalam kes di mana matriks mempunyai latar belakang, ruang kosong antara sel akan diisi dengannya.
Jadual ( jarak sempadan: 0.5vw 1vw; jidar: pepejal 1vw #4c6ea1; pelapik: 1vw; warna latar belakang: hitam; ) td, th ( sempadan: pepejal 1vw #4c6ea1; pelapik: 0.3vw; penjajaran teks: kiri; warna latar belakang: putih;)
sel kosong
Jika jadual tidak mempunyai sempadan sel yang digabungkan, sifat sel kosong membenarkan baris dan latar belakang sel dipaparkan, yang dianggap kosong (ditandakan sebagai kelihatan atau tidak mempunyai aksara). Jika anda ingin menunjukkan sempadan dan latar belakang setiap sel, tetapkan harta untuk ditunjukkan.
jadual (sel kosong: tunjukkan; )
Nilai hide menyembunyikan sempadan dan latar belakang blok kosong. Jika semua sel dalam satu baris kosong, maka baris tersebut mempunyai ketinggian sifar dan hanya satu garis menegak.
Jadual (jarak sempadan: 0.5vw 1vw; jidar: pepejal 0.1vw #4c6ea1; pelapik: 0.5vw; warna latar belakang: rgba(33, 31, 171, 0.12); sel kosong: sembunyi; ) td, th ( sempadan : 0.3vw pepejal #4c6ea1; pelapik: 0.5vw; penjajaran teks: kiri; warna latar belakang: putih; )
Atribut
Untuk memperuntukkan sempadan kepada kumpulan elemen (sel, lajur, baris, kumpulan baris atau lajur), terdapat atribut peraturan. Nilainya ditulis terus dalam html dalam teg jadual.
Ia membolehkan anda melukis bingkai unsur secara selektif. Ia cukup untuk menentukan atribut dalam html, ini akan mewujudkan garis dalaman antara sel. Sempadan jadual html perlu ditentukan secara manual dalam css.
| kepala |
kepala |
kepala |
| sel |
sel |
sel |
| sel |
sel |
sel |
jadual ( bahagian atas sempadan: 1vw pepejal #486743; saiz fon: 5vw; ) ke, td ( pelapik: 2vw; )
Jadi, gambar pertama menunjukkan operasi tulen atribut tanpa reka bentuk bingkai tambahan melalui jadual. Dalam gambar kedua, garis atas dilukis, yang dipasang menggunakan arahan.
Jadual ( atas sempadan: 1vw bertitik #486743; )
Atribut boleh mempunyai berbilang nilai. Semua membuat sempadan antara sel dengan ketebalan sempadan 1px. Cols mencipta garisan antara lajur, baris - antara baris, tiada yang memadamkan tepi. Gambar menunjukkan contoh jadual dengan nilai semua dan baris.
Anda boleh menukar warna sempadan sel dan lebar bingkai apabila menggunakan atribut peraturan menggunakan sempadan dan warna sempadan.
Konflik gaya
Sel, baris, lajur dan kumpulan elemen boleh diberikan nilai sempadannya sendiri. Walau bagaimanapun, mereka boleh berbeza dalam tiga parameter: gaya, ketebalan dan warna.
Dalam mod runtuh, konflik penggayaan timbul. Disebabkan fakta bahawa satu sempadan boleh tertakluk kepada peraturan dua sel yang berbeza, masalah timbul untuk memilih gaya yang akan diutamakan. Seperti yang ditulis oleh E. Malchuk, yang paling "menarik" (kecuali tersembunyi) menang.
- Jika salah satu elemen mempunyai harta gaya sempadan yang dipertikaikan ditetapkan kepada tersembunyi, gaya itu menang. Tersembunyi mempunyai keutamaan tertinggi.
- Berat terkecil tiada. Ia juga menetapkan bahawa baris tidak boleh dipaparkan, tetapi untuk arahan dilaksanakan, semua elemen untuk baris itu mesti mempunyai peraturan ini (tiada).
- Di antara sempadan nipis dan tebal, sempadan tebal mempunyai keutamaan yang lebih besar.
- Dengan bingkai yang sama, tetapi gaya berbeza, pepejal berganda (berganda) sentiasa menang, diikuti dengan pepejal, putus-putus (putus-putus), bertitik.
- Jika satu-satunya perbezaan adalah warna, maka penampilan komponen terkecil sentiasa lebih tinggi (hiasan sel mempunyai keutamaan yang lebih tinggi daripada baris, dan baris lebih tinggi daripada jadual).
Ilustrasi konflik
Adalah mudah untuk menggambarkan konflik gaya menggunakan jadual yang telah dibincangkan. Ia cukup untuk menambah beberapa kelas ke sel dan menentukan reka bentuk untuk mereka. Html mengambil bentuk:
| kepala |
kepala |
kepala |
| sel |
sel |
sel |
| sel |
sel |
sel |
css yang sepadan.
Badan ( font-family: Helvetica, Sans-serif; font-size: 5vw; color: black; margin: 0; width: 80vw; background-color: white; padding: 3vw; ) table ( background-color: rgba(33) , 31, 171, 0.12); pelapik: 0.5vw; runtuh sempadan: runtuh; jarak sempadan: 0.5vw 1vw; gaya sempadan: tersembunyi; ) th ( pelapik: 1vw; jajaran teks: kiri; sempadan: 0.1vw pepejal #4c6ea1; ) td ( pelapik: 1vw; jidar: 0.2vw bertitik #4c6ea1; ) .sel_kedua ( sempadan: 0.01vw pepejal #4c6ea1; ) .sel_ketiga ( sempadan: 0.01vw merah berganda; )
Gaya bingkai
Reka bentuk sempadan boleh ditetapkan untuk setiap sisi sel secara berasingan. Untuk melakukan ini, cukup untuk menentukan bukan satu nilai dalam gaya sempadan, tetapi menyenaraikan empat, sepadan dengan sisi sel.
Th, td ( padding: 1vw; text-align: left; border-width: 0.5vw; border-color: darkred; border-style: dotted; ) .seven ( border-top-color: skyblue; border-top-style : pepejal; sempadan-kanan-lebar: 2vw; sempadan-gaya-bawah: putus-putus; sempadan-gaya-kiri: tersembunyi; )
Anda boleh menentukan data dalam satu baris dengan menentukan daripada satu hingga empat nilai yang berbeza. Masing-masing secara tradisinya menjadi arahan kepada salah satu pihak.
- Jika anda menetapkan dua nilai, yang pertama akan bertanggungjawab untuk sempadan bawah dan atas, yang kedua - untuk kiri dan kanan.
- Daripada ketiga-tiga, yang pertama bertanggungjawab untuk bahagian atas, yang kedua untuk kiri dan kanan, dan yang ketiga untuk garis bawah.
- Empat nilai secara unik mentakrifkan setiap baris, bermula dari bahagian atas mengikut arah jam ke kiri.
Anda juga boleh menentukan reka bentuk sempadan sel dengan hanya mentakrifkan data untuk setiap sisi, seperti yang ditunjukkan di atas.
Terdapat sepuluh gaya bingkai secara keseluruhan. Mereka semua menukar baris atau mengalih keluarnya:
- tiada - tiada sempadan;
- tersembunyi - tidak lebih ketat, menghalang penampilan sifat (dalam situasi konflik);
- bertitik - diperbuat daripada titik;
- putus-putus - putus-putus;
- pepejal - pepejal;
- double - dua pepejal;
- alur - bingkai nampaknya ditekan ke permukaan;
- rabung - garisan cembung;
- inset - sebenarnya, untuk satu sisi elemen ia berkelakuan seperti rabung, jika digunakan pada keseluruhan elemen, maka bahagian atas dan kiri berlorek, dan bahagian bawah dan kanan diserlahkan;
- permulaan - berkelakuan seperti alur apabila digunakan pada satu sisi elemen, ia mengaburkan bahagian bawah dan kanan, menjadikan bahagian atas dan kiri lebih ringan.
Salah satu gaya digunakan pada setiap sel (ke bahagian atas dan kiri). Untuk memastikan mereka tidak bersaing antara satu sama lain, yang "paling lemah" diberi nilai tertinggi.
Jadual (warna latar belakang: rgba(33, 31, 171, 0.12); pelapik: 0.5vw; runtuh sempadan: runtuh; sempadan: 0.3vw hitam pepejal; ) ke, td ( pelapik: 1vw; jajaran teks: kiri; ).satu ( sempadan-atas: tersembunyi; sempadan-kiri: tersembunyi; ) .dua ( sempadan-atas: 0.4vw ganda #4c6ea1; sempadan-kiri: 0.4vw ganda #4c6ea1; ) .tiga ( sempadan-atas: 0.5vw pepejal #4c6ea1; sempadan-kiri: 0.5vw pepejal #4c6ea1; ) .empat (bahagian atas sempadan: 0.7vw putus-putus #4c6ea1; sempadan-kiri: 0.7vw putus-putus #4c6ea1; ) .lima ( atas sempadan: 0.8vw putus-putus # 4c6ea1; sempadan-kiri: 0.8vw bertitik #4c6ea1; ) .enam ( sempadan-atas: 0.9vw rabung #4c6ea1; sempadan-kiri: 0.9vw rabung #4c6ea1; ) .tujuh ( sempadan-atas: 1vw awal sempadan #4c6ea1; -kiri: 1vw permulaan #4c6ea1; ) .lapan (bahagian atas sempadan: 1.1vw alur #4c6ea1; sempadan-kiri: 1.1vw alur #4c6ea1; ) .sembilan ( atas sempadan: 1.2vw sisipan #4c6ea1; sempadan-kiri: Sisipan 1.2vw #4c6ea1; )
Menstruktur bahan
Sifat data yang dibentangkan dalam matriks selalunya memerlukan pengubahsuaian pada sempadan jadual, bingkai sel, baris atau lajur. Untuk ini anda boleh menggunakan:
- garis sifar (untuk lebar sempadan nyatakan nilai 0px);
- tersembunyi.
Kelebihan tersembunyi adalah keutamaannya. Jika peraturan dua elemen sekali gus terpakai pada sempadan dan salah satu daripadanya mempunyai nilai tersembunyi dalam gaya sempadan, baris itu tidak akan dipaparkan. Iaitu, anda boleh membuat keseluruhan jadual dengan mudah dan kemudian mengalih keluar bingkai yang tidak diperlukan secara selektif.
Menggunakan tersembunyi pada sel menjadikannya mustahil untuk memulihkan sempadan menggunakan kaedah lain (kecuali heavyweight!penting). Oleh itu, jika anda perlu mengeluarkan beberapa sisi sel, lebih baik tidak menggunakan satu pun.
Katakan ada meja. Matlamatnya adalah untuk mengalih keluar sempadan menegak di dalam baris pertama. Ia ditandakan dengan tag berasingan (tajuk), jadi tidak perlu memasuki kelas tambahan. Jika anda menggunakan tersembunyi pada keseluruhan teg, dengan menyatakan sempadan-kiri, kemudian bersama-sama dengan sempadan dalaman, satu bahagian bingkai sisi jadual akan dialih keluar, yang tidak diperlukan oleh syarat tersebut. Jika anda tidak menggunakan satu pun dan garis matriks, maka untuk garisan dalaman akan ada dua peraturan yang tidak bercanggah, dan untuk tepi luar tiada satu pun yang akan bercanggah dengan peraturan yang diberikan kepadanya dalam jadual, dan sisi akan kekal di tempatnya. .
Mengalih keluar baris sel individu dilakukan menggunakan kelas yang diperuntukkan kepada elemen yang sepadan, seperti yang ditunjukkan untuk tetapan gaya, lebar dan warna individu.
Sedangkan lebih mudah untuk mengalih keluar sempadan sisi dalam jadual html dengan merujuk kepada bingkai luar matriks, yang ditunjukkan dalam jadual. Ia cukup untuk menunjukkan baris tertentu dalam css.
Jadual ( gaya sempadan kiri: tersembunyi; )
Mengalih keluar sempadan dalam baris adalah mudah untuk dilaksanakan menggunakan sifat sempadan dengan nilai tersembunyi dalam tr. Bukan sahaja garisan mendatar meja hilang, tetapi juga bahagian sisi. Matriks merosot menjadi lajur menegak.
Tr ( gaya sempadan: tersembunyi; )
Sebagai pilihan terakhir, beralih kepada!penting. Jika anda menambahnya selepas arahan, ia akan mendapat keutamaan tambahan.
Sempadan jadual HTML adalah fleksibel dan mudah untuk disesuaikan. Kumpulan harta sempadan membolehkan anda menyembunyikan elemen, menukar warna, lebar atau gaya. Kelemahan jadual ialah hasil gabungan peraturan yang digunakan pada elemen individu tidak selalunya boleh diramal dengan jelas. Memandangkan perkara ini, adalah disyorkan untuk sama ada mengurangkan bilangan gaya yang mungkin untuk sempadan, atau menggunakannya secara terpilih.
Kuliah ini membincangkan secara terperinci prinsip penggunaan jadual dalam penanda HTML. Ini termasuk organisasi jadual teks, grid koordinat jadual dan grafik yang disusun dalam jadual.
Alat untuk menerangkan jadual dalam HTML
Apabila WWW dibangunkan, menjadi jelas bahawa sumber yang terkandung dalam HTML tidak mencukupi untuk paparan berkualiti tinggi pelbagai jenis dokumen. Kelemahan HTML ialah kekurangan alat untuk memaparkan jadual. Untuk tujuan ini, teks praformat (tag
), di mana jadual telah digariskan dalam aksara ASCII. Tetapi bentuk pembentangan jadual ini tidak berkualiti tinggi dan menonjol daripada gaya umum dokumen. Selepas pengenalan jadual dalam HTML, Juruweb bukan sahaja mempunyai alat untuk meletakkan teks dan data berangka, tetapi alat reka bentuk yang berkuasa untuk meletakkan imej grafik dan teks di tempat yang betul pada skrin.
Mencipta jadual dalam HTML
Tag digunakan untuk menerangkan jadual<ТАВLЕ>. Tag<ТАВLЕ>, seperti kebanyakan orang lain, menterjemah baris secara automatik sebelum dan selepas jadual.
Mencipta baris jadual - tag<ТR>
Tag<ТR>(Baris Jadual) mencipta baris jadual. Semua teks, teg lain dan atribut yang perlu diletakkan pada satu baris mesti diletakkan di antara teg lt;TR>.
Menentukan sel jadual - tag<ТD>
Sel dengan data biasanya diletakkan di dalam baris jadual. Setiap sel yang mengandungi teks atau imej mesti dikelilingi oleh tag<ТD>. Bilangan tag<ТD>dalam satu baris mentakrifkan bilangan sel
Jadual
| Jika jadual mempunyai dua tag TR, maka ia mempunyai dua baris. |
| Jika terdapat tiga tag TD dalam satu baris, |
kemudian di dalamnya |
tiga lajur. |
Tajuk lajur jadual - tag<ТН>
Tajuk untuk lajur dan baris jadual ditetapkan menggunakan teg pengepala<ТН>(Tajuk Jadual, tajuk jadual). Tag ini serupa<ТD>. Perbezaannya ialah teks yang disertakan di antara tag<ТН>, ditulis secara automatik dalam huruf tebal dan diletakkan di tengah-tengah sel secara lalai. Anda boleh mengosongkan teks dan menjajarkan teks ke kiri atau kanan. Jika anda menggunakan<ТD>dengan tag<В>dan atribut<АLIGN=center>, teks juga akan kelihatan seperti tajuk. Walau bagaimanapun, perlu diingat bahawa tidak semua penyemak imbas menyokong fon tebal dalam jadual, jadi adalah lebih baik untuk menetapkan tajuk jadual menggunakan<ТН>.
| Pengepala dipusatkan secara lalai |
Pengepala boleh menyertai lajur |
| Pengepala boleh diletakkan sebelum lajur |
Teks atau data |
Teks atau data |
| Pengepala boleh menggabungkan baris |
Teks atau data |
Teks atau data |
| Teks atau data |
Teks atau data |
| Teks atau data |
Teks atau data |
Menggunakan pengepala jadual - tag<САРТIОN>
Tag
membolehkan anda membuat pengepala jadual. Secara lalai, tajuk dipusatkan dan diletakkan sama ada di atas (<САРТION АLIGN=top>), atau di bawah meja (<САРТION ALIGN=bottom>). Tajuk boleh terdiri daripada sebarang teks dan imej. Teks akan dibahagikan kepada baris yang sepadan dengan lebar jadual. Kadang-kadang tag<САРТION>digunakan untuk menandatangani gambar. Untuk melakukan ini, sudah cukup untuk menerangkan jadual tanpa sempadan.
Tajuk di atas jadual
| Teks atau data |
Teks atau data |
Teks atau data |
Teks atau data |
Menuju di bawah meja
| Teks atau data |
Teks atau data |
Teks atau data |
Atribut NOWRAP
Lazimnya, sebarang teks yang tidak sesuai pada satu baris sel jadual berpindah ke baris seterusnya. Walau bagaimanapun, apabila menggunakan atribut NOWRAP dengan tag<ТН>atau<ТD>Panjang sel dibesarkan supaya teks yang terkandung di dalamnya muat pada satu baris.
Atribut COLSPAN
Tag<ТD>Dan<ТН>diubah suai menggunakan atribut COLSPAN (Span Lajur, sambungan lajur). Jika anda ingin menjadikan sel lebih lebar daripada bahagian atas atau bawah, anda boleh menggunakan atribut COLSPAN untuk meregangkannya ke atas sebarang bilangan sel biasa.
| Jika anda ingin menjadikan mana-mana sel lebih lebar daripada bahagian atas atau bawah, |
anda boleh menggunakan atribut COLSPAN=2, |
| untuk meregangkannya ke atas sebarang bilangan sel biasa. |
Atribut ROWSPAN
Atribut ROWSPAN digunakan dalam teg<ТD>Dan<ТН>, adalah serupa dengan atribut COLSPAN=, hanya ia menentukan bilangan baris di mana sel itu diregangkan. Jika anda menentukan nombor yang lebih besar daripada satu dalam atribut ROWSPAN=s, maka bilangan baris yang sepadan mesti berada di bawah sel yang diregangkan. Ia tidak boleh diletakkan di bahagian bawah meja.
Atribut WIDTH
Atribut WIDTH digunakan dalam dua kes. Anda boleh meletakkannya dalam tag<ТАВLЕ>untuk memberikan lebar keseluruhan jadual, atau boleh digunakan dalam tag<ТD>atau<ТН>untuk menetapkan lebar sel atau kumpulan sel. Lebar boleh ditentukan dalam piksel atau sebagai peratusan. Contohnya, jika anda menetapkan dalam teg<ТАВLЕ>WIDTH=250, anda akan mendapat jadual selebar 250 piksel tanpa mengira saiz halaman pada monitor anda. Apabila menetapkan WIDТН=50% dalam teg<ТАВLЕ>jadual akan menduduki separuh lebar halaman pada sebarang saiz imej pada skrin. Jadi, apabila menentukan lebar jadual sebagai peratusan, perlu diingat bahawa jika pengguna mempunyai ruang pandang yang sempit, halaman anda mungkin kelihatan agak pelik. Jika anda menggunakan piksel dan jadual lebih luas daripada kawasan tontonan, bar skrol akan muncul di bahagian bawah untuk bergerak ke kiri dan kanan merentasi halaman. Bergantung pada tugasan yang ada, sama ada kaedah menetapkan lebar jadual mungkin berguna.
| Teks atau data - lebar 100% |
atau
| Teks atau data - lebar 50% |
atau
| Teks atau data - 200 piksel lebar |
atau
| Teks atau data - 100 piksel lebar |
Memohon sel kosong
Jika sel tidak mengandungi data, ia tidak akan mempunyai sempadan. Jika anda mahu sel mempunyai sempadan tetapi tiada kandungan, anda perlu meletakkan sesuatu di dalamnya yang tidak akan kelihatan apabila dilihat. Anda boleh menggunakan rentetan kosong<ВR>. Anda juga boleh menentukan lajur kosong dengan menentukan lebarnya dalam piksel atau unit relatif dan tidak memasukkan sebarang data ke dalam sel yang terhasil. Alat ini boleh berguna apabila meletakkan teks dan grafik pada halaman.
Atribut CELLADDING
Atribut ini menentukan lebar ruang kosong antara kandungan sel dan sempadannya, iaitu, ia menetapkan margin di dalam sel.
| Teks atau data |
Teks atau data |
Teks atau data |
| Teks atau data |
Teks atau data |
Teks atau data |
| Teks atau data |
Teks atau data |
Teks atau data |
| Teks atau data |
Teks atau data |
Teks atau data |
Atribut SELAR dan VALIGN
Tag<ТR>, <ТD>Dan<ТН>boleh diubah suai menggunakan atribut ALIGN dan VALIGN. Atribut ALIGN menentukan sama ada teks dan grafik dijajarkan secara mendatar, iaitu, kiri atau kanan, atau tengah. Penjajaran mendatar boleh ditetapkan dalam beberapa cara:
JARINGAN=bleedleft menekan kandungan sel dekat dengan tepi kiri.
JARINGAN=kiri Menjajarkan kandungan sel ke kiri, dengan mengambil kira lekukan yang ditentukan oleh atribut CELLPADDING.
JARINGAN=tengah Memusatkan kandungan sel.
JARINGAN=betul Menjajarkan kandungan sel ke kanan, dengan mengambil kira lekukan yang ditentukan oleh atribut CELLPADDING.
| Teks atau data |
Teks atau data |
Teks atau data |
| Teks atau data |
Teks atau data |
Teks atau data |
| Teks atau data |
Teks atau data |
Teks atau data |
| Teks atau data |
Teks atau data |
Teks atau data |
| Teks atau data |
Teks atau data |
Teks atau data |
Atribut VALIGN menjajarkan teks dan grafik secara menegak dalam sel. Penjajaran menegak boleh ditetapkan dalam beberapa cara:
VALIGN=atas Menjajarkan kandungan sel ke sempadan atasnya.
VALIGN=tengah Memusatkan kandungan sel secara menegak.
VALIGN=bawah Menjajarkan kandungan sel ke sempadan bawahnya.
| Atribut VALIGN menjajarkan teks dan grafik secara menegak dalam sel. |
atas, |
tengah, |
bawah. |
| VALIGN=atas Menjajarkan kandungan sel ke sempadan atasnya. |
atas, |
atas, |
atas. |
| VALIGN=tengah Memusatkan kandungan sel secara menegak. |
tengah, |
tengah, |
tengah. |
| VALIGN=bawah Menjajarkan kandungan sel ke sempadan bawahnya. |
bawah, |
bawah, |
bawah. |
Atribut BORDER
Dalam tag<ТАВLЕ>sering menentukan bagaimana sempadan, iaitu, garisan yang mengelilingi sel jadual dan jadual itu sendiri, akan kelihatan. Jika anda tidak menentukan bingkai, anda akan mendapat jadual tanpa garisan, tetapi ruang akan diperuntukkan untuknya. Hasil yang sama boleh dicapai dengan menetapkan<ТАВLЕ ВОRDER=0>. Kadang-kadang anda ingin membuat sempadan lebih tebal supaya ia lebih menonjol. Untuk menarik perhatian pada gambar atau teks, anda boleh menetapkan sempadan tebal secara eksklusif. Apabila membuat jadual bersarang, anda perlu membuat sempadan dengan ketebalan yang berbeza untuk jadual yang berbeza untuk menjadikannya lebih mudah untuk dibezakan.
Atribut CELLSPACING
Atribut CELLSPACING menentukan lebar ruang antara sel dalam piksel. Jika atribut ini tidak dinyatakan, nilai lalai ialah dua piksel. Menggunakan atribut CELLSPACING=, anda boleh meletakkan teks dan grafik di mana sahaja anda memerlukannya. Jika anda ingin meninggalkan ruang kosong, anda boleh menulis ruang dalam sel.
| Teks atau data |
Teks atau data |
Teks atau data |
| Teks atau data |
Teks atau data |
Teks atau data |
| Teks atau data |
Teks atau data |
Teks atau data |
| Teks atau data |
Teks atau data |
Teks atau data |
| Teks atau data |
Teks atau data |
Teks atau data |
| Teks atau data |
|
Teks atau data |
Atribut BGCOLOR
Atribut ini membolehkan anda menetapkan warna latar belakang. Bergantung pada teg yang mana (TABLE, TR, TD) digunakan dengannya, warna latar belakang boleh ditetapkan untuk keseluruhan jadual, untuk satu baris atau untuk sel individu. Nilai atribut ini ialah kod RGB atau nama warna standard.
| Teks atau data |
Teks atau data |
Teks atau data |
| Teks atau data |
Teks atau data |
Teks atau data |
Atribut LATAR BELAKANG
Atribut ini menentukan imej latar belakang untuk jadual. Berlaku pada teg TABLE dan TD. Nilainya ialah URL fail imej latar belakang. Penggunaan atribut ini dibincangkan di bawah.
Menggunakan jadual dalam reka bentuk halaman
Perkara yang baik tentang jadual ialah anda boleh membuat sempadannya tidak kelihatan jika anda mahu. Ini membolehkan penggunaan tag<ТАВLЕ>letakkan teks dan grafik dengan cantik pada halaman. tag selamat tinggal<ТАВLЕ>kekal sebagai satu-satunya alat pemformatan yang berkuasa dalam HTML. Pereka laman web kini mempunyai kebebasan yang hampir sama mengenai penggunaan ruang putih seperti pereka halaman bercetak. Jadual ialah cara terbaik untuk menjauhkan diri daripada peletakan hierarki teks pada halaman Web.
Jika penyemak imbas menyokong jadual, ia biasanya akan memaparkan dengan betul kesan paling menarik yang diperoleh menggunakan jadual tersebut
Universiti Pedagogi Negeri Ural
Selamat datang!
| Kursus latihan "Asas penguasaan WEB" |
|
Membuat jadual berwarna-warni
Sesetengah pelayar membenarkan anda memaparkan warna. Terdapat beberapa cara untuk mewarnakan jadual, kebanyakannya bergantung pada penyemak imbas yang anda gunakan.
Sempadan berwarna dalam Netscape Navigator. Anda bukan sahaja boleh mengelilingi meja dengan sempadan yang cantik, tetapi anda juga boleh menetapkannya kepada warna yang berbeza daripada warna teks dan latar belakang. Cipta GIF kelabu ringkas (atau mana-mana GIF yang anda ingin miliki sebagai latar belakang) dan takrifkannya dalam teg<ВODY>sebagai latar belakang halaman. Kemudian tetapkan warna latar belakang halaman. Akibatnya, teg anda<ВОDY>akan kelihatan seperti ini:
Anda telah mencipta latar belakang berganda - GIF dan warna yang ditentukan. Akibatnya, warna latar belakang akan kelihatan pada semua sempadan jadual dan garisan mendatar (<НR>). Sama ada GIF latar belakang anda berwarna kelabu atau tidak, garisan berwarna dan sempadan jadual akan menyerlah dengan ketara. Jika GIF latar belakang tidak terlalu rumit, masa muat halaman hanya akan meningkat sedikit.
Kami telah mengetahui bahawa jadual HTML mempunyai rangka kerja, walaupun pelayar tidak menunjukkannya secara lalai. Tetapi bukan itu sahaja, setiap sel jadual juga mempunyai bingkai yang dipanggil sempadan sel. Tetapi bukan itu sahaja, menggunakan atribut tag khas
Anda boleh menukar jarak antara sel dan dari sel ke bingkai jadual, serta padding dalaman dari sempadan sel ke kandungannya.
Bingkai jadual HTML, sempadan sel, jarak antara mereka dan pelapik.
Jadi untuk mencipta bingkai jadual HTML dan sempadan selnya hanya satu atribut tag digunakan
- sempadan. Nilai atribut ialah integer bukan negatif (sifar secara lalai) yang mewakili saiz dalam piksel. Tetapi, perhatikan, saiz berubah hanya pada bingkai meja; pada sempadan sel ia sentiasa tidak berubah.
Untuk perubahan jarak antara sel(sempadan mereka) dan daripada sel ke bingkai jadual dalam tag
Atribut jarak sel digunakan. Nilainya juga hanya boleh menjadi nombor yang mengukur jarak dalam piksel.
Untuk memasang dalaman padding dari sempadan sel ke kandungannya diperlukan dalam tag
gunakan atribut cellpadding. Dan nilainya ialah nombor yang menunjukkan dimensi piksel.
Sila ambil perhatian bahawa penyemak imbas secara lalai menetapkan nilai kecil (dua piksel) untuk ruang sel dan padding sel , jadi untuk mengalih keluar jarak sama sekali, tetapkan atribut kepada sifar (0).
Contoh Sempadan Jadual HTML, Bingkai dan Padding
Sempadan meja, bingkai dan pelapik
| Sel 1.1 | Sel 1.2 | Sel 1.3 |
| Sel 2.1 | Sel 2.2 | Sel 2.3 |
| Sel 3.1 | Sel 3.2 | Sel 3.3 |
Jadual dengan hanya sempadan sel dan sempadan ditetapkan:
| Sel 1.1 | Sel 1.2 | Sel 1.3 |
| Sel 2.1 | Sel 2.2 | Sel 2.3 |
| Sel 3.1 | Sel 3.2 | Sel 3.3 |
Hasil dalam pelayar
Jadual dengan inden dan jarak yang diubah suai:
Sememangnya, tidak perlu melukis bingkai dan sempadan sel di atas meja untuk menukar inden dalaman dan jarak antara sel.
Menurut sintaks HTML, penyemak imbas menambah nilai jarak sel dan padding sel pada dimensi jadual dan selnya. Contohnya, jika anda menetapkan lebar sel kepada 100 piksel dan cellpadding="10" - penyemak imbas akan menambah 20 piksel pada lebar (10 setiap satu di kiri dan kanan) dan ia akan menjadi 120 piksel. Secara umum, anda akan memikirkannya semasa anda pergi.
Penyimpangan daripada topik atau cara mengalih keluar inden di sepanjang tepi halaman
Pada mulanya, semua penyemak imbas memasang margin kecil di sepanjang tepi halaman HTML, yang selalunya tidak diperlukan, jadi sekarang anda akan belajar bagaimana untuk membuangnya. Secara umum, maklumat ini harus diletakkan pada permulaan buku teks, tetapi ia tidak akan berguna untuk anda di sana.
Pada masa yang ditetapkan pada tag
Terdapat empat atribut yang menetapkan saiz jidar ini untuk setiap sisi halaman: margin atas (atas), margin kanan (kanan), margin bawah (bawah) dan margin kiri (kiri). Kini atribut ini sudah lapuk, jadi kami akan menggunakan gaya (CSS). Jadi, anda boleh menukar jarak margin di sepanjang tepi halaman dalam beberapa cara, saya akan menunjukkan kepada anda dua, dan anda akan belajar tentang yang ketiga jika anda memutuskan untuk mempelajari CSS.
Kaedah satu. Dalam tag
tentukan atribut gaya dengan nilai berikut:
style="margin:0" >...
- mengalih keluar inden dari semua sisi halaman HTML sekaligus.
gaya= "margin: atas kanan bawah kiri">...
- melaraskan saiz inden untuk setiap sisi mengikut arah jam. Sebagai peraturan, saiz dalam piksel digunakan, sebagai contoh: style= "margin:5px 3px 4px 5px" >...
Cara kedua dan lebih mudah. Dalam tag
Kerja rumah.
Dalam pelajaran ini, saya tidak akan menerangkan semuanya secara terperinci sama ada - hanya perkara umum. Untuk kesempurnaan, lihat contoh hasil.
- Buat tiga jadual, setiap satu terdiri daripada satu baris dan tiga lajur (lajur).
- Dalam jadual pertama letakkan Pengepala atau "pengepala" halaman (jangan dikelirukan dengan "pengepala" dokumen HTML), di bahagian kedua - menu kiri dan kanan, serta kandungan utama (kandungan), dalam ketiga - Pengaki atau "pengaki" halaman.
- Biarkan lebar lajur pertama dan terakhir setiap jadual ditetapkan.
- penting. Gunakan tag
![]()
hanya untuk mencipta empat butang menu mendatar dalam pengepala halaman. Dalam kes lain, biarkan imej pergi ke latar belakang, dan dalam sel kedua jadual hanya warna digunakan, dan dalam jadual pertama dan terakhir ialah #99FF99.
- Biarkan teks kandungan halaman dijajarkan pada kedua-dua belah sel jadual dan tajuk berpusat.
- Bagi jarak antara sel jadual, serta inden sel, fikirkan sendiri di mana ia harus dialih keluar sepenuhnya dan di mana ia perlu ditingkatkan.
Jadi, kami telah mengkaji tindakan paling mudah yang boleh dilakukan dengan sempadan jadual. Dan kini meja kelihatan lebih estetik. Walau bagaimanapun, pengisian sel secara langsung terletak pada sempadan. Ini boleh diperbaiki dengan mudah dengan hanya memasukkan sel dalam jadual HTML. Dan kemudian teks di dalam bingkai, dalam sel, akan lebih mudah dibaca.
Untuk mengesot sel, gunakan atribut padding sel untuk tag
. Walau bagaimanapun, terdapat satu lagi pilihan yang lebih disukai: CSS.
Dalam kes ini, lekukan ditetapkan menggunakan harta padding. Dengan bantuannya, ia tidak akan sukar untuk inden di mana perlu, iaitu, di bahagian atas, kanan, bawah atau kiri, menggunakan, masing-masing, salah satu sifat ini: padding-top, padding-kanan, padding-bottom Dan padding-left.
Anda boleh menentukan dengan tepat berapa banyak piksel lekukan sepatutnya. Mari kita berikan contoh di mana inden bawah akan menjadi 20
piksel, dan semua yang lain akan menjadi 10
. begitu CSS-kod akan kelihatan seperti ini:
Td ( padding: 10px; padding-bottom: 20px; )
Dan kod gaya lengkap pada peringkat ini:
Jadual ( sempadan: pepejal 1px biru; sempadan-runtuh: runtuh; ) td ( sempadan: pepejal 1px biru; padding: 10px; padding-bottom: 20px; )
Keputusan dalam pelayar:
Ruang antara sel
Sebagai peraturan, masalah yang berkaitan dengan mencipta jadual boleh diselesaikan dengan menggunakan tag, atribut dan sifat yang membolehkan anda membuat bingkai, inden dalam sel, dan juga menetapkan latar belakang warna sel itu sendiri.
Inden dalam jadual bukan sahaja terdapat di dalam sel. Mereka juga mungkin terdapat di antara sel itu sendiri.
Terdapat dua pilihan untuk membuat inden antara sel:
- menggunakan atribut jarak sel untuk tag
.
- menggunakan CSS-harta benda jarak sempadan.
Ia mesti ditekankan bahawa jarak sempadan dinyatakan untuk jadual secara keseluruhan, manakala harta padding ditulis secara langsung untuk sel.
Mari lihat contoh:
Jadual ( sempadan: pepejal 1px biru; sempadan-runtuh: berasingan; jarak sempadan: 5px; ) td ( sempadan: pepejal 1px biru; padding: 10px; padding-bottom: 20px; )
Dan hasil yang terhasil:
Marilah kami segera menetapkan bahawa anda tidak boleh cuba membuat lekukan sedemikian menggunakan roboh sempadan: runtuh. Lagipun, apabila menggunakan pilihan ini, sel "melekat" antara satu sama lain.
Dan untuk memastikan mereka berasingan antara satu sama lain, anda harus menggunakannya sempadan-runtuh: berasingan. Adalah penting untuk memahami bahawa nilai ini ialah nilai lalai. Dan ia digunakan hanya untuk menunjukkan dengan jelas bagaimana masalah ini diselesaikan. Jika kita memadamkan baris ini, hasil dalam bentuk sel yang terletak berasingan antara satu sama lain akan disimpan.
