กลั่นกรองพื้นที่ที่ไม่ดีในตาราง 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 คุณสมบัติและปรับตามต้องการ:

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

ทางเลือก

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