.

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

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

วิธีการปรับตัวครั้งแรก

<div class = "ห่อตาราง"> <ตาราง > <หัว > <ตร > <ธ >บริการ</th> <ธ >คำอธิบาย</th> <ธ >ราคา</th> <ธ >การลดราคา</th> </tr> </หัว> <tbody > <ตร > <ทีดี >เค้าโครงมือถือ</td> <ทีดี >เค้าโครงสำหรับโทรศัพท์</td> <ทีดี >$3000</td> <ทีดี > 50%</td> </tr> <ตร > <ทีดี >ลงจอดบน CMS WordPress</td> <ทีดี ></td> <ทีดี >$3000</td> <ทีดี > 30%</td> </tr> </tbody> </ตาราง> </div>

มาจัดสไตล์กันเถอะ (โดยหลักแล้วเราจำเป็นต้องจัดสไตล์ ห่อโต๊ะ).

1 2 3 4 5 6 7 8 9 10 11 12 13

.table-wrap ( text-align : center ; display : inline-block; background-color : #fff ; padding : 2rem 2rem; color : #000 ; ) .table-wrap ( overflow-y: scroll ; ) )

การตัดตาราง ( text-align: center; display: inline-block; background-color: #fff; padding: 2rem 2rem; color: #000; ) @media screen และ (max-width: 600px) ( .table-wrap (ล้น-y: เลื่อน; ) )

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

วิธีการปรับตัวที่สอง

ขั้นแรก เรามาเปลี่ยนมาร์กอัปกันก่อน:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

บริการ คำอธิบาย ราคา การลดราคา เค้าโครงมือถือ เค้าโครงสำหรับโทรศัพท์ $3000 50% ลงจอดบน CMS WordPress การสร้างเว็บไซต์ด้วยแอดมิน แผงหน้าปัด $3000 30%

กำหนดแอตทริบิวต์ให้กับแต่ละคอลัมน์ ข้อมูลฉลากซึ่งจะเป็นประโยชน์ต่อเราในอนาคต

ตั้งค่าสไตล์พื้นฐาน:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

body ( text-align : center ; padding-top : 10% ; font-family : sans-serif ; background-image : url ("bg.jpg" ) ; ขนาดพื้นหลัง: cover; height : 100vh; color : #fff ; ) .table-wrap ( text-align : center ; display : inline-block; background-color : #fff ; padding : 2rem 2rem; color : #000 ; ) table ( border : 1px solid #ccc ; width : 100% ; ขอบ : 0 ; padding : 0 ; ยุบขอบ : ยุบ ; ระยะห่างขอบ : 0 ; ) ตาราง tr ( ขอบ : 1px solid #ddd ; padding : 5px ; ) ตาราง th, ตาราง td ( padding : 10px ; จัดแนวข้อความ : center ; border-right : 1px solid #ddd ; ) table th ( color : #fff ; สีพื้นหลัง : #444 ; การแปลงข้อความ : ตัวพิมพ์ใหญ่ ; ขนาดตัวอักษร : 14px ; การเว้นวรรคตัวอักษร : 1px ; )

body ( การจัดตำแหน่งข้อความ: กึ่งกลาง; ช่องว่างด้านบน: 10%; ตระกูลแบบอักษร: sans-serif; ภาพพื้นหลัง: url ("bg.jpg"); ขนาดพื้นหลัง: ปก; ความสูง: 100vh; สี: #fff ; ) .table-wrap ( text-align: center; display: inline-block; background-color: #fff; padding: 2rem 2rem; color: #000; ) table ( border: 1px solid #ccc; width: 100% ; ขอบ: 0; การขยาย: 0; ยุบขอบ: ยุบ; ระยะห่างชายแดน: 0; ) ตาราง tr ( เส้นขอบ: 1px ทึบ #ddd; ขยาย: 5px; ) ตาราง th, ตาราง td ( ขยาย: 10px; จัดแนวข้อความ : center; border-right: 1px solid #ddd; ) table th ( color: #fff; สีพื้นหลัง: #444; การแปลงข้อความ: ตัวพิมพ์ใหญ่; ขนาดตัวอักษร: 14px; ระยะห่างระหว่างตัวอักษร: 1px; )

ดูเหมือนตารางปกติโดยการย้ายไซต์ไป 320-420 พิกเซล เราจะเห็นการเลื่อนแนวนอนของทั้งไซต์ ไม่ใช่ประเด็น

จะแก้ไขได้อย่างไร? เพิ่มสไตล์:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

หน้าจอ @media และ (ความกว้างสูงสุด: 600px) ( table ( border : 0 ; ) table thead ( display : none ; ) table tr ( margin-bottom : 10px ; display : block ; border-bottom : 2px solid #ddd ; ) table td ( display : block ; text-align : right) ; ขนาดตัวอักษร : 13px ; ขอบล่าง : 1px จุด #ccc ; ขอบขวา : 1px ทึบโปร่งใส ; ) ตาราง td:last-child ( ขอบล่าง : 0 ; ) ตาราง td:before ( เนื้อหา : attr(data- label) ; float : ซ้าย ; การแปลงข้อความ : ตัวพิมพ์ใหญ่ ; font-weight : ตัวหนา ; ) )

@media screen และ (ความกว้างสูงสุด: 600px) ( table ( border: 0; ) table thead ( display: none; ) table tr ( Margin-bottom: 10px; display: block; border-bottom: 2px solid #ddd; ) ตาราง td ( จอแสดงผล: บล็อก; การจัดตำแหน่งข้อความ: ขวา; ขนาดตัวอักษร: 13px; ขอบล่าง: 1px จุด #ccc; ขอบขวา: 1px ทึบโปร่งใส; ) ตาราง td: ลูกสุดท้าย ( ขอบล่าง: 0; ) ตาราง td:before ( เนื้อหา: attr(data-label); float: left; การแปลงข้อความ: ตัวพิมพ์ใหญ่; น้ำหนักแบบอักษร: ตัวหนา; ) )

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

นี่คือปากกาอีกอัน:

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

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

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

การสาธิตตารางที่ตอบสนอง .

มาร์กอัป HTML

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

คุณอาจสังเกตเห็นว่าฉันวางตารางไว้ในแท็ก กองและเห็นได้ชัดว่ามีเหตุผล แท็กนั้นเอง กองไม่ให้สิ่งใดจนกว่าเราจะกำหนดสไตล์ให้กับมัน

สไตล์ CSS

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

ดิวิชั่น (
ล้น-x: อัตโนมัติ;
)

มาจัดสไตล์แท็กตารางที่เหลือกันดีกว่า:

โต๊ะ (
ชายแดนยุบ: ยุบ; /* แสดงเพียงบรรทัดเดียว */
ระยะห่างขอบ: 0; /* ระยะห่างระหว่างเซลล์ */
ความกว้าง: 100%;
เส้นขอบ: 1px ทึบ #afb42b;
สี: #212121;
}

ธ, td (
การจัดแนวข้อความ: ซ้าย;
ช่องว่างภายใน: 8px;
}

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

หน้าต่าง: Internet Explorer 10.0+, Firefox 1.5+, Google Chrome, Opera 9.5+, Safari 3.1+, SeaMonkey 1.0+ [1]

ลินุกซ์: Firefox 1.5+, Google Chrome / Chromium, Opera 9.5+, SeaMonkey 1.0+ [2]

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

1	2	3	4	5	6	7	8	9	10
Table_data_1	Table_data_2	Table_data_3	Table_data_4	Table_data_5	Table_data_6	Table_data_7	Table_data_8	Table_data_9	Table_data_10

HTML/XHTML. รหัส:

<โต๊ะ>

<ตร>

<ไทย>1</ไทย>

<ไทย>2</ไทย>

<ไทย>3</ไทย>

<ไทย>4</ไทย>

<ไทย>5</ไทย>

<ไทย>6</ไทย>

<ไทย>7</ไทย>

<ไทย>8</ไทย>

<ไทย>9</ไทย>

<ไทย>10</ไทย>

</tr>

<ตร>

<ทีดี>Table_data_1</td>

<ทีดี>Table_data_2</td>

<ทีดี>Table_data_3</td>

<ทีดี>Table_data_4</td>

<ทีดี>Table_data_5</td>

<ทีดี>Table_data_6</td>

<ทีดี>Table_data_7</td>

<ทีดี>Table_data_8</td>

<ทีดี>Table_data_9</td>

<ทีดี>Table_data_10</td>

</tr>

</ โต๊ะ>

โต๊ะ(จอแสดงผล: บล็อก; overflow-x: อัตโนมัติ;)

/* CSS เพิ่มเติม เพียงเพื่อให้ตัวอย่างมีลักษณะ: */

โต๊ะ(ขอบยุบ: ยุบ;)

โต๊ะ td,th(ช่องว่างภายใน: 10px; เส้นขอบ: 1px #000 ทึบ;)

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

1	2	3
Table_data_1	Table_data_2	Table_data_3

Aliosque subditos และธีม

มีบริการออนไลน์มากมายสำหรับการสร้าง sitemap.xml อย่างไรก็ตาม คุณสามารถทำได้ด้วยตัวเองบนคอมพิวเตอร์โดยใช้เบราว์เซอร์ lynx และยูทิลิตี้บรรทัดคำสั่ง Linux หลายตัว ต่อไปนี้เป็นตัวอย่างของสคริปต์ทุบตีที่เรียกว่า "sitemap.sh" ที่ใช้สคริปต์เหล่านี้ สคริปต์ทุบตีที่สร้างไฟล์ sitemap.xml: #!/bin/bash cd /home/me/sitemap/www/ lynx -crawl -traversal -accept_all_cookies -connect_timeout=30 http://www.compmiscellanea.com/ > / dev /null cd /home/me/sitemap/www2/ lynx -crawl -traversal -accept_all_cookies -connect_timeout=30 http://compmiscellanea.com/ > /dev/null แมว /home/me/sitemap/www2/traverse.dat > > /home/me/sitemap/www/traverse.dat แมว /home/me/sitemap/www/traverse.dat | sed -e "s/\ \.//g" | sort | uniq > /home/me/sitemap/sitemap/sitemap.xml sed -i "s/\&/\&\;/g" /home/me/sitemap/sitemap/sitemap. xml sed -i "s/"/\&apos\;/g" /home/me/sitemap/sitemap/sitemap.xml sed -i "s/"/\"\;/g" /home/me/sitemap/ แผนผังเว็บไซต์/sitemap.xml sed -i "s/>/\>\;/g" /home/me/sitemap/sitemap/sitemap.xml sed -i "s//" /home/me/sitemap/sitemap/sitemap.xml sed -i -e "s/$/<\/loc><\/url>/" /home/me/sitemap/sitemap/sitemap.xml sed -i -e "1 ฉัน\r\r \r\r\r\r" /home/me/sitemap/sitemap/sitemap.xml sed -i -e "$ a \\r" /home/me/sitemap/sitemap/sitemap.xml sed -i "/static/d" /home/me/sitemap/sitemap/sitemap.xml echo "...เสร็จสิ้น" หลังจากไฟล์สคริปต์ทุบตีพร้อม: "chmod +x sitemap.sh" เพื่อให้ปฏิบัติการได้ ดาวน์โหลด sitemap.sh ในไฟล์เก็บถาวร sitemap.sh.tar.gz (หลังจากดาวน์โหลดและแตกไฟล์เก็บถาวรแล้ว ให้แทนที่ http://www.compmiscellanea ในไฟล์ .com/ ด้วย ชื่อโดเมนที่ต้องการของเว็บไซต์ด้วย "www" และแทนที่ http://compmiscellanea.com/ ด้วยชื่อโดเมนที่ต้องการของเว็บไซต์ที่ไม่มี "www" แทนที่จะใส่ "static" ในบรรทัดสุดท้ายของไฟล์ ให้ใส่บรรทัดที่ ลิงก์ควรมีเพื่อที่จะลบออกจากรายการ จากนั้น "chmod +x sitemap.sh" จากนั้นเรียกใช้ sitemap.sh) ความคิดเห็น ดาวน์โหลด sitemap2.sh พร้อมความคิดเห็นทีละบรรทัดใน sitemap2.sh ไฟล์เก็บถาวร tar.gz ก่อนที่จะเรียกใช้สคริปต์ bash คุณต้องสร้างสามโฟลเดอร์ เนื่องจากในบางกรณี เบราว์เซอร์ lynx อาจพลาดบางลิงก์หากชื่อโดเมนของไซต์ถูกระบุโดยมีหรือไม่มี "www" สคริปต์ทุบตีจึงเรียกใช้ lynx สองครั้ง ประมวลผลไซต์ด้วยชื่อโดเมนด้วย "www" และประมวลผลไซต์โดยใช้ชื่อโดเมนโดยไม่มี "www" ผลลัพธ์ 2 ไฟล์จะอยู่ในโฟลเดอร์ 2 โฟลเดอร์ที่แตกต่างกัน ได้แก่ "/home/me/sitemap/www/" และ "/home/me/sitemap/www2/" และไดเร็กทอรี "/home/me/sitemap/sitemap/" มีไว้สำหรับ sitemap.xml ที่สร้างขึ้น 1. เส้นทางสู่ bash #!/bin/bash 2. ไปที่โฟลเดอร์ - เบราว์เซอร์ lynx จะวางไฟล์ที่ได้รับเมื่อประมวลผลไซต์ตามชื่อโดเมนด้วย "www" cd /home/me/sitemap/www/ 3.

ไม่มีคุณสมบัติ "float: Bottom" ใน CSS แต่สามารถทำได้ด้วยวิธีอื่นๆ หลายวิธี ตัวอย่าง: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ทำตามขั้นตอนต่อไปนี้: การออกกำลังกายแบบ nostrud ullamco laboris nisi ut aliquip ex ea commodo consequat Duis aute irure dolor ใน reprehenderit ใน voluptate velit esse cillum dolore eu fugiat nulla pariatur. ยกเว้น occaecat cupidatat ไม่ภูมิใจ, sunt ใน culpa qui officia deserunt mollit anim id est laborum. ลิงค์ 1 ลิงค์ 2 ลิงค์ 3 HTML / XHTML ด้านล่างแบบลอย รหัส:

ซีเอสเอส รหัส: .box1 (ตำแหน่ง: ญาติ; ด้านบน: 0px; ซ้าย: 0px; ลอย: ซ้าย; ความสูง: อัตโนมัติ; ความกว้าง: 100%;) .content1 (ตำแหน่ง: ญาติ; ด้านบน: 0px; ซ้าย: 0px; ลอย: ซ้าย; ความสูง: อัตโนมัติ ความกว้าง: 100%;) .left1 (ตำแหน่ง: ญาติ; ด้านบน: 0px; ซ้าย: 0px; ลอย: ซ้าย; ความสูง: อัตโนมัติ; ความกว้าง: 64%;) .menu1 (ตำแหน่ง: ญาติ; ด้านบน: 0px; left: 0px; float: left; height: auto; width: 36%;) .bottom1 (ตำแหน่ง: แน่นอน; ด้านล่าง: 0px; ขวา: 0px;) /* CSS เพิ่มเติม เพียงเพื่อให้ตัวอย่างมีลักษณะบางอย่าง */ . box1 (สี: #ddd; การจัดแนวข้อความ: center;).content1 (พื้นหลัง: #bbb;).left1 (ความสูงขั้นต่ำ: 100px; การขยาย: 2%; การจัดแนวข้อความ: จัดชิดขอบ; พื้นหลัง: #006; -moz - ขนาดกล่อง: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;).menu1 (ช่องว่างภายใน: 2%; float: ขวา ; พื้นหลัง: #060; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;) . menu1 p (ตำแหน่ง: สัมพันธ์; บน: 0px; ซ้าย: 0px; ลอย: ซ้าย; ความสูง: อัตโนมัติ; ความกว้าง: 100%; ช่องว่างภายใน: 0px; ระยะขอบ: 0px;).menu1 a (สี: #ddd; ตกแต่งข้อความ: none;).menu1 a:hover (ตกแต่งข้อความ: ขีดเส้นใต้;).bottom1 (ขยาย: 2%; สี: #eee; พื้นหลัง: # 600;) เนื้อหาทั้งหมดของหน้าเว็บมีอยู่ในคอนเทนเนอร์ box1 ภายในจะมีคอนเทนเนอร์ div สองรายการ: 1. content1 โดยมีเนื้อหาจริงทางด้านซ้ายและเมนูทางด้านขวา 2. ด้านล่าง 1 หลังเนื้อหา 1

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

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

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

ผู้คนจะเปรียบเทียบข้อมูลในคอลัมน์หรือแถวหรือไม่

ตัวอย่างที่ 1: ผู้คนจะไม่เปรียบเทียบข้อมูล

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

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

นี่คือสิ่งที่ผู้สร้างไซต์ JQuery Mobile ทำ

ตัวอย่างที่ 2: ผู้คนจะเปรียบเทียบข้อมูลแถวหรือคอลัมน์

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

ข้าว. 3. ตารางที่มีข้อมูลที่จะเปรียบเทียบ

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

ข้าว. 4. ตารางข้อมูลบนหน้าจอโทรศัพท์มือถือ

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

ข้าว. 5. ตารางพร้อมข้อมูลในเวอร์ชันเต็มของไซต์

ข้าว. 6 และ 7 ตารางเดียวกันในเวอร์ชันมือถือ เหลือเพียงคอลัมน์ที่สำคัญที่สุดเท่านั้น แต่คุณสามารถรวมคอลัมน์อื่นๆ ทั้งหมดได้หากจำเป็น

ข้อมูลอะไรที่สำคัญ?

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

• ข้อมูลอะไรที่ผู้คนต้องการมากที่สุด?
• คอลัมน์ใดที่สำคัญที่สุดในการทำความเข้าใจข้อมูลที่ตารางให้มา
• ผู้คนต้องการวิทยากรคนไหนมากที่สุด?

ผู้ใช้จะสามารถแยกแยะส่วนหนึ่งของตารางจากอีกส่วนหนึ่งได้หรือไม่

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

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

ทุกอย่างจะต้องอยู่บนหน้าจอพร้อมกันหรือสามารถเพิ่มองค์ประกอบเพิ่มเติมได้ตามต้องการ?

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

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

สิ่งที่น่าสนใจคือ บ่อยครั้งเมื่อเราเริ่มการออกแบบด้วยเวอร์ชันเต็มหน้าจอและเห็นตารางขนาดใหญ่ที่มีเนื้อหาจำนวนมาก เป็นเรื่องยากสำหรับเราที่จะยอมรับว่าบนหน้าจอแคบจะทำให้เนื้อหาบางส่วนหายไป แต่เมื่อเราปฏิบัติตามหลักการ “มือถือต้องมาก่อน” ปัญหาดังกล่าวจะไม่เกิดขึ้น

แล้วมันสำคัญอย่างไรเมื่อพูดถึงตารางในการออกแบบที่ตอบสนอง?

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

หากคุณสามารถตอบ "ใช่" สำหรับคำถามทั้งสามข้อได้ แสดงว่าตารางบนไซต์ของคุณไม่มีปัญหา

เนื้อหาของคุณจะบอกคุณว่าควรทำอะไรกับตารางของคุณได้ดีที่สุด

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

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