ในอดีตนักออกแบบเว็บไซต์หลายคนชอบที่จะใช้การเรนเดอร์เว็บของพวกเขาในหน้าเว็บด้วยเค้าโครงตาราง แต่สิ่งนี้จะประสบปัญหาที่ลำบากมากขึ้นซึ่งก็คือมันค่อนข้างยากที่จะดีบักและรักษาในภายหลัง ตอนนี้นักพัฒนาส่วนหน้ามากขึ้นเรื่อย ๆ เริ่มใช้ XHTML+CSS เพื่อแทนที่เค้าโครงตารางดั้งเดิมเพื่อให้เลย์เอาต์โดยรวมของหน้าเว็บเสร็จสมบูรณ์ซึ่งไม่เพียง แต่ลดค่าใช้จ่ายในการพัฒนาและการบำรุงรักษาเว็บไซต์ แต่ยังทำให้รหัสความหมายมากขึ้น อย่างไรก็ตามมันไม่ได้หมายความว่าตารางได้หายไปจากนี้ไป มันยังคงถูกใช้โดยคนจำนวนมากว่าเป็นสิ่งจำเป็นสำหรับการแสดงข้อมูลบนหน้าเว็บเช่นรายการข้อมูลส่วนบุคคล ฯลฯ ในความเป็นจริงการใช้แท็ก DL, DT และ DD ของ HTML จะช่วยให้คุณประหยัดรหัสมากขึ้นและทำให้รหัสสอดคล้องกับความหมายของเนื้อหา แน่นอนว่าตารางยังมีการใช้งานนั่นคือตารางข้อมูลที่มีข้อมูลจำนวนมาก แต่รายการข้อมูลขนาดเล็กและรูปแบบสามารถหลีกเลี่ยงได้อย่างสมบูรณ์!
หากคุณยังคงใช้ตารางแบบดั้งเดิมเพื่อสร้างรายการข้อมูลโปรดดูว่าการใช้แท็ก DL, DL และ DD ของ HTML ต่อไปเพื่อให้การทำงานของคุณง่ายขึ้น ...
รหัสรายการข้อมูลของตารางแบบดั้งเดิมแสดงอยู่ด้านล่าง เราจำเป็นต้องเพิ่มแท็ก TR ในแต่ละแถวจากนั้นเพิ่มแท็ก TD ลงในชื่อและข้อมูล เนื่องจากแท็กเป็น TD หากคุณต้องการเพิ่มสไตล์คุณต้องเพิ่มแอตทริบิวต์คลาสในแต่ละ TD
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <table> <tbody> <tr> <td class = title> ชื่อ: </td> <td class = text> squall li </td> </tr> <tr> <td class = title> อายุ: </td> <td class = text> 23 </td> </tr> <tr> <td class = title> เพศ: </td> <td class = text> male </td> </tr> <tr> <td class = title> วันเกิด: </td> <td class = text> 26 พฤษภาคม 1986 </td> </tr> </tbody> </table>
|