ทำไมคุณควรหลีกเลี่ยงตารางสำหรับเค้าโครงหน้าเว็บ

CSS เป็นวิธีที่ดีที่สุดในการสร้างการออกแบบหน้าเว็บ

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

ตารางไม่สามารถเข้าถึงได้

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

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

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

ตารางเป็นเรื่องที่ยุ่งยาก

แม้ว่าคุณจะสร้างตารางด้วยโปรแกรมแก้ไขเว็บหน้าเว็บของคุณจะยังคงซับซ้อนและยากที่จะรักษา ยกเว้นการออกแบบหน้าเว็บที่เรียบง่ายที่สุดตารางรูปแบบมากที่สุดต้องมีการใช้แอตทริบิวต์และตารางที่ซ้อนกันอยู่มากมาย

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

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

ตารางไม่แข็งตัว

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

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

ตารางที่ซ้อนกันโหลดช้ากว่า CSS สำหรับการออกแบบเดียวกัน

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

ในกรณีส่วนใหญ่เค้าโครงตารางจะใช้อักขระมากกว่าที่จะสร้างได้มากกว่าการออกแบบ CSS และตัวอักษรน้อยลงหมายถึงการดาวน์โหลดน้อยลง

ตารางสามารถ Hurt Search Engine Optimization

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

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

ตารางอย่าพิมพ์ดีเสมอ

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

ด้วย CSS คุณสามารถสร้างสไตล์ชีตแยกเฉพาะสำหรับการพิมพ์หน้าเว็บ

ตารางสำหรับเค้าโครงไม่ถูกต้องใน HTML 4.01

ข้อกำหนดเกี่ยวกับ HTML 4 ระบุว่า: "ไม่ควรใช้ตารางอย่างหมดจดเพื่อเป็นเนื้อหาเอกสารรูปแบบเพราะอาจทำให้เกิดปัญหาเมื่อแสดงผลสื่อที่ไม่ใช่ภาพ"

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

แต่ HTML5 เปลี่ยนกฎและขณะนี้ตารางสำหรับการจัดวางในขณะที่ยังไม่แนะนำคือ HTML ที่ถูกต้อง ข้อกำหนดเกี่ยวกับ HTML5 ระบุว่า: "ไม่ควรใช้ตารางเป็นเครื่องมือช่วยวางแผน"

เนื่องจากตารางสำหรับเค้าโครงเป็นการยากสำหรับผู้อ่านหน้าจอในการแยกความแตกต่างดังที่ได้กล่าวมาแล้วข้างต้น

การใช้ CSS เพื่อวางตำแหน่งและจัดวางหน้าเว็บของคุณเป็นเพียงวิธีการ HTML 4.01 ที่ถูกต้องเท่านั้นเพื่อให้ได้รูปลักษณ์ที่คุณใช้ในการสร้างตาราง และ HTML5 ขอแนะนำวิธีนี้เช่นกัน

ตารางสำหรับเค้าโครงอาจส่งผลกระทบต่อความคาดหวังในงานของคุณ

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

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

หากคุณไม่สามารถส่งมอบสิ่งที่ลูกค้าขอได้พวกเขาจะหยุดการออกแบบของคุณในวันนี้บางทีอาจไม่ใช่วันนี้ แต่อาจจะเป็นปีหน้าหรือปีต่อ ๆ ไป คุณสามารถที่จะยอมให้ธุรกิจของคุณประสบความสำเร็จจริงๆหรือไม่เพราะคุณไม่ต้องการเริ่มต้นการเรียนรู้เทคนิคที่ใช้งานมาตั้งแต่ช่วงปลายทศวรรษที่ 1990?

ศีลธรรม: เรียนรู้การใช้ CSS

CSS อาจเป็นเรื่องยากที่จะเรียนรู้ แต่สิ่งที่คุ้มค่าก็คุ้มค่ากับความพยายาม อย่าให้ทักษะของคุณหยุดนิ่ง เรียนรู้ CSS และสร้างหน้าเว็บของคุณตามที่พวกเขาตั้งใจสร้างขึ้นด้วย CSS สำหรับรูปแบบ