ทำให้ตาราง HTML ดีขึ้น

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

เกือบจะเป็นไปไม่ได้ที่จะสร้างตารางที่สมบูรณ์แบบเว้นแต่ว่ามันจะมีเพียงไม่กี่ไอเท็มที่ไม่มีปัญหาที่จะเกิดขึ้น ข้อผิดพลาดประเภทต่างๆที่อาจเกิดขึ้น ได้แก่ :

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

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

กลยุทธ์การหลีกเลี่ยงเพื่อหลีกเลี่ยง

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

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

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

กรอบงานเป็นเพื่อนของคุณ

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

ดูเหมือนไม่ใช่ทุกอย่าง

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

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

มีจุดมุ่งหมายเพื่อการเข้าถึง

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

พิจารณากำหนดค่า ID ให้กับคอมโพเนนต์ตาราง

เพื่อให้สามารถควบคุมแต่ละส่วนของตารางได้สูงสุด (แถวเซลล์) คุณสามารถพิจารณาให้ข้อมูลเหล่านี้ได้diviค่า ID คู่ การเพิ่มค่าคลาสด้วยจะทำให้คุณมีความยืดหยุ่นมากยิ่งขึ้น

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

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

อย่างมีประสิทธิภาพหมายความว่าคอลัมน์มีอยู่ในความหมายนามธรรมก่อนที่จะแสดงผลหน้าดังนั้นคุณจึงไม่สามารถให้ข้อมูลอ้างอิงใด ๆ แก่พวกเขาได้ โดยให้รายการ TD แรกในแถวเป็นคลาสตัวอย่างเช่น“ firstCol” แสดงวิธีอ้างอิงคอลัมน์โดยตรง

ตารางกะทัดรัดเหมาะที่สุด

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

ผู้พัฒนา Bootstrap ทดลองกับ responsive ตารางแต่ตารางและ responsiveเนสเข้ากันไม่ได้ การออกแบบตารางของคุณตั้งแต่เริ่มต้นเพื่อให้พอดีกับหน้าจอมือถือในโหมดแนวตั้งเป็นการเคลื่อนไหวที่ชาญฉลาด

ตารางควรเลื่อนได้เสมอ

เป็นวิธีปฏิบัติที่ดีในการตั้งค่าโอเวอร์โฟลของตารางให้เป็นอัตโนมัติเสมอ แต่ไม่ใช่ในตาราง ให้ห่อตารางข้างใน div แทนดังนี้:

จากนั้นมีโค้ด PHP จำนวนมากที่สร้างเนื้อความของตารางปิดด้วยสิ่งนี้:

ส่วนที่ทำงานในการทำตารางเลื่อนได้อยู่ในบรรทัดแรกที่ div-wrap table ถูกกำหนดความสูงคงที่และมีค่าโอเวอร์โฟลว์ตั้งเป็นอัตโนมัติ หากคุณทำสิ่งนี้กับตารางแทนที่จะเป็นเสื้อคลุมรอบโต๊ะมันอาจมีเอฟเฟกต์ที่ไม่ตั้งใจได้

โทรหาผู้ตีหนักถ้าคุณต้องการ

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

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

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

ที่ใหญ่ที่สุดและดีที่สุดคือ ยืดหยุ่น. นี่มีลักษณะคล้ายกับตาราง Java Swing และทำงานในลักษณะที่คล้ายกัน

คุณสมบัติของ Flexigrid อาจมากเกินไปสำหรับสิ่งที่คุณต้องการดังนั้นในกรณีนี้คุณควรพิจารณา ตัวเรียงลำดับตารางซึ่งค่อนข้างง่ายกว่า

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

เครื่องมือแปลงอัตโนมัติจะไม่ให้ผลลัพธ์ที่ดีที่สุดตามปกติ

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

อย่างไรก็ตามระบบอัตโนมัติที่ปลูกในบ้านของคุณเองนั้นใช้ได้

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

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

ใช้ตารางอย่างเหมาะสมและพวกเขาจะตอบแทนคุณ

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

มารยาทภาพส่วนหัวของ แม็กกี้แอปเปิลตัน