Bootstrap มีเค้าโครงที่ชัดเจนสำหรับการสร้างตาราง ตารางต่อไปนี้แสดงรายการองค์ประกอบบางส่วนที่รองรับโดย bootstrap:
หมวดหมู่ตาราง
รูปแบบตารางต่อไปนี้สามารถใช้ในตาราง:
<tr>, <th> และ <td> คลาส
คลาสตารางต่อไปนี้สามารถใช้สำหรับแถวหรือเซลล์ของตาราง:
ตารางพื้นฐาน
หากคุณต้องการตารางพื้นฐานที่มีช่องว่างภายในและการแยกแนวนอนเท่านั้นให้เพิ่มคลาส. ตารางตามที่แสดงในตัวอย่างต่อไปนี้:
<div> <table> <ption> เค้าโครงตารางพื้นฐาน </section> <thead> <tr> <th> number </th> <th> เมือง </th> </tr> </thead> <tbody> <tr> <td> No.1 </td> <td> Beijing </td> <td> <td> </tbody> </table> </div>
ผลการแสดงผล:
คลาสตารางเสริม
นอกเหนือจากแท็กตารางพื้นฐานและคลาสตารางเรียนแล้วยังมีบางคลาสที่สามารถใช้ในการกำหนดรูปแบบสำหรับแท็ก ชั้นเรียนเหล่านี้จะได้รับการแนะนำให้รู้จักกับคุณด้านล่าง
ตารางแถบ
โดยการเพิ่มคลาส. แบบลายเส้นคุณจะเห็นแถบบนเส้นภายใน <tbody> ดังที่แสดงในตัวอย่างต่อไปนี้:
<div> <table> <ption> เลย์เอาต์ตารางแถบ </section> <thead> <tr> <th> number </th> <th> เมือง </th> </tr> </thead> <tbody> <tr> <td> no.1 </td> <td> beijing </td> <td> <td> <tr> <td> No.3 </td> <td> suzhou </td> </tr> <tr> <td> No.4 </td> <td> Nanjing </td> </tr> </tbody>
ผลการแสดงผล:
ตารางพรมแดน
โดยการเพิ่มคลาส. -Table-Bordered คุณจะเห็นว่าแต่ละองค์ประกอบมีเส้นขอบรอบ ๆ และทั้งตารางจะถูกปัดเศษดังแสดงในตัวอย่างต่อไปนี้:
<div> <table> <ption> เลย์เอาต์ตารางชายแดน </section> <thead> <tr> <th> number </th> <th> เมือง </th> </tr> </thead> <tbody> <tr> <td> No.1 </td> <td> Beijing </td> <td> <td> <tr> <td> No.3 </td> <td> suzhou </td> </tr> <tr> <td> No.4 </td> <td> Nanjing </td> </tr> </tbody>
ผลการแสดงผล:
ตารางโฮเวอร์
โดยการเพิ่มคลาส Hover. table พื้นหลังสีเทาอ่อนจะปรากฏขึ้นเมื่อตัวชี้วนอยู่เหนือเส้นดังที่แสดงในตัวอย่างต่อไปนี้:
<div> <table> <ption> เค้าโครงตาราง Hoom </section> <thead> <tr> <th> number </th> <th> เมือง </th> </tr> </thead> <tbody> <tr> <td> No.1 </td> <td> Beijing </td> <td> <td> <tr> <td> No.3 </td> <td> suzhou </td> </tr> <tr> <td> No.4 </td> <td> Nanjing </td> </tr> </tbody>
ผลการแสดงผล:
รูปแบบที่ง่ายขึ้น
โดยการเพิ่มคลาสที่ได้รับการปรับตารางการรองรับการขยายจะถูกตัดครึ่งเพื่อให้ตารางดูกะทัดรัดมากขึ้นดังที่แสดงในตัวอย่างด้านล่าง สิ่งนี้มีประโยชน์มากเมื่อพยายามทำให้ข้อมูลดูกะทัดรัดมากขึ้น
<div> <table> <ption> เลย์เอาต์ตารางที่เรียบง่าย </section> <thead> <tr> <th> หมายเลข </th> <th> เมือง </th> </tr> </thead> <tbody> <tr> <td> No.1 </td> <td> beijing </td> <td> </tr> <tr> <td> No.3 </td> <td> suzhou </td> </tr> <tr> <td> No.4 </td> <td> Nanjing </td> </tr> </tbody>
ผลการแสดงผล:
ชั้นเรียนบริบท
คลาสบริบทที่แสดงในตารางต่อไปนี้ช่วยให้คุณเปลี่ยนสีพื้นหลังของแถวตารางหรือเซลล์เดียว
คลาสเหล่านี้สามารถใช้ใน <tr>, <td> และ <th> ดังที่แสดงในตัวอย่างต่อไปนี้:
<div> <table> <ption> เค้าโครงตารางบริบท </section> <thead> <tr> <th> number </th> <th> เมือง </th> </tr> </thead> <tbody> <tr> <td> No.1 </td> <td> beijing </td> <td> <td> <tr> <td> No.3 </td> <td> suzhou </td> </tr> <tr> <td> No.4 </td> <td> Nanjing </td> </tr> </tbody>
ผลการแสดงผล:
ตารางตอบสนอง
ด้วยการห่อหุ้ม. ตารางในระดับที่ตอบสนองต่อ. คุณสามารถเลื่อนตารางตามแนวนอนเพื่อให้เหมาะกับอุปกรณ์ขนาดเล็ก (น้อยกว่า 768px) เมื่อดูบนอุปกรณ์ขนาดใหญ่ที่มีขนาดใหญ่กว่า 768px กว้างคุณจะไม่เห็นความแตกต่างใด ๆ
<div> <table> <ption> เค้าโครงตารางตอบสนอง </section> <thead> <tr> <th> number </th> <th> เมือง </th> </tr> </thead> <tbody> <tr> <td> No.1 </td> <td> beijing </td> <td> <td> <tr> <td> No.3 </td> <td> suzhou </td> </tr> <tr> <td> No.4 </td> <td> Nanjing </td> </tr> </tbody>
ผลการแสดงผล:
หากคุณต้องการเรียนรู้ต่อไปคุณสามารถคลิกที่นี่เพื่อศึกษาแล้วแนบหัวข้อที่ยอดเยี่ยมให้คุณ: การสอนการเรียนรู้ bootstrap
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ ฉันหวังว่ามันจะช่วยให้คุณเรียนรู้ตาราง JS Table Component Bootstrap ได้ดีขึ้น