ตารางที่ซ้อนกันลดหน้าเว็บของคุณลง
หน้าเว็บต้องดาวน์โหลดอย่างรวดเร็ว แต่ตารางที่ซ้อนกันสามารถทำให้กระบวนการทำงานช้าลง อย่าให้ใครบอกคุณได้ว่ามีผู้ใช้อินเทอร์เน็ตบรอดแบนด์หรืออินเทอร์เน็ตความเร็วสูงมากขึ้นดังนั้นคุณจึงไม่ต้องกังวลกับความเร็วในการโหลดหน้าเว็บของคุณ ด้วยจำนวนเนื้อหาบนเว็บหน้าเว็บหรือไซต์ที่โหลดช้าจะมีผู้เข้าชมน้อยกว่าไซต์ที่โหลดได้อย่างรวดเร็ว ความเร็วเป็นสิ่งที่สำคัญมาก
ตารางที่ซ้อนกันคืออะไร?
ตารางที่ซ้อนกันเป็นตาราง HTML ที่มีตารางอื่นอยู่ข้างใน ตัวอย่างเช่น:
คอลัมน์ 1
| คอลัมน์ 2
| คอลัมน์ 3
|
คอลัมน์ 1
|
ตารางที่ซ้อนกัน 1
ตารางที่ซ้อนกัน 2
| คอลัมน์ 3
|
คอลัมน์ 1
| คอลัมน์ 2
| คอลัมน์ 3
ตารางที่ซ้อนกันทำให้หน้าเว็บต้องดาวน์โหลดช้าลง ตารางเดียวบนเว็บเพจจะไม่ทำให้หน้าดาวน์โหลดช้าลง (ภายในเหตุผล) แต่ในขณะที่คุณวางตารางไว้ในตารางอื่นจะทำให้เบราว์เซอร์แสดงผลได้ยากขึ้นดังนั้นหน้าเว็บจึงโหลดช้าลง และยิ่งตารางอื่น ๆ ที่คุณซ้อนอยู่ภายในกันและกันหน้าเว็บจะทำงานช้าลงเท่านั้น
เมื่อคุณสร้างหน้าเว็บที่มีตารางโปรดจำไว้ว่ายิ่งตารางต่างๆอยู่ในตารางมากเท่าใดหน้าเว็บจะทำงานช้าลงเท่านั้น โดยปกติเมื่อโหลดหน้าเว็บเบราเซอร์จะเริ่มต้นที่ด้านบนสุดของ HTML และโหลดตามลำดับลงที่หน้า อย่างไรก็ตามด้วยตารางที่ซ้อนกันจะต้องค้นหาจุดสิ้นสุดของตารางก่อนที่จะสามารถแสดงข้อมูลทั้งหมดได้
ตารางสำหรับเค้าโครง คุณ ไม่ ควร ใช้ตารางสำหรับเค้าโครง ในเว็บเพจของคุณ เกือบทุกครั้งที่คุณต้องการให้คุณใช้ตารางที่ซ้อนกันดังนั้นหน้าเว็บแบบตารางจะโหลดช้ากว่าการออกแบบเดียวกันใน CSS
นอกจากนี้ถ้าคุณกำลังพยายามเขียน XHTML ที่ถูกต้องตารางไม่ควรใช้สำหรับเค้าโครงเลย ตารางเป็นข้อมูลแบบตาราง (เช่นสเปรดชีต) ไม่ใช่สำหรับรูปแบบ แต่คุณควรใช้ CSS สำหรับการออกแบบเค้าโครง - CSS แสดงผลได้รวดเร็วและช่วยให้คุณรักษา XHTML ที่ถูกต้อง
การออกแบบตารางการโหลดที่เร็วขึ้น ถ้าคุณออกแบบตารางที่มีหลายแถวมักจะโหลดได้เร็วขึ้นถ้าคุณเขียนแต่ละแถวเป็นตารางแยกต่างหาก ตัวอย่างเช่นคุณสามารถเขียนตารางเช่นนี้
แถวบนสุด
|
คอลัมน์ด้านซ้าย
| คอลัมน์ด้านขวา
แต่ถ้าคุณเขียนตารางเดียวกันเป็นสองตารางดูเหมือนว่าจะโหลดได้เร็วขึ้นเนื่องจากเบราว์เซอร์จะแสดงผลเป็นอันดับแรกและแสดงผลเป็นอันดับที่สองแทนที่จะแสดงผลตารางทั้งหมดพร้อมกัน เคล็ดลับคือเพื่อให้แน่ใจว่าแต่ละตารางมีความกว้างเท่ากันและรูปแบบอื่น ๆ (เช่น padding ขอบและเส้นขอบ)
แถวบนสุด
คอลัมน์ด้านซ้าย
| คอลัมน์ด้านขวา
การแปลงตารางที่ซ้อนกันเป็นตารางเดียว คุณอาจรู้สึกว่าทั้งหมดนี้เป็นข้อมูลที่ดี แต่คุณมีตารางที่ ต้อง มีตารางอื่นที่ซ้อนอยู่ แม้ว่าวิธีนี้อาจเป็นความจริงบ่อยครั้งคุณสามารถแปลงตารางที่ซ้อนกันเป็นตารางเดียวที่ซับซ้อนกว่าเล็กน้อยโดยใช้แอตทริบิวต์และในเซลล์ตารางของคุณ ตัวอย่างเช่นในตารางที่ซ้อนกันที่ด้านบนฉันสามารถแปลงค่านี้เป็นตารางเดียวที่มีเพียงแอตทริบิวต์ colspan :
คอลัมน์ 1
| colspan = "2" > คอลัมน์ 2
| คอลัมน์ 3
|
คอลัมน์ 1
| ตารางที่ซ้อนกัน 1
| ตารางที่ซ้อนกัน 2
| คอลัมน์ 3
|
คอลัมน์ 1
| colspan = "2" > คอลัมน์ 2
| คอลัมน์ 3
ตารางนี้ยังมีประโยชน์ในการใช้อักขระน้อยกว่าตารางที่ซ้อนกันดังนั้นจึงจะดาวน์โหลดได้เร็วขึ้นด้วยเช่นกัน
| | | | | | |