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

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

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

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

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

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

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

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

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

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

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

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

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

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

ข้าว. 5. ตารางที่มีข้อมูลเข้า เวอร์ชันเต็มเว็บไซต์

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ก่อนอื่นเรามาดูกันว่าตารางมีลักษณะอย่างไร:

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

ง่ายมาก: ตารางถูกล้อมด้วย div ซึ่งตั้งค่าเป็นความกว้างสูงสุด 100% และโอเวอร์โฟลว์: อัตโนมัติ

หากโต๊ะยาว คุณสามารถกำหนดความสูงสูงสุดและแก้ไขส่วนหัวของตารางได้

ผลลัพธ์ตามตัวอย่างต่อไปนี้สามารถดูได้ในหน้านี้

หากคุณมีตารางบนไซต์ของคุณบ่อยครั้ง การใช้ปลั๊กอิน Footable ก็สมเหตุสมผล

ก่อนอื่นคุณต้องเชื่อมต่อปลั๊กอิน (ดาวน์โหลดบน GitHub หรือเชื่อมต่อจาก CDN) และเริ่มต้นด้วย:

$(function() ( $(".table").footable(); ));

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

JQuery(function () ( jQuery(".table").footable(( คำนวณWidthOverride: function() ( return (width: jQuery(window).width()); ) )); ))

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

ทั้งหมดนี้หมายความว่าอย่างไร? บนแท็บเล็ต คอลัมน์ "RAM", "Diagonal", "PPI" และ "Battery" จะถูกซ่อนไว้ เมื่อลดขนาดเป็นโทรศัพท์ คอลัมน์ "ราคา" ก็จะรวมเข้าด้วยกัน

จุดตรวจสอบสามารถระบุได้ในการเริ่มต้น:

JQuery(function () ( jQuery(".table").footable(( CalculatorWidthOverride: function() ( return (width: jQuery(window).width()); ), จุดพัก: ( มือถือ: 0, แท็บเล็ต: 720, เดสก์ท็อป: 1024 ) ));

ซึ่งหมายความว่าในช่วง 0-720 กฎจะมีผลกับอุปกรณ์เคลื่อนที่ 720-1024 สำหรับแท็บเล็ต และมากกว่า 1,024 สำหรับเดสก์ท็อป ไม่มีอะไรหยุดคุณไม่ให้สร้างกฎเพิ่มเติมหากจำเป็น

คุณยังสามารถตรวจสอบให้แน่ใจว่าบางคอลัมน์ถูกขยายตามค่าเริ่มต้น เมื่อต้องการทำเช่นนี้ ให้ระบุแอตทริบิวต์ data data-expanded="true"

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

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

ตารางแบบธรรมดาในเวอร์ชันมือถือเป็นมากกว่าแค่หน้าเพจ

หากต้องการทำให้ตารางตอบสนอง ให้ไปที่แก้ไขหน้าที่เพิ่มตาราง จากนั้นไปที่โหมดแก้ไขซอร์สโค้ด

ก่อนแท็กเปิด

หลังแท็กปิด

บันทึกการเปลี่ยนแปลงของคุณ

ตอนนี้ตารางเลื่อนและไม่เกินเฟรม

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

เราจำเป็นต้องเพิ่มคลาส "swipeignore" ให้กับแท็กที่เราเพิ่มไว้ก่อนหน้านี้ ส่งผลให้ก่อนติดแท็ก

บันทึกการเปลี่ยนแปลงของคุณ

ตอนนี้เมื่อเลื่อนตารางไปทางขวา เมนูด้านข้างจะไม่เปิดขึ้น ซึ่งรบกวนการทำงานกับตาราง

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

หน้าต่าง : อินเทอร์เน็ตเอ็กซ์พลอเรอร์ 10.0+, ไฟร์ฟอกซ์ 1.5+, กูเกิลโครม, Opera 9.5+, Safari 3.1+, SeaMonkey 1.0+ [1]

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

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

HTML/XHTML. รหัส:

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

ตาราง (แสดง: บล็อก; ล้น-x: อัตโนมัติ;)

/* CSS เพิ่มเติม เพียงเพื่อให้ตัวอย่างปรากฏ: */

ตาราง (ยุบขอบ: ยุบ;)

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

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

Aliosque subditos และธีม

มีค่อนข้างน้อย บริการออนไลน์เพื่อสร้าง sitemap.xml อย่างไรก็ตามคุณสามารถทำได้ด้วยตัวเองบนคอมพิวเตอร์ของคุณโดยใช้เบราว์เซอร์ lynx และยูทิลิตี้หลายอย่าง บรรทัดคำสั่งลินุกซ์. ต่อไปนี้เป็นตัวอย่างของสคริปต์ทุบตีที่เรียกว่า "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" | เรียงลำดับ | 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/sitemap.xml sed -i " s/>/\>\;/g" /home/me/sitemap/sitemap/sitemap.xml sed -i "s/