Rumah > Artikel > hujung hadapan web > Apa yang boleh saya lakukan untuk menyelamatkan anda, meja saya (Haiyu Blog)_HTML/Xhtml_Webpage Production

Apa yang boleh saya lakukan untuk menyelamatkan anda, meja saya (Haiyu Blog)_HTML/Xhtml_Webpage Production

WBOYasal: 2016-05-16 16:37:161074semak imbas

Jadual pernah menduduki kedudukan penting dalam pembangunan web - reka letak Walaupun dalam Web2.0, kita masih boleh melihat reka letaknya. Walau bagaimanapun, teknologi sentiasa bertambah baik dan kaedah gabungan Div CSS akhirnya mengetuk pintu reka letak lama dan mencetuskan gelombang reka letak baharu. Apa yang diikuti adalah dendam baru dan lama Ramai orang, sama ada mereka mempunyai pendapat tentang jadual atau tidak, juga mula mengkritik jadual - kod kembung, tag tidak semantik, kaedah penulisan yang rumit, dll. Ingat, jadual pada asalnya tidak dicipta untuk susun atur, tetapi untuk memaparkan data. Meninggalkan susun atur meja tidak bermakna meninggalkan meja itu sendiri. Apa yang boleh saya lakukan untuk menyelamatkan awak, meja saya?

Apakah itu jadual:

Jadual juga merupakan jadual Html, pembawa data.

Berikut ialah cara yang agak standard untuk menulis kod jadual:

Salin kod

Kod adalah seperti berikut:

;th>Bulan

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 table-layout:fixed attribute

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.

Pemutus talian untuk masalah meja yang sukar

Menggunakan jadual untuk memaparkan data kadangkala menyakitkan kepala, iaitu memaparkan teks tertentu tanpa pemisah baris, terutamanya dalam pengepala ke, yang paling banyak digunakan. Sebenarnya, sakit kepala yang anda alami bukanlah pembalut baris, tetapi keserasian penyemak imbas di belakangnya menjadikan pembalut baris lebih sukar. Di sini, anda boleh menyemak artikel Panduan untuk memaksa pemisah baris dan memaksa tiada pemisah baris untuk mendapatkan inspirasi Artikel membincangkan secara terperinci cara menyelesaikan pemisah baris dalam situasi yang berbeza.

Secara amnya, cara yang disyorkan untuk membungkus baris dalam jadual ialah: set pertama susun atur jadual: 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.

Beberapa teg jadual biasa tetapi tidak dikenali

kepala, kaki dan badan

Ketiga-tiga teg ini ialah produk daripada apa yang dipanggil xhtml, dan terutamanya memberi anda keupayaan untuk mengumpulkan baris dalam jadual. 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:

Salin kod

Kod adalah seperti berikut:

Tarikh
18< /td>

;tr>
< ;th>Bulan

🎜>

/tbody>
< ;/table>

Secara peribadi, saya rasa benda ini tidak berguna, tidak berguna, dan sayang untuk dibuang. 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.

colgroup dan colgroup

Kedua-dua teg ini juga merupakan produk xhtml, dengan fungsi yang berkuasa dan keserasian yang sangat lemah.

teg kol 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.

Tempat untuk menggunakan jadual

Secara peribadi, saya berpendapat bahawa dalam bekas yang datanya sangat padat dan sangat bersiri, jadual adalah pilihan yang tepat. 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. Yang di atas ialah semakan mata pengetahuan jadual biasa, dan analisis serta pengisihan beberapa tempat yang biasa digunakan. Saya berharap selepas membaca artikel ini, anda akan dapat melihat dan menggunakan jadual dengan sikap yang betul. Saya harap artikel ini dapat menjimatkan sedikit, meja saya. terima kasih.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Sembunyikan elemen html melalui paparan atau visibility_HTML/Xhtml_Web page productionArtikel seterusnya：Sembunyikan elemen html melalui paparan atau visibility_HTML/Xhtml_Web page production

Artikel berkaitan

Lihat lagi

Tarikh
Senarai Bulan	Senarai Tarikh
AUG