Analisis mendalam teg jadual HTML dan pemisah baris yang berkaitan_HTML/Xhtml_Pengeluaran halaman web

Apakah jadual:
jadual ialah jadual Html, pembawa data.
Berikut ialah cara menulis kod jadual yang agak standard:

Kod XML/HTMLSalin kandungan ke papan keratan

1. <jadual sempadan="0" ruang sel="0" cellpadding="0" lebar="100%">
2. <tr>
3.  <ke>Bulanth> 
4.  <ke>Tarikhth> 
5. tr>
6. <tr>
7.  <td>OGtd>
8.  <td>18td>
9. tr>
10. meja>

Jadual HTML ringkas terdiri daripada elemen jadual dan satu atau lebih elemen tr, th atau td. Elemen tr mentakrifkan baris jadual, elemen ke mentakrifkan sel pengepala, dan elemen td mentakrifkan sel jadual. Atribut sempadan menentukan lebar sempadan jadual, padding sel menentukan ruang antara tepi sel dan kandungannya, dan jarak sel menentukan ruang antara sel Kami biasanya menetapkan tiga sifat ini secara manual kepada 0 untuk mengelakkan perbezaan penyemak imbas. Atribut lebar menentukan lebar jadual, kerana lebar jadual berubah dengan lebar elemen dalaman Dalam situasi biasa, kami mahu jadual menjadi lebar yang sama dengan bekas luaran, jadi lebar lalai sering ditetapkan. hingga 100% untuk mengisi bekas.

Saya perlu menyebut susun atur jadual: atribut tetap
susun atur jadual: auto (lalai) |
Parameter:
auto: Algoritma automatik lalai. Reka letak akan berdasarkan kandungan setiap sel. Jadual tidak akan dipaparkan sehingga setiap sel dibaca dan dikira, yang sangat perlahan.
ditetapkan: algoritma susun atur tetap. Dalam algoritma ini, reka letak mendatar hanya berdasarkan pada lebar jadual, lebar sempadan jadual, jarak sel dan lebar lajur, dan tiada kaitan dengan kandungan jadual. Kelajuan penghuraian adalah pantas.
Langkah kerja model reka letak tetap:
1. Semua elemen lajur yang nilai atribut lebarnya bukan automatik akan menetapkan lebar lajur mengikut nilai lebar.
2. Lebar sel lajur ini dalam baris pertama jadual, tetapkan lebar lajur ini mengikut lebar sel. Jika sel merentangi berbilang lajur, lebarnya dibahagikan sama rata merentas lajur.
3. Selepas dua langkah di atas, jika lebar lajur masih automatik, saiznya akan ditentukan secara automatik untuk menjadikan lebarnya sama dengan yang mungkin. Pada masa ini, lebar jadual ditetapkan kepada nilai lebar jadual atau jumlah lebar lajur (yang mana lebih besar). Jika lebar jadual lebih besar daripada jumlah lebar lajurnya, bahagikan perbezaan dengan bilangan lajur dan tambahkan lebar yang terhasil pada setiap lajur.
Kaedah ini pantas kerana semua lebar lajur ditentukan oleh baris pertama jadual. Sel dalam semua baris selepas baris pertama bersaiz mengikut lebar lajur yang ditakrifkan oleh baris pertama. Sel dalam baris kemudian ini tidak mengubah lebar lajur. Ini bermakna bahawa sebarang nilai lebar yang ditentukan untuk sel ini akan diabaikan.
Secara amnya apabila membuat HTML jadual yang kompleks, kadangkala anda akan mendapati bahawa tidak kira bagaimana anda melaraskan lebar setiap lajur dalam baris pertama, lebar lajur masih akan berubah tanpa diduga (seperti rentetan panjang teks Inggeris , dan jika terdapat tiada ruang di tengah, anda ingin mengehadkan lebar lajur ini, supaya teks panjang terpaksa dibalut tanpa memecahkan jadual, dan selalunya hasilnya ialah lebar yang sesuai tidak boleh dilaraskan tidak kira bagaimana anda mencubanya) . Pada masa ini, dalam keadaan terdesak, anda boleh menggunakan table-layout:fixed.

Teg jadual biasa tetapi tidak dikenali
thead, tfoot dan tbody
Tiga tag ini adalah produk daripada apa yang dipanggil xhtml, yang terutamanya membolehkan anda mengedit baris dalam jadual. Buat kumpulan. Apabila anda membuat jadual, anda mungkin mahu mempunyai baris pengepala, beberapa baris dengan data dan jumlah baris di bahagian bawah. Bahagian ini memberikan pelayar keupayaan untuk menyokong penatalan badan jadual secara bebas daripada pengepala dan pengaki jadual. Apabila jadual panjang dicetak, pengepala dan pengaki jadual boleh dicetak pada setiap halaman yang mengandungi data jadual. Secara peribadi, saya fikir tujuan utamanya sesuai untuk pengoptimuman paparan jadual yang sangat panjang. Teg
teg kepala mewakili pengepala jadual HTML
kepala kepala jadual Anda boleh menggunakan gaya berasingan untuk mentakrifkan pengepala jadual dan anda boleh mencetak pengepala jadual di bahagian atas halaman semasa mencetak. Teg
teg kepala mewakili pengaki HTML
Pengaki tkaki jadual Pengaki (nota kaki atau nota jadual) boleh ditakrifkan menggunakan gaya yang berasingan dan halaman boleh dicetak di bahagian bawah halaman semasa mencetak.
teg tbody mewakili badan jadual HTML
Apabila penyemak imbas memaparkan jadual, ia biasanya memuat turun jadual sepenuhnya dan kemudian memaparkannya sepenuhnya, oleh itu, apabila jadual itu sangat panjang, anda boleh gunakan tbody untuk memaparkannya dalam segmen.
Nota: Jika anda menggunakan elemen thead, tfoot dan tbody, anda mesti menggunakan kesemuanya. Susunan ia muncul ialah: thead, tfoot, tbody, supaya penyemak imbas boleh memaparkan pengepala dan pengaki sebelum menerima semua data. Anda mesti menggunakan teg ini di dalam elemen jadual dan iklan mesti mempunyai teg tr di dalamnya. Oleh itu, cara yang lebih standard untuk menulis jadual ialah kod berikut:

Kod XML/HTMLSalin kandungan ke papan keratan

1. <jadual sempadan="0"  ruang sel="0" cellpadding="0" lebar="100%">  
2.   <kepala>  
3.     <tr>  
4.       <ke>Bulanth>  
5.       <th>Tarikhth>  
6.     tr>  
7.   kepala>  
8.   <tfoot>  
9.     <tr>  
10.       <ke>Senarai Bulanke>  
11.       <ke>Senarai Tarikhke>  
12.     tr>  
13.   tfoot>  
14.   <tbody>  
15.     <tr>  
16.       <td>OGtd>  
17.       <td>18td>  
18.     tr>  
19.   tbody>  
20. jadual>  

Secara peribadi, saya rasa benda ni tak guna, tak guna dan sayang nak buang. Projek kecil boleh menambah beberapa semantik, tetapi kerana mereka telah menghadapi dilema untuk mempunyai berbilang pengepala berbeza dipaparkan dalam jadual yang sama, yang mengehadkan pembangunan masa hadapan, projek formal menggunakan teg ini dengan berhati-hati dari perspektif skalabiliti.

col dan colgroup
juga merupakan produk xhtml. Ia berkuasa dan serasi. Teg
col mentakrifkan nilai atribut untuk satu atau lebih lajur dalam jadual. Teg
colgroup digunakan untuk mengumpulkan lajur dalam jadual untuk pemformatan.
Fungsi utama mereka adalah untuk mengawal lebar sel, yang menjimatkan masalah mentakrifkan setiap sel secara berasingan Pada masa lalu, kami sering menentukan lebar pada th atau td dalam baris pertama untuk menentukan lebar setiap lajur. dan col bukan sahaja boleh mentakrifkan lebar tetapi juga mentakrifkan atribut lain pada masa yang sama Contohnya, anda boleh menggunakan col untuk mengawal jumlah lebar beberapa lajur, dan anda juga boleh mengawal warna latar belakang lajur ini. Tetapi yang ideal adalah penuh, dan realitinya adalah tulang belakang Seperti yang dinyatakan sebelum ini, lebih besar fungsi, lebih besar keserasian Menurut ujian sedia ada, hanya terdapat dua aplikasi yang boleh memainkan peranan dan memastikan keserasian antara col dan colgroup. lebar dan latar belakang. Untuk lebar, saya sendiri lebih suka menggunakan kaedah konvensional, tetapkan lebar pada baris pertama dan pastikan lebar lajur. Bagi latar belakang, dalam praktiknya jarang sekali jadual menggunakan latar belakang yang berbeza di kawasan yang luas. Oleh itu, saya secara peribadi berfikir: jangan gunakannya sebanyak mungkin.

Di mana hendak menggunakan jadual
Secara peribadi, saya berpendapat bahawa dalam bekas yang datanya sangat padat dan sangat bersiri, adalah betul untuk menggunakan jadual. Contoh yang paling biasa ialah halaman penyelesaian pesanan beli-belah biasa kami, yang menyenaraikan butiran pesanan anda: nama produk, harga unit, kuantiti pembelian, jumlah kecil, yuran penghantaran, dsb. Akhirnya, terdapat keputusan jumlah pesanan akhir di bawah, jadual Ia boleh dikatakan seperti ikan di dalam air di sini, dan ia telah mencapai kesan ajaib pembawa data.

Balut baris selok-belok jadual
Kadang-kadang timbul sakit kepala apabila memaparkan data dalam jadual, iaitu, memaparkan teks tertentu tanpa pembalut baris, terutamanya apabila digunakan dalam pengepala jadual. kebanyakan tempat. Sebenarnya, sakit kepala yang anda alami bukanlah pembalut baris, tetapi keserasian penyemak imbas di belakangnya menjadikan pembalut baris lebih sukar.
Secara amnya, cara yang disyorkan untuk membungkus baris dalam jadual ialah: set susun atur jadual pertama: ditetapkan untuk jadual Pada asasnya, selepas menetapkan atribut ini, masalah pembungkusan garisan asas boleh diselesaikan tanpa td dalam jadual. Th disebabkan oleh jumlah setiap kandungan di dalam, situasi bersaing untuk lebar td dan th lain berlaku. Jika anda masih menghadapi masalah pemutusan baris paksa pada masa ini, kemudian tambahkan lapisan div di dalam td, dan kemudian gunakan dua kaedah CSS word-wrap:break-word untuk menyelesaikannya; masalah putus talian.

Garis panduan mengenai putus talian paksa dan putus talian paksa
Masalah putus talian paksa dan putus talian paksa pernah mengganggu saya Setiap kali saya menghadapi masalah putus talian, ia adalah permulaan kenangan yang menyakitkan Kini saya akhirnya belajar dari kesakitan Mari kita bekerjasama untuk menyelesaikan masalah yang sudah lama dan degil ini.
Atribut yang digunakan untuk memaksa pemisah baris dan tidak memaksa pemisah baris
Kami biasanya menggunakan tiga atribut CSS untuk mengawal pemisah baris: word-break; Ketiga-tiga atribut ini boleh dikatakan dicipta khusus untuk pemecahan baris teks. Mula-mula kita perlu tahu untuk apa ketiga-tiga atribut ini digunakan:

sintaks balutan perkataan
balut perkataan: biasa (lalai) | perkataan putus
Setiap penyemak imbas boleh mengenalinya
Parameter:
biasa: Membolehkan kandungan untuk melangkaui sempadan kontena yang ditentukan.
kata putus: Kandungan akan pecah dalam sempadan. Pemecahan perkataan akan dicetuskan apabila perlu (nota: sila bezakan dengan jelas bahawa pemecahan perkataan dan pemecahan perkataan adalah perkara yang berbeza, satu ialah atribut dan satu lagi ialah parameter).
Penerangan:
pembalut perkataan mengawal sama ada untuk "memecahkan baris untuk perkataan", dan menetapkan atau mendapatkan semula sama ada untuk memutuskan baris apabila garis semasa melebihi sempadan bekas yang ditentukan. Tidak ada masalah dengan bahasa Cina, dan tidak ada masalah dengan ayat bahasa Inggeris. Tetapi untuk rentetan bahasa Inggeris yang panjang, ia tidak berfungsi.
Contoh:
Perkataan tahniah tergolong dalam rentetan panjang perkataan-perkataan bahasa Inggeris:break-word memperlakukan keseluruhan perkataan jika hujung baris tidak cukup lebar untuk memaparkan keseluruhan perkataan , ia akan meletakkan keseluruhan perkataan pada baris seterusnya secara automatik, tanpa memotong perkataan, itulah sebabnya ia tidak berfungsi untuk rentetan teks yang panjang. word-wrap:normal ialah lalai, dan perkataan Inggeris tidak dipisahkan.
Kesimpulan:
Skop tindakan hanya elemen tahap blok standard seperti div Jadual elemen seperti th dan td diiktiraf tetapi tidak mempunyai kesan (jika td, th tambah lebar word-wrap boleh berfungsi di bawah IE. Berkesan, tetapi dari perspektif keserasian lengkap dan ingatan yang mudah, kesimpulan sebelumnya akan diguna pakai).

sintaks patah perkataan
patah kata: normal (lalai) | simpan-semua
Parameter:
biasa: mengikut bahasa Asia ​dan peraturan bukan Teks untuk bahasa Asia yang membenarkan pemisah baris dalam perkataan.
pecah-semua: Tingkah laku ini sama seperti biasa dalam bahasa Asia. Pecah dalam mana-mana perkataan daripada baris teks bahasa bukan Asia juga dibenarkan. Nilai ini sesuai untuk teks Asia yang mengandungi beberapa teks bukan Asia.
keep-all: Sama seperti biasa untuk semua bahasa bukan Asia. Untuk bahasa Cina, Korea dan Jepun, patah perkataan tidak dibenarkan. Baik untuk teks bukan Asia yang mengandungi sejumlah kecil teks Asia.
Penjelasan:
kata-patah:pecah-semua, ialah kata putus. Apabila perkataan mencapai sempadan, huruf seterusnya secara automatik pergi ke baris seterusnya. Ia terutamanya menyelesaikan masalah rentetan panjang bahasa Inggeris (ia hanya menebus kecacatan di atas bahawa word-wrap:break-word tidak berfungsi untuk rentetan teks yang panjang).
Contoh:
Melanjutkan dengan perkara di atas, perkataan tahniah tergolong dalam rentetan panjang perkataan Inggeris Word-break:break-all akan memotong perkataan itu, dan hujung baris akan menjadi seperti conra (the. bahagian hadapan ucapan tahniah. Seterusnya Bahagian belakang bagi ucapan selamat (conguatulation).
word-break:keep-all merujuk kepada perkataan berterusan bahasa Cina, Jepun dan Korea. Maksudnya, jika anda hanya menggunakan masa ini tanpa bungkus perkataan, orang Cina tidak akan membalut. (Ayat bahasa Inggeris adalah perkara biasa.)
Kesimpulan:
hanya berfungsi pada elemen tahap blok standard seperti div elemen jadual seperti th dan td dikenali tetapi tidak mempunyai kesan (diuji di bawah pemecahan perkataan Chrome: pemecahan-. semua Ia berkesan, tetapi dari perspektif keserasian lengkap dan ingatan yang mudah, kesimpulan sebelumnya akan diguna pakai). Firefox dan Opera tidak dapat mengenali pemecahan kata, apatah lagi kesan penggunaan pemecahan kata dalam th dan td di bawah Firefox.

sintaks ruang putih
ruang putih: biasa (lalai) | pra | nowrap
Parameter:
biasa: lalai. Ruang putih diabaikan oleh penyemak imbas.
pra: Ruang kosong akan dikekalkan oleh penyemak imbas. Ia berkelakuan seperti teg pra dalam HTML.
nowrap: Teks tidak akan dibalut Teks akan diteruskan pada baris yang sama sehingga teg br ditemui.
Nota:
Untuk atribut pra, beberapa aksara ruang kosong berturut-turut dalam HTML akan digabungkan, dan kemudian untuk mengelakkannya daripada digabungkan (peristiwa yang paling biasa adalah untuk menunjukkan lekukan teks kod), ruang putih aksara akan diteruskan. Ia dikekalkan tanpa memerlukan kami menambah gaya dan teg tambahan untuk mengawal lekukan dan pembalut barisnya. Prinsip teg pra adalah sama Terdapat ruang kosong: pra secara lalai.
Untuk atribut nowrap, ini adalah teras untuk memaksa tiada pemisah baris Secara amnya, atribut ini digunakan untuk memaksa tiada pemisah baris. Tiada masalah dalam div dan td Firefox, serta dalam div IE. Satu-satunya kelemahan ialah terdapat masalah dalam td IE Jika td tidak menyatakan lebar, nowrap masih sah Jika td mempunyai lebar dan tiada tanda baca atau ruang dalam teks (seperti rentetan panjang. Teks bahasa Cina), nowrap tidak akan berfungsi lagi. Penyelesaiannya ialah menambah word-break:keep-all;

Ringkasan pemisah baris paksa:
Jika anda perlu memaksa pemisah baris dalam elemen tahap blok standard seperti div, penyelesaian yang paling biasa ialah word-wrap:break-word-; break:break- all; Kelemahan kaedah ini ialah jika hujung baris adalah rentetan perkataan bahasa Inggeris yang panjang, perkataan itu akan terkoyak dengan cara yang janggal (dan FF tidak mengenali pemecahan perkataan, tetapi tidak akan merobek perkataan itu). Saya secara peribadi berpendapat bahawa jika anda meletakkan rentetan panjang alamat yang serupa dengan URL dalam div ini, maka menggunakan penyelesaian ini adalah pilihan yang sangat baik (Nota: Memandangkan FF tidak mengenali pemecahan perkataan, tidak ada jaminan bahawa perkataan URL akan menjadi patah kemas di hujung setiap baris , tetapi ini juga merupakan pilihan yang tidak berdaya). Jika anda tidak meletakkan rentetan panjang bahasa Inggeris yang boleh dipecahkan seperti URL, tetapi ayat bahasa Inggeris, maka gunakan word-wrap:break-word;. Bagi word-wrap:break-word; saya lihat di Internet, ia dikatakan serasi dengan IE dan FF, tetapi selepas ujian peribadi, ia seolah-olah tidak mempunyai kesan khas.

Ringkasan pembungkusan bukan talian paksa:
Masalah pembungkusan bukan talian paksa agak mudah untuk dianalisis Seperti yang dibincangkan di atas, gunakan white-space:nowrap, div dan td Firefox. Begitu juga dalam div IE, tiada masalah. Satu-satunya kelemahan ialah terdapat masalah dalam td IE Jika td tidak menyatakan lebar, nowrap masih sah Jika td mempunyai lebar dan tiada tanda baca atau ruang dalam teks (seperti rentetan panjang. Teks bahasa Cina), nowrap tidak akan berfungsi lagi. Penyelesaiannya ialah menambah word-break:keep-all; Ringkasnya, cara yang lebih selamat ialah meletakkan satu lagi lapisan div antara teks dan td, dan kemudian gunakan nowrap, yang tidak akan memaksa tiada pemisah baris. Ambil perhatian bahawa pada masa ini, kemungkinan besar terlalu banyak teks akan melimpahi bekas, jadi anda perlu menambah limpahan: tersembunyi untuk mengelakkan bekas daripada melimpah, supaya ia boleh serasi dengan pelbagai penyemak imbas.
Selepas meringkaskan begitu banyak, saya mendapati bahawa ia hanya beberapa atribut yang mengimbangi pelbagai keserasian dalam penyemak imbas nampaknya tiada penyelesaian sempurna yang boleh serasi sepenuhnya dengan semua penyemak imbas adalah Cuba pastikan paparan penyemak imbas konsisten sebanyak mungkin. Jika anda masih merasakan bahawa anda mesti serasi dengan semua penyemak imbas, maka penyelesaian terakhir adalah dengan menggunakan JS Dalam artikel akan datang, saya akan mempertimbangkan untuk memenuhi keperluan ini dengan kos JS terkecil, tetapi ini bukan dalam skop artikel ini.