Penjelasan terperinci tentang penggunaan aktual tata letak tabel HTML

Kapan tabel akan digunakan

Sekarang, tabel <able> umumnya tidak lagi digunakan untuk tata letak keseluruhan halaman web. Namun, ketika dihadapkan dengan desain spesifik tertentu, seperti input formulir dan presentasi data, formulir mungkin merupakan pilihan yang paling tepat.

Kesan intuitif dari tabel adalah bahwa elemen diatur dengan rapi oleh banyak sel, yang dapat dengan jelas melihat baris dan kolom. Ini dapat dikaitkan dengan Excel. Dari posisi Excel dalam pemrosesan data dan statistik, kami dapat memahami pentingnya tabel di halaman web.

Sederhananya, ketika Anda dapat secara intuitif merasakan bahwa banyak elemen diatur dalam konsep baris dan kolom, menggunakan tabel akan membuat Anda lebih mudah. Misalnya, formulir aplikasi di caniuse.com:

Menggunakan tabel itu sederhana, tetapi kadang -kadang tabel berakhir dengan setiap kisi, yang mungkin bukan yang Anda inginkan. Misalnya, jika beberapa kisi memiliki garis istirahat, maka seluruh tabel terlihat sangat tidak sedap dipandang karena garis pecah. Khusus untuk tabel yang digunakan untuk presentasi data, alokasi lebar adalah topik yang sangat penting. Anda mungkin perlu menghitung dengan cermat total lebar tabel untuk data yang dapat disajikan di setiap kolom kisi.

Ini karena tabel memiliki karakteristiknya sendiri dalam tata letak, dan akan mengikuti prinsip -prinsip tertentu dan menentukan tata letak aktualnya melalui perhitungan. Selanjutnya, artikel ini menggunakan contoh tes tabel aktual untuk mengeksplorasi bagaimana tabel menghitung tata letak mereka sendiri.

Artikel ini hanya berfokus pada metode yang paling umum untuk menerapkan tabel dan tidak mencantumkan semua kasus. Browser yang berbeda memiliki analisis yang berbeda dari beberapa konsep tabel, tetapi perhitungan tata letak pada dasarnya konsisten (jika ada perbedaan, mereka akan disebutkan secara terpisah).

Bentuk tes berikutnya akan disajikan dengan cara ini (konten diambil dari lintasan nol):

Pada saat yang sama, tabel akan mengatur perbatasan: runtuh; dan tempat-tempat perbatasan: 0;. Ini juga merupakan praktik yang paling umum untuk menerapkan tabel, dan normalisasi.CSS menggunakan bagian ini sebagai definisi inisialisasi.

Lapisan tabel atribut CSS yang ditentukan pada elemen <able> akan menentukan algoritma yang diterapkan pada tabel selama perhitungan tata letak. Ini memiliki dua nilai, otomatis dan diperbaiki. Dalam kasus normal, auto nilai default digunakan.

Perbedaan antara kedua algoritma ini adalah apakah tata letak lebar tabel terkait dengan konten data dalam tabel. Artikel ini akan membahas prinsip perhitungan tata letak tabel saat mengambil dua nilai ini.

Tata Letak Tabel Otomatis -Auto

Karakteristik tata letak tabel otomatis adalah bahwa tata letak lebar tabel terkait dengan semua konten data dalam tabel. Perlu mendapatkan semua konten tabel sebelum tata letak lebar akhir dapat ditentukan dan kemudian ditampilkan bersama.

Dengan cara ini, poin kuncinya adalah kontennya relevan. Bagaimana jika tabel mendefinisikan lebar tetap (500px di sini) dan semua sel tidak menentukan lebar (hanya membahas CSS menentukan lebar), apa yang terjadi? Lihat hasilnya:

Di tabel di atas, bagian kosong ditulis dengan & nbsp; ruang. Setelah perbandingan, kita dapat menemukan poin -poin berikut:

Kolom ke -2 dan ke -3 memiliki lebar yang sama.

Lebar kolom 1 dan rasio lebar kolom apa pun yang diikuti tampaknya 2: 1.

Tambahkan margin perbatasan dan dalam, dan lebar semua kolom disimpulkan, sama dengan lebar yang ditentukan oleh tabel.

Tidak ada lebar yang ditentukan dalam setiap sel, sehingga tata letak lebar sepenuhnya ditentukan oleh data konten tertentu (informasi teks). Bagaimana menjelaskan hasil seperti itu? Anda pertama -tama dapat secara intuitif menyimpulkan logika seperti itu:

Langkah 1: Pilih teks dengan konten teks terbanyak dari setiap kolom (pahami bahwa jika teks tidak membungkus garis, teks menempati lebar terluas) sebagai perwakilan.

Langkah 2: Bandingkan lebar perwakilan dari setiap kolom, dan tentukan mereka total lebar tabel, termasuk perbatasan dan margin dalam sesuai dengan hubungan proporsional lebarnya.

Mengacu pada logika di atas, dan kemudian melihat tabel sebelumnya, apakah ada beberapa alasan? Perhatikan bahwa rasio lebar yang disebutkan sebelumnya tampaknya 2: 1, apakah ini? Mari kita lihat versi yang menghapus margin batin:

Gunakan alat debugging front-end untuk melihat lebar sel di atas, dan Anda akan menemukan bahwa tabel ini berbeda dari sebelumnya, dan rasionya sangat dekat dengan 2: 1 (ya, ada juga titik kecil karena perbatasan, tetapi tanpa perbatasan, Anda tidak dapat membedakan kolom).

Dapat dilihat bahwa ketika menganalisis hubungan proporsional lebar, lebar konten, margin dalam, dan perbatasan akan diperhitungkan. Ini juga menunjukkan bahwa itu bukan ukuran dari jumlah kata, tetapi ukuran lebar yang dapat ditempati oleh kata -kata dalam keadaan tidak ada garis istirahat (2: 1 di sini berasal dari fakta bahwa karakter Cina sama lebarnya). Gunakan margin dalam secara alami hanya untuk membuat meja yang lebih indah :).

Apa yang terjadi ketika ada definisi lebar? Berikut adalah tabel dengan lebar yang didefinisikan sebagai bagian dari sel:

Kode HTML yang sesuai adalah: