จำเป็นต้องขยายตารางให้ครอบคลุมพื้นที่ทั้งหมดของหน้าต่างเบราว์เซอร์ ตัวอย่างเช่น เมื่อวางการออกแบบหน้าไว้ในตาราง การแก้ปัญหานี้ไม่จำเป็นต้องเขียนโค้ดที่ซับซ้อน แต่เกี่ยวข้องกับคุณลักษณะบางอย่างของมาร์กอัปของหน้าเว็บ
จำเป็น
ความรู้พื้นฐานของ HTML
คำแนะนำ
ขั้นตอนที่ 1
ขั้นแรก คุณต้องชี้แจงความหมายของการดำเนินการที่จะเกิดขึ้น ในโค้ด HTML หน้าตารางคือชุดของแท็กคู่ที่ซ้อนกัน (การเปิดหนึ่งครั้งและการปิดหนึ่งครั้ง) แท็กเซลล์ (
) ซ้อนอยู่ภายในแท็กสตริง (
) และสิ่งเหล่านี้ กลายเป็นแท็กตาราง (
). ในแท็กเปิดของตาราง คุณสามารถกำหนดความกว้างและความสูงได้ทั้งในหน่วยแบบสัมบูรณ์ (พิกเซล) และแบบสัมพัทธ์ (เปอร์เซ็นต์) ด้วยขนาดสัมพัทธ์ ความกว้างและความสูงขององค์ประกอบหลักของตารางจะถูกนำมาเป็น 100% หากคุณวางตารางในเนื้อหาของหน้าโดยตรง (และไม่ใช่ในเลเยอร์ แบบฟอร์ม ตารางอื่นๆ ฯลฯ) ขนาดขององค์ประกอบหลักจะเป็นความกว้างและความสูงของหน้า ซึ่งหมายความว่าหากต้องการขยายตารางไปยังพื้นที่ว่างทั้งหมด คุณต้องระบุขนาดแนวนอนและแนวตั้ง 100% สำหรับตาราง
ขั้นตอนที่ 2
ตอนนี้คุณสามารถเริ่มนำสิ่งนี้ไปปฏิบัติใน HTML ความกว้างและความสูงของตารางถูกระบุโดยแอตทริบิวต์ width and height ดังนั้นโค้ดตารางที่ระบุมิติข้อมูล 100% ในทุกทิศทาง ตัวอย่างเช่น เมื่อมีเซลล์สองเซลล์ในแถวเดียว อาจมีลักษณะดังนี้:
| เซลล์ด้านซ้ายของตาราง | เซลล์ขวาของตาราง |
ขั้นตอนที่ 3
การระบุความกว้างและความสูง 100% ก็เพียงพอแล้วที่จะขยายตารางหากคุณเลือกมาตรฐาน HTML ที่ถูกต้องซึ่งเบราว์เซอร์ควรอ่านโค้ดของเพจ แท็กจะอยู่ที่บรรทัดแรกของเอกสาร คุณต้องมีแท็กที่มีเนื้อหาดังต่อไปนี้:
ขั้นตอนที่ 4
และควรคำนึงถึงจุดอื่นในโค้ดของคุณ: โดยค่าเริ่มต้น หน้าจะถูกเยื้องจากขอบหน้าต่างทีละสองสามพิกเซล ดังนั้นตารางแม้หลังจากกรอกทั้งหน้าแล้ว จะไม่ขยายไปถึงทั้งหน้าต่าง เพื่อกำจัดฟิลด์ที่ไม่จำเป็นเหล่านี้ คุณสามารถระบุศูนย์เยื้องในแอตทริบิวต์ที่เกี่ยวข้องในแท็กเปิดของเนื้อหาหน้า ():
ขั้นตอนที่ 5
เมื่อประกอบแล้ว โค้ดเพจทั้งหมดที่มีตารางที่ขยายจนสุดความกว้างและความสูงของหน้าจอจะมีลักษณะดังนี้:
โต๊ะยืด
| เซลล์ด้านซ้ายของตาราง | เซลล์ขวาของตาราง |