แหล่งข่าว: COMSHARP
ในฐานะนักออกแบบเว็บไซต์ในปลายปี 2008 คุณรู้สึกเขินอายที่จะยอมรับว่าคุณใช้ Table ในโค้ดของคุณหรือไม่ ถ้าใช่ แสดงว่าคุณเป็นคนกล้าหาญ การออกแบบเว็บไซต์เป็นอุตสาหกรรมที่แปลก คุณสามารถออกแบบเว็บไซต์ของคุณให้ดูเหมือนโฆษณาย่อยในตอนเย็นได้ หนังสือพิมพ์หรือปลดล็อกโฆษณาตามทางเดิน แต่อย่าให้ใครรู้ว่าคุณใช้ตารางการค้นหาตารางในซอร์สโค้ดของคุณก็เหมือนกับพนักงานขายที่ดึงกางเกงขึ้นแล้วพบว่าเขาสวมถุงเท้าสีขาว
ตารางดูน่าเกลียดและป่องมาก แม้ว่าคุณจะแสดงเพียงเนื้อหาง่ายๆ แต่คุณยังคงต้องมีแท็กพื้นฐานสามแท็ก <table><tr><td> และมีการเพิ่มแอตทริบิวต์ที่ไม่เป็นระเบียบลงในแต่ละแท็ก > เรียบง่าย เรียบร้อย และทันสมัย มันเข้ากันได้อย่างลงตัวกับ CSS พวกมันสร้างโมเดล Box ที่สมบูรณ์แบบที่สุด ไม่สำคัญหรอก แค่เปลี่ยนคำจำกัดความของ CSS แล้วเลย์เอาต์ใหม่จะถือกำเนิดขึ้น ไม่เหมือนกับ Table ตรงที่ Table เป็นเหมือนตู้ข้างในโรงอาหาร แถวและเสา เรียบง่ายและมันเยิ้มเหมือนของเรา พ่อแม่อย่างเลอะเทอะเอาทุกอย่างกลับบ้านและกองไว้ตรงมุมห้องอย่างไม่ตั้งใจ ถ้าดิฟเป็นชนชั้นกระฎุมพี โต๊ะก็คือรุ่นที่สาม พวกเขาไม่ได้อยู่ในยุคนี้
กล่าวคือในช่วงไม่กี่ปีที่ผ่านมา W3C เป็นองค์กรที่ทุกคนคิดว่าสำคัญ แต่ทุกคนไม่ชอบ เว็บไซต์อย่างเป็นทางการของพวกเขาน่าเกลียดมาก ฉันกล้าพูดว่าฉันไม่เคยเห็นเว็บไซต์ที่น่าเกลียดเช่นนี้มาก่อน ชีวิต แต่เว็บไซต์ของพวกเขาเป็นหนึ่งในเว็บไซต์ไม่กี่แห่งที่สามารถผ่านการตรวจสอบมาตรฐาน W3C ทั้งหมด ซึ่งหมายความว่าเว็บไซต์ของพวกเขาสมบูรณ์แบบในแง่ของไวยากรณ์ โครงสร้างและการเข้าถึง แม้ว่าจะยังน่าเกลียดอยู่มากก็ตาม แต่นี่เป็นเรื่องตลก W3C มีความสำคัญมากไม่เช่นนั้น Microsoft จะทำให้วิศวกรพัฒนาเว็บทั้งหมดไปสู่จุดที่ไม่อาจหวนกลับได้ โชคดีหลังจากการตายของ Netscape Nirvana ได้เปิดตัว Firefox และแม้ว่า Opera จะไม่ได้รับประโยชน์ใด ๆ หลังจากการกำเนิดของ Firefox อย่างน้อยคุณก็ได้รับการสนับสนุนทางศีลธรรม คุณเห็นไหมว่าในที่สุดพี่ใหญ่ก็ออกมาดูแลคุณ? หลังจากที่จ็อบส์กลับมา Apple ก็กลับคืนสู่ความรุ่งเรืองในอดีต ผู้คนจึงรู้ว่ามีเบราว์เซอร์ชื่อ Safari ในโลกนี้ เมื่อรวมกันแล้ว W3C จึงมีความจำเป็นอย่างแท้จริง
W3C บอกว่า Table สามารถใช้เพื่อรองรับข้อความ ข้อความที่จัดรูปแบบ รูปภาพ ลิงก์ แบบฟอร์ม และตารางอื่นๆ... อย่างไรก็ตาม ไม่ควรใช้ Tables เพียงอย่างเดียวในการจัดวางเนื้อหาของเอกสาร ) สาเหตุก็คือ Table จะทำให้ ปัญหาเมื่อเว็บถูกเรนเดอร์โดยอุปกรณ์ที่ไม่ใช่ภาพซึ่งเป็นโปรแกรมอ่านหน้าจอและเบราว์เซอร์อักษรเบรลล์ นอกจากนี้ Table จะบังคับให้ผู้ใช้เลื่อนไปทางซ้ายและขวาบนอุปกรณ์แสดงผลขนาดใหญ่ ดังนั้นควรใช้ CSS ของนักออกแบบเว็บไซต์แทน Table ดู W3C HTML 4.01 สำหรับคำจำกัดความของตาราง ตอนที่ W3C กล่าวคือวันที่ 24 ธันวาคม 1999 แม้ว่า CSS จะถือกำเนิดมาเป็นเวลานานแล้ว แต่ก็ยังมีคนไม่มากที่ใช้มัน มีการคำนึงถึงประเด็นเลย์เอาต์เป็นอย่างมาก ด้วยการก่อตัวของฟองสบู่อินเทอร์เน็ตครั้งแรก เว็บไซต์พอร์ทัลจำนวนมากจึงถือกำเนิดขึ้นเป็นผู้สร้างเค้าโครงตารางเนื่องจากหน้าแรกมีขนาดใหญ่กว่าหน้าทั้งหมดของหนังสือพิมพ์ทั้งหมดรวมกัน ซับซ้อน ตารางมีประโยชน์มากในเรื่องนี้ เมื่อรวม colspan และ rolspan เข้าด้วยกัน คุณจะสามารถสร้างเลย์เอาต์ที่ซับซ้อนได้เกือบทุกแบบ
รูปแบบเลย์เอาต์นี้ยังคงได้รับความนิยมอย่างมากในช่วงต้นทศวรรษ 2000 และกลางทศวรรษ 2000 โดยเฉพาะในประเทศจีน ภายใต้จิตใต้สำนึกของ Da Weimei ผู้คนอัดแน่นทุกสิ่งที่สามารถอัดแน่นอยู่ในหน้าเดียวลงในหน้าแรกได้ ตารางก็เหมือนกับแม่บ้าน ในยุคเก่าแม้ทุกอย่างจะจัดไม่เป็นระเบียบแต่อย่างน้อยก็จัดให้อยู่ในลำดับเดียวกัน อย่างไรก็ตาม ในที่สุดเว็บประเภทนี้ก็มาถึงจุดที่ผู้คนรู้สึกรังเกียจ ด้วยการเกิดขึ้นของการค้นหา การสมัครสมาชิก RSS และเว็บส่วนบุคคลที่แสดงโดยบล็อก ผู้คนจึงมีช่องทางในการรับข้อมูลมากขึ้นโดยไม่ต้องไปที่เว็บไซต์ไม่กี่แห่งที่แทบจะจำเป็น บนหน้าแรกของพอร์ทัลที่จางลง มีรูปแบบเว็บที่สดใหม่ปรากฏขึ้น โดยใช้รูปแบบที่เรียบง่ายขึ้น สีสันสดใสขึ้น ไอคอนขนาดใหญ่ แบนเนอร์ขนาดใหญ่ และแบบอักษรขนาดใหญ่ที่อ่านง่ายขึ้น ในเวลาเดียวกัน CSS มีความเป็นผู้ใหญ่แล้ว และเบราว์เซอร์ เช่น Firefox, Opera และ Safari ก็ดีกว่า IE มากในการปฏิบัติตามมาตรฐาน W3C ในที่สุดผู้คนก็ตระหนักถึงพลังของ CSS เนื่องจากแกนหลักของ CSS คือโมเดล Box ในแง่ของเลย์เอาต์ ผู้ใช้จึงต้องค้นหาออบเจ็กต์คอนเทนเนอร์เพื่อให้ CSS แนบเข้าด้วยกัน
Div ถือเป็นตัวที่โชคดีเพราะมันเป็นต้นแบบที่ดีที่สุดของ Box โดยธรรมชาติแล้ว Div แสดงถึงพื้นที่ของหน้า ให้ความหมายพิเศษล่วงหน้า (แม้ว่าจะสามารถใช้ในโมเดล Box ได้เช่นกัน) ในทางกลับกัน ด้วยความเกลียดชังของผู้คนที่มีต่อการปกครองของ Table ในยุคที่บวม เมื่อสิ้นสุดยุค ผู้สืบทอดจะพยายามอย่างหนักเพื่อลบยุคเก่า ร่องรอยแห่งกาลเวลา ชะตากรรมของสัญลักษณ์เหล่านั้นหรือตัวแทนของยุคเก่าส่วนใหญ่เป็นเช่นนี้
นี่คือจุดเริ่มต้นของการปฏิบัติอย่างไม่ยุติธรรมของ Table ทำไมมันไม่ยุติธรรม เมื่อ W3C ไม่แนะนำเค้าโครงตาราง มันบอกว่าควรใช้ CSS แทน หมายความว่าอย่างไร แน่นอนว่าได้รับการสนับสนุน และเนื่องจาก Table เป็นออบเจ็กต์ HTML เก่าและสถานะของมันมีความสำคัญมาก เบราว์เซอร์ใดๆ ก็ตามจึงให้การสนับสนุน Table ที่สมบูรณ์แบบที่สุด รวมถึงการรองรับ CSS ด้วย เมื่อผู้คนยอมรับ Div ดูเหมือนว่าพวกเขาจะลืมไปว่า Table ก็คือ Box เช่นกัน และเป็น Box ที่มีเซลล์ภายในหลายเซลล์ Table โดยรวมไม่มีความแตกต่างจาก Div ในแง่ของ Box model และเซลล์ภายในของมัน ยกเว้น Margin มันยังคงเป็น Box และกล่องด้านในไม่มีแนวคิดเรื่อง Margin ซึ่งควรเข้าใจ ไม่จำเป็นต้องพูดว่า Div นั้นยอดเยี่ยม อย่างไรก็ตาม เมื่อมีคนพูดว่า Div + CSS ดูเหมือนว่าจะบอกเป็นนัยว่า Table ไม่สามารถใช้ CSS ได้ นี่เป็นความเข้าใจผิดอย่างมาก
คุณสมบัติ CSS ทั้งหมดที่รองรับโดย Div ได้รับการสนับสนุนโดย Table จริงๆ แล้ว ก่อนที่ Div จะได้รับความนิยม ผู้ที่นำ Div มาใช้ในช่วงแรกๆ เคยกล่าวไว้ด้วยความมั่นใจว่าหาก Table สามารถทำได้ Div ก็สามารถทำได้ และพวกเขาก็ยอมจ่ายเงินตามคำพูดของพวกเขาด้วย ราคา คนที่พยายามบรรลุการจัดกึ่งกลางแนวตั้งใน Divs จะเข้าใจสิ่งที่ฉันหมายถึง และผู้ที่พยายามบรรลุเค้าโครง Div 100% ใน IE6 โดยไม่มีการแฮ็ก CSS จะเข้าใจสิ่งที่ฉันหมายถึงมากยิ่งขึ้น ปัญหาความสูง 100% ปัญหาการปรับความกว้างระหว่างหลาย Div ฉันเชื่อว่าใครก็ตามที่มีส่วนร่วมในการออกแบบ Div + CSS จะประสบปัญหานี้ ข้อดีของ Table ในเรื่องนี้ไม่ใช่เพราะความยอดเยี่ยม แต่เนื่องจากมันเก่าและไม่มีเบราว์เซอร์ใดกล้าที่จะเพิกเฉย นอกจากนี้ยังเป็นเพราะลักษณะดั้งเดิมของตัวมันเองด้วย . มันง่ายอย่างนั้น. อย่างไรก็ตาม เหตุใดในเวลาต่อมา Table จึงได้รับชื่อเสียงในทางลบมากมาย? ผู้สนับสนุน Div กล่าวหาว่า Table ไม่มีอะไรมากไปกว่าสิ่งต่อไปนี้
โค้ดมีป่อง: คุณต้องเขียนอย่างน้อยสามแท็ก <table><tr><td> ก่อนจึงจะสามารถเริ่มเนื้อหาจริงได้ นอกจากนี้ แท็กต่างๆ ของ Table ยังมีคำจำกัดความแอตทริบิวต์ที่ซับซ้อน ในขณะที่ Div ต้องการเพียง < div >ป้ายกำกับ
ปัญหาประสิทธิภาพการแสดงผลเพจ: เบราว์เซอร์จำเป็นต้องอ่านตารางทั้งหมดให้ครบถ้วนก่อนที่จะเริ่มเรนเดอร์
ไม่ดีสำหรับ SEO: เครื่องมือค้นหาชอบแยกเนื้อหาออกจากโปแลนด์
การเข้าถึงได้ไม่ดี: ซอฟต์แวร์อ่านหน้าจอและเบราว์เซอร์อักษรเบรลล์ไม่สามารถเข้าใจเนื้อหาในตารางได้ดี
ความหมายไม่เพียงพอ: เราต้องการเว็บเชิงความหมาย
บทความที่ 1: โค้ดมีป่อง
ประการแรก คุณลักษณะเดียวในตารางที่ไม่สามารถกำหนดได้ด้วย CSS คือ Cellspacing และ Cellpadding <td> และ <div> ฉันเชื่อว่าสำหรับหน้าเว็บที่มีขนาด K นับสิบอย่างง่ายดาย แม้ว่าจะมีการใช้ Tables หลายสิบตัวก็ตาม ผู้ที่บ่นเกี่ยวกับโค้ด Table ที่ป่องควรตรวจสอบจริงๆ นิสัยการเขียนโค้ดของคนที่สามารถเขียนตารางป่องมากอาจไม่รัดกุมเท่ากับการเขียน Div
บทความที่ 2: ปัญหาด้านประสิทธิภาพการแสดงผลเพจ
ฉันใช้แล็ปท็อปปี 2004 ที่มี CPU 1.6G และหน่วยความจำ 1G ฉันไม่เห็นความแตกต่างด้านความเร็วระหว่างเค้าโครงตารางและเค้าโครง Div ในการแสดงผลหน้าเว็บ มีความแตกต่างเล็กน้อย ความล่าช้าที่สัมพันธ์กับเครือข่ายนั้นสามารถละเว้นได้
ข้อ 3: ไม่เอื้อต่อการเพิ่มประสิทธิภาพเครื่องมือค้นหา
หากคุณใช้ CSS แทนแอตทริบิวต์ Table มากที่สุดเท่าที่จะเป็นไปได้ ดังที่กล่าวไว้ข้างต้น ความแตกต่างระหว่างโค้ดที่สร้างขึ้นและ Div จะไม่ใหญ่มาก เครื่องมือค้นหาจะแยกแยะกับ <table> หรือไม่ tag? ฉันยังไม่พบพื้นฐานสำหรับข้อความนี้
บทความที่ 4: การเข้าถึงได้ไม่ดี
นี่เป็นข้อบกพร่องโดยธรรมชาติของ Table แต่แฟน ๆ ของ Div + CSS ส่วนใหญ่ดูเหมือนจะไม่ปฏิเสธ Table ด้วยเหตุผลนี้
บทความที่ 5: ความหมายไม่เพียงพอ
ความหมายของ Semantic Web นั้นลึกซึ้งกว่ามาก ไม่เพียงแต่จะเข้าไปพัวพันกับ Table และ Div เท่านั้น แม้แต่ W3C ก็ไม่ได้กำหนดว่า Table สามารถใช้เพื่อแสดงข้อมูลแบบตารางเท่านั้น ของ Table ผู้คน คุณอาจรอ HTML 5 เช่นกัน นั่นคือความหมายที่แท้จริง
จุดประสงค์ของบทความนี้ไม่ได้ทำให้คุณละทิ้ง Div และเข้าร่วม Table ในทางกลับกัน หาก Div สามารถตอบสนองความต้องการในการออกแบบของคุณได้ Div ยังคงเป็นตัวเลือกแรก แต่ไม่จำเป็นต้องหลีกเลี่ยง Table ไม่เช่นนั้นมันจะไปที่ สุดขั้วอื่น ๆ การออกแบบหลายๆ แบบที่ไม่สามารถทำได้ง่ายๆ โดยใช้ Div ยังคงสามารถทำได้โดยใช้ Table แน่นอนว่าไม่ว่าจะใช้อะไรก็ตาม ควรใช้ CSS เพื่อแยกเนื้อหาและการตกแต่ง Div + CSS และ Table + CSS เป็นทั้งการออกแบบที่ถูกกฎหมาย ใช้แล้วแต่ว่าอันไหนจะง่ายกว่า ตามประสบการณ์ของฉัน เมื่อคุณสามารถคาดเดารูปแบบของเนื้อหาของคุณและควบคุมรูปแบบการแสดงเนื้อหาที่คุณกำลังจะเพิ่มได้อย่างสมบูรณ์ คุณควรใช้ Div + CSS เมื่อเนื้อหาที่คุณกำลังจะเพิ่มไม่ได้รับการแก้ไข และ คุณไม่สามารถคาดเดาได้ สำหรับรูปแบบของมัน หากคุณไม่ต้องการให้หน้ายุบ การใช้ Table + CSS เป็นวิธีที่ปลอดภัย
ที่มาของบทความนี้: COMSHARP CMS ผู้แต่ง: 35 กิโลเมตร