รูปแบบการออกแบบตารางบนเว็บ

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

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

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

ตัวเลือก CSS เท่านั้น

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

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

ตัวเลือกที่ 1: ไม่ทำอะไรเลย

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

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

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

ตัวเลือกที่ 2: จัดรูปแบบ Scroll

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

มาดูที่ “พื้นฐาน” ล้นกันก่อน ลองนึกภาพฉันใช้ air-quotes ในระดับพื้นฐาน เพราะการจัดสไตล์สำหรับเงาที่เลื่อนไปมานั้นไม่ใช่สิ่งอื่นๆ ในกรณีนี้ "พื้นฐาน" หมายถึงความจริงที่ว่าตารางไม่ได้เปลี่ยนแปลงไปในทางใดทางหนึ่ง

เทคนิคในการทำเงาเลื่อนนี้มาจาก Roma Komarov และ Lea Verou ที่ระดมความคิดของกันและกันเพื่อสร้างเวทย์มนตร์ มันขึ้นอยู่กับการใช้การไล่ระดับสีหลายแบบ (เชิงเส้นและแนวรัศมี) เป็นภาพพื้นหลังบนองค์ประกอบที่มี และใช้ background-attachment: local เพื่อวางตำแหน่งพื้นหลังที่สัมพันธ์กับเนื้อหา

ข้อดีของเทคนิคนี้คือสำหรับเบราว์เซอร์ที่ไม่รองรับการเลื่อนเงา คุณยังสามารถเลื่อนตารางได้ตามปกติ ไม่ทำลายเค้าโครงเลย

ตัวเลือกการเลื่อนอีกแบบหนึ่งคือการพลิกส่วนหัวของตารางจากการกำหนดค่าแถวเป็นการกำหนดค่าคอลัมน์ ในขณะที่ใช้การเลื่อนแนวนอนกับเนื้อหาขององค์ประกอบ <tbody> เทคนิคนี้ใช้ประโยชน์จากพฤติกรรมของ Flexbox เพื่อแปลงแถวของตารางเป็นคอลัมน์

เมื่อใช้ display: flex กับตาราง ทำให้ <thead> และ <tbody> เป็น flex children ซึ่งโดยดีฟอลต์จะวางชิดกันบน flex line เดียวกัน

นอกจากนี้เรายังทำให้องค์ประกอบ <tbody> เป็นคอนเทนเนอร์แบบยืดหยุ่น ซึ่งจะทำให้องค์ประกอบ <tr> ทั้งหมดภายในองค์ประกอบ flex children ถูกจัดวางใน flex line เดียวเช่นกัน สุดท้ายนี้ ทุกเซลล์ของตารางต้องมีการตั้งค่าการแสดงผลให้ block แทนที่จะใช้ table-cell เริ่มต้น

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

โรย JavaScript บางส่วน

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

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

หากคุณกำลังทำงานกับชุดข้อมูลที่ค่อนข้างง่ายกว่า บางทีคุณอาจต้องการเขียนฟังก์ชันของคุณเองสำหรับคุณลักษณะบางอย่างเหล่านี้

แถวที่บล็อกด้วยการแก้ไขการช่วยสำหรับการเข้าถึง

เท่าที่ฉันรู้ เทคนิคตารางข้อมูลที่ตอบสนองนี้มาจากบทความ CSS-Tricks เรื่อง “Responsive Data Tables” โดย Chris Coyier ย้อนกลับไปในปี 2011 นับตั้งแต่นั้นมาก็ได้มีการดัดแปลงและขยายออกไปโดยคนอื่นๆ อีกมากมาย

สาระสำคัญของเทคนิคนี้คือการใช้แบบสอบถามสื่อเพื่อสลับคุณสมบัติการแสดงผลขององค์ประกอบตารางและลูกของมันเพื่อ block ในวิวพอร์ตที่แคบ

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

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

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

หลังจากนั้น มันเป็นเรื่องของการตั้งค่า margin-right: auto บนองค์ประกอบหลอกเพื่อดันเนื้อหาของเซลล์ไปที่ขอบด้านไกลสุดของเซลล์

อีกวิธีหนึ่งในการทำเลย์เอาต์วิวพอร์ตแบบแคบคือการใช้ Grid และ display: contents ร่วมกัน โปรดทราบว่า display: contents ในเบราว์เซอร์ที่รองรับมีปัญหาในการเข้าถึงในขณะนี้ และไม่ควรใช้วิธีนี้ในการผลิตจนกว่าข้อบกพร่องเหล่านั้นจะได้รับการแก้ไข

แต่บางทีคุณอาจกำลังอ่านข้อความนี้หลังจากที่จุดบกพร่องเหล่านั้นได้รับการแก้ไขแล้ว ในกรณีนี้ นี่คือตัวเลือกเลย์เอาต์ทางเลือก

แต่ละองค์ประกอบ <tr> ถูกตั้งค่าให้ display: grid และแต่ละองค์ประกอบ <td> ถูกตั้งค่าให้ display: contents เฉพาะรายการย่อยที่อยู่ติดกันของคอนเทนเนอร์กริดเท่านั้นที่มีส่วนร่วมในบริบทการจัดรูปแบบกริด ในกรณีนี้ มันคือ <td> องค์ประกอบ

เมื่อ display: contents ถูกนำไปใช้กับ <td> เนื้อหาจะถูก "แทนที่" ด้วยเนื้อหา ในกรณีนี้ pseudo-element และ <span> ภายใน <td> จะกลายเป็นกริดย่อยแทน

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

ในอนาคต เมื่อค่าขนาดของ min-content , max-content และ fit-content (ครอบคลุมโดย CSS Intrinsic & Extrinsic Sizing Module Level 3) เป็นค่า width และ height ทั่วไป เราจะมีตัวเลือกมากขึ้นสำหรับการวาง สิ่งต่าง ๆ ออกไป

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

การแบ่งหน้าอย่างง่าย

ตัวอย่างนี้แสดงการใช้งานการแบ่งหน้าพื้นฐานที่แก้ไขจาก CodePen นี้โดย Gjore Milevski เพื่อแบ่งหน้าในแถวตารางแทนที่จะเป็น divs เป็นส่วนขยายของตัวอย่าง "จัดรูปแบบการเลื่อน" ที่กล่าวถึงในส่วนก่อนหน้า

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

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

เราสามารถทำได้โดยใช้ประโยชน์จากคุณสมบัติการ order การจัดลำดับเนื้อหาใหม่ด้วยภาพควรพิจารณาด้วยเสมอ เนื่องจากคุณสมบัตินี้ ไม่ เปลี่ยนลำดับแหล่งที่มา — เฉพาะลักษณะที่ปรากฏบนหน้าจอเท่านั้น

การเรียงลำดับอย่างง่าย

ตัวอย่างนี้แสดงการใช้งานการเรียงลำดับพื้นฐานที่แก้ไขจากข้อมูลโค้ดนี้โดย Peter Noble เพื่อรองรับทั้งข้อความและตัวเลข:

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

ค้นหาง่าย

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

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

ให้ห้องสมุดจัดการ

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

รูปแบบการสลับคอลัมน์เป็นรูปแบบหนึ่งที่คอลัมน์ที่ไม่จำเป็นถูกซ่อนไว้บนหน้าจอขนาดเล็ก ปกติแล้ว ฉันไม่ได้ชอบซ่อนเนื้อหาเพียงเพราะวิวพอร์ตแคบ แต่แนวทางของ Maggie Costello Wachs แห่ง Filament Group ช่วยแก้ปัญหาของฉันได้ด้วยการจัดเตรียมเมนูแบบเลื่อนลงซึ่งช่วยให้ผู้ใช้สามารถสลับคอลัมน์ที่ซ่อนอยู่กลับเข้าไป ดู.

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

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

ห่อ

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

อ่านเพิ่มเติม

• “ตารางที่ตอบสนองต่อ CSS เท่านั้น” David Bushell
• “ตารางที่เข้าถึงได้ เรียบง่าย และตอบสนองได้” Davide Rizzo, CSS-Tricks
• “เค้าโครงตารางที่ตอบสนอง” Matt Smith
• “รูปแบบที่ตอบสนอง: ตาราง” แบรด ฟรอสต์
• “เฮ้ ยังใช้โต๊ะได้อยู่นะ” Adrian Roselli
• “ตาราง คุณสมบัติการแสดงผล CSS และ ARIA” Adrian Roselli
• “ตารางข้อมูล” เฮย์ดอน พิกเคอริง