การกำจัดช่องว่างในตาราง HTML

หากคุณใช้ตารางสำหรับการจัดวางหน้าเว็บ (ไม่มีใน XHTML อาจเป็นไปได้ว่าคุณจะได้รับพื้นที่เพิ่มมากขึ้นในเค้าโครงของคุณ) เพื่อแก้ไขปัญหานี้คุณต้องตรวจสอบทั้งนิยามตาราง HTML และข้อมูลเฉพาะของ แผ่นสไตล์การปกครอง

นิยามตาราง HTML

แท็ก HTML สำหรับตารางโดยค่าเริ่มต้นไม่สามารถควบคุมความต้องการในการเว้นวรรคบางส่วนได้ ยืนยันเรื่องสามอย่างเกี่ยวกับแท็ก "ตาราง" ภายในเอกสาร HTML ของคุณ:

1. ตารางของคุณมีแอตทริบิวต์ cellpadding ตั้งเป็น 0 หรือไม่?

   1. cellpadding = "0"

2. ตารางของคุณมีแอตทริบิวต์ cellspacing ตั้งเป็น 0 หรือไม่?

   1. cellspacing = "0"

3. มีช่องว่างใด ๆ ก่อนหรือหลังเนื้อหาและแท็กของตารางหรือไม่?

หมายเลข 3 คือนักเตะ บรรณาธิการ HTML หลายคนต้องการให้โค้ดเว้นระยะห่างทั้งหมดเพื่อให้อ่านได้ง่าย แต่เบราว์เซอร์จำนวนมากตีความแท็บพื้นที่ช่องว่างและผลตอบแทนที่ได้รับเป็นช่องว่างที่ต้องการภายในตารางของคุณ กำจัดช่องว่างรอบ ๆ แท็กของคุณและคุณจะมีโต๊ะที่กระทัดรัด

ชีตสไตล์

อย่างไรก็ตามอาจไม่ใช่ HTML ที่ปิดอยู่ Cascading Style sheets ควบคุมแอตทริบิวต์ที่แสดงผลบางส่วนของตารางและขึ้นอยู่กับหน้าเว็บคุณอาจหรืออาจไม่ได้ใส่ CSS เฉพาะตารางโดยเฉพาะ

สแกนไฟล์ CSS ที่ดูแลโดยใช้ค่าใด ๆ ต่อไปนี้ภายในตาราง " ,' ' th "หรือ ' td" คุณสมบัติและปรับตามต้องการ:

• ชายแดน: ระบุแอตทริบิวต์ของเส้นขอบของตารางหรือเซลล์
• ชายแดนยุบ: ถือว่าขอบที่อยู่ติดกันเป็นหนึ่งเพื่อหลีกเลี่ยงการทำซ้ำความกว้างของเส้นขอบ
• การขยายความ: เสนอพื้นที่ว่างเป็นพิกเซลรอบ ๆ เซลล์แต่ละเซลล์
• text-align: กำหนดการจัดตำแหน่งของข้อความภายในเซลล์
• ชายแดนระยะห่าง: ตั้งค่าระยะห่างระหว่างเซลล์เป็นพิกเซล

ทางเลือก

แม้ว่าคุณจะยังสามารถใช้ตาราง HTML (มาตรฐานได้รับการยอมรับและได้รับการสนับสนุนโดยทั่วไปในเบราว์เซอร์ปัจจุบัน) การออกแบบเว็บแบบตอบสนองที่ทันสมัยที่สุดจะใช้สไตล์ชีตแบบเรียงซ้อนเพื่อวางองค์ประกอบบนหน้าเว็บ ตารางยังคงสมเหตุสมผลสำหรับวัตถุประสงค์เดิมที่ต้องการในการแสดงข้อมูลแบบตาราง แต่สำหรับการจัดเค้าโครงและเนื้อหาของหน้าเว็บคุณจะใช้รูปแบบ CSS แทนได้ดียิ่งขึ้น