จะใช้ตารางเมื่อใด
ตอนนี้ตาราง <Table> โดยทั่วไปจะไม่ใช้สำหรับเค้าโครงโดยรวมของหน้าเว็บอีกต่อไป อย่างไรก็ตามเมื่อต้องเผชิญกับการออกแบบเฉพาะบางอย่างเช่นการป้อนข้อมูลแบบฟอร์มและการนำเสนอข้อมูลแบบฟอร์มอาจเป็นตัวเลือกที่เหมาะสมที่สุด
ความประทับใจที่ใช้งานง่ายของตารางคือองค์ประกอบที่จัดเรียงอย่างเรียบร้อยโดยเซลล์หลายเซลล์ซึ่งสามารถมองเห็นแถวและคอลัมน์ได้อย่างชัดเจน สิ่งนี้สามารถเชื่อมโยงกับ Excel จากตำแหน่งของ Excel ในการประมวลผลข้อมูลและสถิติเราสามารถเข้าใจความสำคัญของตารางในหน้าเว็บ
พูดง่ายๆเมื่อคุณสามารถรู้สึกได้ว่าองค์ประกอบหลายอย่างถูกจัดเรียงในแนวคิดของแถวและคอลัมน์การใช้ตารางจะทำให้คุณง่ายขึ้นมาก ตัวอย่างเช่นแบบฟอร์มใบสมัครใน caniuse.com:
การคำนวณเค้าโครงตารางการใช้ตารางนั้นง่าย แต่บางครั้งตารางก็จบลงด้วยแต่ละกริดซึ่งอาจไม่ใช่สิ่งที่คุณต้องการ ตัวอย่างเช่นหากกริดบางตัวมีการแบ่งบรรทัดแล้วทั้งตารางดูไม่น่าดูมากเพราะตัวแบ่งบรรทัด โดยเฉพาะอย่างยิ่งสำหรับตารางที่ใช้สำหรับการนำเสนอข้อมูลการจัดสรรความกว้างเป็นหัวข้อที่สำคัญมาก คุณอาจต้องคำนวณความกว้างทั้งหมดของตารางอย่างระมัดระวังสำหรับข้อมูลที่อาจนำเสนอในแต่ละคอลัมน์ของกริด
นี่เป็นเพราะตารางมีลักษณะของตัวเองในรูปแบบและจะเป็นไปตามหลักการบางอย่างและกำหนดรูปแบบที่แท้จริงผ่านการคำนวณ ถัดไปบทความนี้ใช้ตัวอย่างการทดสอบตารางจริงเพื่อสำรวจว่าตารางคำนวณเลย์เอาต์ของตนเองได้อย่างไร
คำสั่งเริ่มต้นบทความนี้มุ่งเน้นไปที่วิธีการที่พบบ่อยที่สุดในการใช้ตารางและไม่ได้แสดงรายการทั้งหมด เบราว์เซอร์ที่แตกต่างกันมีการวิเคราะห์ที่แตกต่างกันของแนวคิดบางอย่างของตาราง แต่การคำนวณเลย์เอาต์นั้นสอดคล้องกันโดยทั่วไป (หากมีความแตกต่างพวกเขาจะถูกกล่าวถึงแยกกัน)
แบบฟอร์มการทดสอบถัดไปจะถูกนำเสนอด้วยวิธีนี้ (เนื้อหาถูกนำมาจากวิถีของศูนย์):
ในเวลาเดียวกันตารางจะตั้งค่าการล่มสลายของเส้นขอบ: ล่มสลาย; และระยะห่างระหว่างชายแดน: 0; นี่เป็นวิธีปฏิบัติที่พบบ่อยที่สุดสำหรับการใช้ตารางและ Normalize.cs ใช้ส่วนนี้เป็นคำจำกัดความการเริ่มต้น
อัลกอริทึมสองแอตทริบิวต์ CSS ตารางเวลาที่กำหนดไว้ในองค์ประกอบ <bable> จะกำหนดอัลกอริทึมที่ใช้กับตารางในระหว่างการคำนวณเลย์เอาต์ มันมีสองค่าคืออัตโนมัติและแก้ไข ในกรณีปกติจะใช้ค่าเริ่มต้นอัตโนมัติ
ความแตกต่างระหว่างอัลกอริทึมทั้งสองนี้คือการจัดวางความกว้างของตารางนั้นเกี่ยวข้องกับเนื้อหาข้อมูลในตารางหรือไม่ บทความนี้จะหารือเกี่ยวกับหลักการของการคำนวณเลย์เอาต์ของตารางเมื่อใช้ค่าทั้งสองนี้
เค้าโครงตารางอัตโนมัติ -AUTO
ลักษณะของเค้าโครงตารางอัตโนมัติคือเค้าโครงความกว้างของตารางเกี่ยวข้องกับเนื้อหาข้อมูลทั้งหมดในตาราง จำเป็นต้องได้รับเนื้อหาตารางทั้งหมดก่อนที่จะสามารถกำหนดเค้าโครงความกว้างสุดท้ายแล้วแสดงด้วยกัน
ด้วยวิธีนี้ประเด็นสำคัญคือเนื้อหามีความเกี่ยวข้อง จะเกิดอะไรขึ้นถ้าตารางกำหนดความกว้างคงที่ (500px ที่นี่) และเซลล์ทั้งหมดไม่ได้กำหนดความกว้าง (เฉพาะการพูดคุย CSS กำหนดความกว้าง) จะเกิดอะไรขึ้น? ดูผลลัพธ์:
ในตารางด้านบนส่วนที่ว่างเปล่าเขียนด้วย & nbsp; ช่องว่าง หลังจากเปรียบเทียบเราสามารถค้นหาประเด็นต่อไปนี้:
คอลัมน์ที่ 2 และ 3 มีความกว้างเท่ากัน
ความกว้างของคอลัมน์ 1 และอัตราส่วนความกว้างของคอลัมน์ใด ๆ หลังจากนั้นดูเหมือนว่าจะเป็น 2: 1
เพิ่มขอบด้านในและระยะขอบด้านในและความกว้างของคอลัมน์ทั้งหมดจะรวมอยู่เท่ากับความกว้างที่กำหนดโดยตาราง
ไม่มีความกว้างที่กำหนดไว้ในแต่ละเซลล์ดังนั้นเค้าโครงความกว้างจะถูกกำหนดทั้งหมดโดยข้อมูลเนื้อหาเฉพาะ (ข้อมูลข้อความ) จะอธิบายผลลัพธ์ดังกล่าวได้อย่างไร? คุณสามารถอนุมานตรรกะดังกล่าวได้ก่อน:
ขั้นตอนที่ 1: เลือกข้อความที่มีเนื้อหาข้อความมากที่สุดจากแต่ละคอลัมน์ (เข้าใจว่าหากข้อความไม่ปิดบรรทัดข้อความจะใช้ความกว้างที่กว้างที่สุด) เป็นตัวแทน
ขั้นตอนที่ 2: เปรียบเทียบความกว้างของตัวแทนของแต่ละคอลัมน์และกำหนดความกว้างทั้งหมดของตารางรวมถึงพรมแดนและระยะขอบด้านในตามความสัมพันธ์ที่เป็นสัดส่วนความกว้าง
อ้างถึงตรรกะข้างต้นแล้วดูที่ตารางก่อนหน้ามีเหตุผลบางอย่างหรือไม่? โปรดทราบว่าอัตราส่วนความกว้างที่กล่าวถึงก่อนหน้านี้ดูเหมือนจะเป็น 2: 1 นี่จะเป็นอย่างไร มาดูเวอร์ชันที่ลบระยะขอบด้านใน:
ใช้เครื่องมือการดีบักส่วนหน้าเพื่อดูความกว้างของเซลล์ด้านบนและคุณจะพบว่าตารางนี้แตกต่างจากก่อนหน้านี้และอัตราส่วนใกล้เคียงกับ 2: 1 (ใช่มีจุดเล็ก ๆ เนื่องจากเส้นขอบ แต่ไม่มีเส้นขอบคุณไม่สามารถแยกแยะคอลัมน์)
จะเห็นได้ว่าเมื่อวิเคราะห์ความสัมพันธ์สัดส่วนความกว้างความกว้างของเนื้อหาขอบด้านในและชายแดนจะถูกนำมาพิจารณา สิ่งนี้ยังแสดงให้เห็นว่ามันไม่ใช่การวัดจำนวนคำ แต่เป็นการวัดความกว้างที่คำพูดสามารถครอบครองในสถานะที่ไม่มีการแบ่งบรรทัด (2: 1 ที่นี่มาจากข้อเท็จจริงที่ว่าตัวละครจีนมีความกว้างเท่ากัน) ใช้ระยะขอบด้านในตามธรรมชาติเพื่อสร้างตารางที่สวยงามยิ่งขึ้น :)
จะเกิดอะไรขึ้นเมื่อมีคำจำกัดความความกว้าง? นี่คือตารางที่มีความกว้างที่กำหนดไว้ในส่วนของเซลล์:
รหัส HTML ที่สอดคล้องกันคือ:
XML/HTML รหัสคัดลอกเนื้อหาไปยังคลิปบอร์ด