Bootstrap - ตาราง

Bootstrap จัดเตรียมเค้าโครงที่สะอาดสำหรับการสร้างตาราง องค์ประกอบตารางบางส่วนที่สนับสนุนโดย Bootstrap ได้แก่ -

ซีเนียร์	แท็กและคำอธิบาย
1	<table> การตัดองค์ประกอบสำหรับการแสดงข้อมูลในรูปแบบตาราง
2	<thead> องค์ประกอบคอนเทนเนอร์สำหรับแถวส่วนหัวของตาราง (<tr>) เพื่อติดป้ายชื่อคอลัมน์ของตาราง
3	<tbody> องค์ประกอบคอนเทนเนอร์สำหรับแถวตาราง (<tr>) ในเนื้อหาของตาราง
4	<tr> องค์ประกอบคอนเทนเนอร์สำหรับชุดเซลล์ตาราง (<td> หรือ <th>) ที่ปรากฏในแถวเดียว
5	<td> เซลล์ตารางเริ่มต้น
6	<th> เซลล์ตารางพิเศษสำหรับป้ายชื่อคอลัมน์ (หรือแถวขึ้นอยู่กับขอบเขตและตำแหน่ง) ต้องใช้ภายใน <thead>
7	<caption> คำอธิบายหรือสรุปสิ่งที่ตารางมี

ตารางพื้นฐาน

หากคุณต้องการมีความสุขรูปแบบตารางขั้นพื้นฐานที่มีเพียงบาง padding แสงและวงเวียนแนวนอนเพิ่มระดับฐานของ.tableไปยังตารางใด ๆ ที่แสดงในตัวอย่างต่อไปนี้ -

<table class = "table">
   <caption>Basic Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
      </tr>
   </tbody>
</table>

ตารางเรียนเสริม

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

ลายตาราง

ด้วยการเพิ่มคลาส. table-ลายทางคุณจะได้รับลายเส้นบนแถวภายใน <tbody> ดังที่เห็นในตัวอย่างต่อไปนี้ -

<table class = "table table-striped">
   <caption>Striped Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

โต๊ะที่มีขอบ

ด้วยการเพิ่มคลาส. table-borderedคุณจะได้รับเส้นขอบล้อมรอบทุกองค์ประกอบและมุมโค้งมนรอบ ๆ ตารางทั้งหมดดังที่เห็นในตัวอย่างต่อไปนี้ -

<table class = "table table-bordered">
   <caption>Bordered Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
	
</table>

วางเมาส์เหนือตาราง

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

<table class = "table table-hover">
   <caption>Hover Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

ตารางย่อ

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

<table class = "table table-condensed">
   <caption>Condensed Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

คลาสตามบริบท

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

ซีเนียร์	ชั้นเรียนและคำอธิบาย
1	.active ใช้สีโฮเวอร์กับแถวหรือเซลล์เฉพาะ
2	.success บ่งบอกถึงการกระทำที่ประสบความสำเร็จหรือในเชิงบวก
3	.warning ระบุคำเตือนที่อาจต้องให้ความสนใจ
4	.danger บ่งชี้ถึงการกระทำที่เป็นอันตรายหรืออาจเป็นลบ

สามารถใช้คลาสเหล่านี้กับ <tr>, <td> หรือ <th>

<table class = "table">
   <caption>Contextual Table Layout</caption>
   
   <thead>
      <tr>
         <th>Product</th>
         <th>Payment Date</th>
         <th>Status</th>
      </tr>
   </thead>
   
   <tbody>
      <tr class = "active">
         <td>Product1</td>
         <td>23/11/2013</td>
         <td>Pending</td>
      </tr>
      
      <tr class = "success">
         <td>Product2</td>
         <td>10/11/2013</td>
         <td>Delivered</td>
      </tr>
      
      <tr class = "warning">
         <td>Product3</td>
         <td>20/10/2013</td>
         <td>In Call to confirm</td>
      </tr>
      
      <tr class = "danger">
         <td>Product4</td>
         <td>20/10/2013</td>
         <td>Declined</td>
      </tr>
   </tbody>
</table>

ตารางตอบสนอง

ด้วยการรวม. tableไว้ในคลาส. table -responsiveคุณจะทำให้ตารางเลื่อนในแนวนอนไปจนถึงอุปกรณ์ขนาดเล็ก (ต่ำกว่า 768px) เมื่อดูสิ่งที่มีขนาดกว้างกว่า 768px คุณจะไม่เห็นความแตกต่างในตารางเหล่านี้

<div class = "table-responsive">
   <table class = "table">
      <caption>Responsive Table Layout</caption>
      
      <thead>
         <tr>
            <th>Product</th>
            <th>Payment Date</th>
            <th>Status</th>
         </tr>
      </thead>
      
      <tbody>
         <tr>
            <td>Product1</td>
            <td>23/11/2013</td>
            <td>Pending</td>
         </tr>
         
         <tr>
            <td>Product2</td>
            <td>10/11/2013</td>
            <td>Delivered</td>
         </tr>
         
         <tr>
            <td>Product3</td>
            <td>20/10/2013</td>
            <td>In Call to confirm</td>
         </tr>
         
         <tr>
            <td>Product4</td>
            <td>20/10/2013</td>
            <td>Declined</td>
         </tr>
      </tbody>
   </table>
</div>