คลิกที่นี่เพื่อกลับไปที่คอลัมน์การสอน Wulin.com HTML
ด้านบน: ภาษามาร์กอัป - ชื่อเรื่อง
ต้นฉบับ
โซลูชั่นการออกแบบที่ได้มาตรฐาน - คู่มือมาร์กอัป
และสไตล์ ส่วนที่ 1: ลงมาร์กอัปเริ่มต้นด้วยมาร์กอัป บทที่ 2 ตารางชั่วร้าย?คุณรู้ไหม? ฉันไม่รู้ว่ามันเริ่มต้นเมื่อใดการใช้ตารางกลายเป็นการกระทำที่เป็นบาปหรือไม่? อันที่จริงตำนานที่ยิ่งใหญ่ที่สุดในการเขียนหน้าเว็บตามมาตรฐานเว็บคือการหยุดใช้ตารางอีกต่อไปไม่เคย! ดูเหมือนจะต้องหลีกเลี่ยงโรคระบาดและต้องถูกปิดผนึกและถูกโยนลงไปในตู้ที่เต็มไปด้วยฝุ่นและถือได้ว่าเป็นของเก่าที่ถูกส่งผ่านจากยุคแรก ๆ ของยุคพัฒนาอินเทอร์เน็ต
ความรังเกียจมาจากไหน? บางทีมันอาจจะง่ายมากในตอนแรกอย่างน้อยก็ด้วยเหตุผลที่ดี หลายคนจะมั่นใจในการส่งเสริมประโยชน์ของการละทิ้งเค้าโครงแบบดั้งเดิมของการทำรังแบบตารางและรูปภาพ GIF ที่ว่างเปล่าและแทนที่จะใช้เค้าโครง CSS ที่มีโครงสร้างที่ยืดหยุ่นแทน เราอาจเริ่มลบตารางทั้งหมดในลักษณะเดี่ยวและแม้แต่ยืนยันอย่างดื้อรั้นในการขับไล่ตารางทั้งหมด - ไม่ว่าจะเป็นโอกาส
ต่อมาในหนังสือเล่มนี้เราจะเห็นวิธีการเค้าโครง CSS และประโยชน์ทั้งหมดของการทำเช่นนั้น แต่ตอนนี้ลองมาดูวิธีการใช้ตารางในสถานการณ์ที่เหมาะสม - นั่นคือเมื่อทำเครื่องหมายรายการข้อมูล เราจะดูวิธีง่ายๆสองสามวิธีในการทำให้รายการข้อมูลของเราใช้งานง่ายขึ้นและสวยงามขึ้น
มันเป็นรูปแบบทั้งหมดเมื่อแท็กข้อมูลรายการไม่มีเหตุผลที่จะไม่ใช้แท็กตาราง แต่เดี๋ยวก่อนข้อมูลรายการคืออะไร? นี่คือตัวอย่างบางส่วน: แผนผังเวลาสเปรดชีตปฏิทินเวลาการเดินทาง
สำหรับตัวอย่างเหล่านี้และกรณีอื่น ๆ อีกมากมายจะต้องใช้เอฟเฟกต์ CSS ที่ซับซ้อนและเข้มงวดมากเพื่อทำให้ข้อมูลดูเหมือนตาราง บางทีคุณสามารถจินตนาการได้ว่าการใช้ CSS ที่ฉลาดในการค้นหาโครงการทั้งหมดจะส่งผลให้เกิดผลลัพธ์ที่เข้ากันไม่ได้และขัดแย้งกันไม่ต้องพูดถึงว่าหลังจากลบ CSS การอ่านข้อมูลแต่ละข้อมูลอย่างถูกต้องอาจกลายเป็นงานที่เป็นไปไม่ได้ ในความเป็นจริงเราไม่จำเป็นต้องกลัวโต๊ะ - เราควรใช้พวกเขากับเป้าหมายการออกแบบดั้งเดิมของพวกเขา
แบบฟอร์มสำหรับทุกคนหนึ่งในเหตุผลที่มีการวิพากษ์วิจารณ์ตารางคือถ้าคุณไม่ได้ใช้อย่างระมัดระวังจะมีข้อบกพร่องในการใช้งาน ตัวอย่างเช่น: โปรแกรมการอ่านหน้าจออ่านเนื้อหาได้อย่างถูกต้องในขณะที่อุปกรณ์หน้าจอขนาดเล็กมักถูกรบกวนด้วยตารางที่ใช้ในการจัดวาง แต่เรามีวิธีง่ายๆในการเพิ่มการใช้งานของตารางข้อมูลรายการ ในเวลาเดียวกันเราสร้างโครงสร้างที่ยืดหยุ่นเพื่ออำนวยความสะดวกในการตั้งค่าสไตล์ด้วย CSS ในอนาคต
ลองดูตัวอย่างง่ายๆในรูปที่ 3-1 ซึ่งเป็นสถิติลีกของ American Baseball League:
รูปที่ 3-1: ตัวอย่างการแสดงข้อมูลทั่วไป
บางทีนี่อาจเป็นข้อมูลทางสถิติที่น่าหดหู่มากสำหรับแฟน ๆ เรดซอกซ์ แต่รูปที่ 3-1 เป็นตัวอย่างที่สมบูรณ์แบบของข้อมูลรายการ มันมีส่วนหัวสองตาราง (ปี, คู่ต่อสู้, บันทึกฤดูกาล (WL)) ตามด้วยข้อมูลสี่ปี บนตารางคือชื่อของตารางซึ่งอธิบายเนื้อหาของตาราง
วิธีการทำเครื่องหมายตารางข้อมูลนี้ใช้งานง่ายมากและเราอาจทำสิ่งนี้ด้วยรหัสเช่นนี้:
<P Align = Center> Boston Red Sox World Series Championships </p>
<table>
<tr>
<td align = center> <b> ปี </b> </td>
<td align = center> <b> คู่ต่อสู้ </b> </td>
<td align = center> <b> บันทึกฤดูกาล (wl) </b> </td>
</tr>
<tr>
<Td> 1918 </td>
<td> Chicago Cubs </td>
<TD> 75-51 </td>
</tr>
<tr>
<Td> 1916 </td>
<td> Brooklyn Robins </td>
<TD> 91-63 </td>
</tr>
<tr>
<Td> 1915 </td>
<td> ฟิลาเดลเฟียอีเกิลส์ </td>
<TD> 101-50 </td>
</tr>
<tr>
<Td> 1912 </td>
<td> นิวยอร์กไจแอนต์ </td>
<TD> 105-47 </td>
</tr>
</table>
ผลลัพธ์ที่แสดงในวิธีนี้ควรคล้ายกับรูปที่ 3-1 แต่เราสามารถเพิ่มการปรับปรุงบางอย่างในพื้นฐานนี้
ก่อนอื่นเราสามารถใช้แท็ก <คำอธิบาย> ความหมายมากขึ้นเพื่อจัดเก็บการแข่งขัน Boston Red Sox World Series Championships ต้องติดตามแท็ก <Comtion> ทันทีหลังจากแท็กเริ่มต้น <blem> ซึ่งมักจะใช้ในการจัดเก็บชื่อของตารางหรือคำอธิบายของข้อมูลตาราง
ดูเหมือนว่าจะทำให้ผู้ใช้ดูหัวข้อของตารางได้ง่ายขึ้นและยังสามารถช่วยผู้ที่รู้จักเนื้อหาของเว็บในรูปแบบอื่น
ลองลบย่อหน้าเริ่มต้นและเพิ่ม <คำอธิบายที่ถูกต้อง>:
<table>
<Caption> Boston Red Sox World Series Championships </section>
<tr>
<td align = center> <b> ปี </b> </td>
<td align = center> <b> คู่ต่อสู้ </b> </td>
<td align = center> <b> บันทึกฤดูกาล (wl) </b> </td>
</tr>
<tr>
<Td> 1918 </td>
<td> Chicago Cubs </td>
<TD> 75-51 </td>
</tr>
<tr>
<Td> 1916 </td>
<td> Brooklyn Robins </td>
<TD> 91-63 </td>
</tr>
<tr>
<Td> 1915 </td>
<td> ฟิลาเดลเฟียอีเกิลส์ </td>
<TD> 101-50 </td>
</tr>
<tr>
<Td> 1912 </td>
<td> นิวยอร์กไจแอนต์ </td>
<TD> 105-47 </td>
</tr>
</table>
ที่สำคัญชื่อจะต้องถ่ายทอดเรื่องของข้อมูลต่อไปนี้อย่างรวดเร็ว ตามการตั้งค่าเริ่มต้นเบราว์เซอร์ที่มองเห็นส่วนใหญ่จะเน้นข้อความในแท็ก <Ction> ที่ด้านบนของตาราง แน่นอนเราสามารถใช้ CSS เพื่อเปลี่ยนรูปแบบของการตั้งค่าเริ่มต้นในภายหลัง - ปัญหานี้จะถูกกล่าวถึงในส่วนขยายของเคล็ดลับของบทนี้ อันที่จริงแล้วชื่อเรื่องนี้อยู่ในแท็กที่ไม่ซ้ำกันซึ่งทำให้การปรับเปลี่ยนที่ตามมาของเราทำงานง่ายขึ้นและง่าย
หน้า ก่อนหน้า 1 2 3 4 5 6 7 8 หน้าถัดไปอ่านข้อความเต็ม