home

หน้าแรก
 Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

การใช้ Bootstrap Framework เพื่อสร้างตาราง

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

Bootstrap เป็นเฟรมเวิร์ก CSS ที่ช่วยให้เราสร้างเนื้อหาได้อย่างรวดเร็ว ในบทความนี้ เราจะทบทวนวิธีตั้งค่า Bootstrap เรียนรู้ว่าเหตุใดเราจึงอาจต้องการตาราง และดูตัวอย่างของตารางที่ใช้งานจริงโดยใช้เฟรมเวิร์ก Bootstrap

เริ่มต้นใช้งาน

เพื่อให้แน่ใจว่าเราสามารถดูโมดอลบนหน้าเว็บของเราได้ ตรวจสอบให้แน่ใจว่าเรามีการอ้างอิงที่เหมาะสม สำหรับการสาธิตนี้ เราไม่ต้องการ Bootstrap, Popper.JS และ jQuery แต่ควรเพิ่มมันต่อไป เนื่องจากคุณอาจจะทำงานกับส่วนประกอบอื่นๆ ที่จำเป็นต้องใช้ ไปที่หน้าเริ่มต้นอย่างรวดเร็วของ Bootstrap เพื่อขอความช่วยเหลือเกี่ยวกับการอ้างอิงทั้งหมดของคุณ

ขึ้นอยู่กับคุณว่าจะเชื่อมโยงแพ็คเกจที่เราต้องการอย่างไร แต่วิธีที่ง่ายที่สุดและเป็นมิตรกับผู้เริ่มต้นมากที่สุดคือการใช้เครือข่ายการจัดส่งเนื้อหา – CDN – สำหรับ jQuery, Popper.js และ Bootstrap ระวังการเรียงลำดับของ <script> . ของคุณ แท็ก – การสั่งซื้อมีความสำคัญที่นี่

ควรใช้ตารางเมื่อใด

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

ใช้ Bootstrap เพื่อสร้างตาราง

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

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

เริ่มจากโครงสร้างพื้นฐานกันก่อน:

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Table Demo</title>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
 
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <table>
    <thead>
      <tr>
        <th>Bootstrap Table Demo</th>
      </tr>
    </thead>
    <tbody>
      <tr>
       <th scope="col">No. </th>
       <th scope="col">Drink</th>
       <th scope="col">Price</th>
     </tr>
     <tr>
       <td scope="row">#1</td>
       <td>Iced Tea</td>
       <td>$3.25</td>
     </tr>
     <tr>
       <td scope="row">#2</td>
       <td>Fountain Soda</td>
       <td>$3.00</td>
     </tr>
     <tr>
       <td scope="row">#3</td>
       <td>Coffee</td>
       <td>$2.00</td>
     </tr>
     <tr>
       <td scope="row">#4</td>
       <td>Latte</td>
       <td>$4.25</td>
     </tr>
    </tbody>
  </table>
 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <script src="script.js">
  </script>
</body>
 
</html>

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

ในการเพิ่มสไตล์ให้กับตาราง สิ่งที่คุณต้องทำคือเพิ่ม .table คลาสไปที่ <table> แท็ก.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Table Demo</title>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
 
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <table class="table">
    <thead>
      <tr>
        <th scope="colgroup"> Bootstrap Table Demo</th>
      </tr>
    </thead>
    <tbody>
      <tr>
       <th scope="col">No. </th>
       <th scope="col">Drink</th>
       <th scope="col">Price</th>
     </tr>
     <tr>
       <td scope="row">#1</td>
       <td>Iced Tea</td>
       <td>$3.25</td>
     </tr>
     <tr>
       <td scope="row">#2</td>
       <td>Fountain Soda</td>
       <td>$3.00</td>
     </tr>
     <tr>
       <td scope="row">#3</td>
       <td>Coffee</td>
       <td>$2.00</td>
     </tr>
     <tr>
       <td scope="row">#4</td>
       <td>Latte</td>
       <td>$4.25</td>
     </tr>
 
    </tbody>
  </table>
 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <script src="script.js">
  </script>
</body>
 
</html>

ซึ่งจะช่วยเพิ่มสไตล์และการตอบสนองขั้นพื้นฐานให้กับโต๊ะ มาดูกันว่าเราสามารถปรับแต่งสไตล์ให้เหมาะกับความต้องการของเราได้อย่างไร

กลับสีเริ่มต้น

เพิ่ม .table-dark นอกเหนือจาก .table ในรายชื่อคลาสของคุณใน <table> เพื่อเปลี่ยนชุดสีพื้นฐานของตารางเป็นสีเข้ม 

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Table Demo</title>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
 
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <table class="table table-dark">
    <thead>
      <tr>
        <th scope="colgroup"> Bootstrap Table Demo</th>
      </tr>
    </thead>
    <tbody>
      <tr>
       <th scope="col">No. </th>
       <th scope="col">Drink</th>
       <th scope="col">Price</th>
     </tr>
     <tr>
       <td scope="row">#1</td>
       <td>Iced Tea</td>
       <td>$3.25</td>
     </tr>
     <tr>
       <td scope="row">#2</td>
       <td>Fountain Soda</td>
       <td>$3.00</td>
     </tr>
     <tr>
       <td scope="row">#3</td>
       <td>Coffee</td>
       <td>$2.00</td>
     </tr>
     <tr>
       <td scope="row">#4</td>
       <td>Latte</td>
       <td>$4.25</td>
     </tr>
 
    </tbody>
  </table>
 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <script src="script.js">
  </script>
</body>
 
</html>

คุณยังสามารถใช้คุณสมบัติสี Bootstrap พื้นฐานนอกเหนือจากความมืดและแสงเพื่อควบคุมคลาสตามบริบท (เช่น .table-primary, table-danger, table-success เป็นต้น)

ตัวเลือกรูปแบบ

หากคุณต้องการควบคุมรูปแบบสีของส่วนหัวของตารางแยกจากเนื้อหา คุณสามารถทำได้โดยเพิ่ม .thead-dark หรือ .thead-light ไปที่ <thead> แอตทริบิวต์ของคลาส 

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Table Demo</title>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
 
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <table class="table table-danger">
    <thead class="thead-light">
      <th>Bootstrap Table Demo</th>
     <th />
     <th />
    </thead>
    <tbody>
      <tr>
       <th scope="col">No. </th>
       <th scope="col">Drink</th>
       <th scope="col">Price</th>
     </tr>
     <tr>
       <td scope="row">#1</td>
       <td>Iced Tea</td>
       <td>$3.25</td>
     </tr>
     <tr>
       <td scope="row">#2</td>
       <td>Fountain Soda</td>
       <td>$3.00</td>
     </tr>
     <tr>
       <td scope="row">#3</td>
       <td>Coffee</td>
       <td>$2.00</td>
     </tr>
     <tr>
       <td scope="row">#4</td>
       <td>Latte</td>
       <td>$4.25</td>
     </tr>
 
    </tbody>
  </table>
 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <script src="script.js">
  </script>
</body>
 
</html>

ลายทาง

เพิ่ม .table-striped <table> แท็กเพื่อปรับสีของแถวอื่นๆ ในตาราง 

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Table Demo</title>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
 
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <table class="table table-striped table-warning">
    <thead class="thead-light">
      <th>Bootstrap Table Demo With Stripes</th>
     <th />
     <th />
    </thead>
    <tbody>
      <tr>
       <th scope="col">No. </th>
       <th scope="col">Drink</th>
       <th scope="col">Price</th>
     </tr>
     <tr>
       <td scope="row">#1</td>
       <td>Iced Tea</td>
       <td>$3.25</td>
     </tr>
     <tr>
       <td scope="row">#2</td>
       <td>Fountain Soda</td>
       <td>$3.00</td>
     </tr>
     <tr>
       <td scope="row">#3</td>
       <td>Coffee</td>
       <td>$2.00</td>
     </tr>
     <tr>
       <td scope="row">#4</td>
       <td>Latte</td>
       <td>$4.25</td>
     </tr>
 
    </tbody>
  </table>
 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <script src="script.js">
  </script>
</body>
 
</html>

เส้นขอบ

ใช้ .table-bordered เพื่อเพิ่มเส้นขอบให้ทุกด้านของแต่ละเซลล์ ใช้ .table-borderless เพื่อลบเส้นขอบทั้งหมดออกจากทุกด้านของแต่ละเซลล์ 

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Table Demo</title>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
 
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <table class="table table-primary table-bordered">
    <thead class="thead-light">
      <th>Bootstrap Table Demo With Borders</th>
     <th />
     <th />
    </thead>
    <tbody>
      <tr>
       <th scope="col">No. </th>
       <th scope="col">Drink</th>
       <th scope="col">Price</th>
     </tr>
     <tr>
       <td scope="row">#1</td>
       <td>Iced Tea</td>
       <td>$3.25</td>
     </tr>
     <tr>
       <td scope="row">#2</td>
       <td>Fountain Soda</td>
       <td>$3.00</td>
     </tr>
     <tr>
       <td scope="row">#3</td>
       <td>Coffee</td>
       <td>$2.00</td>
     </tr>
     <tr>
       <td scope="row">#4</td>
       <td>Latte</td>
       <td>$4.25</td>
     </tr>
 
    </tbody>
  </table>
 
 <table class="table table-primary table-borderless">
    <thead class="thead-light">
      <th>Bootstrap Table Demo Without Borders</th>
     <th />
     <th />
    </thead>
    <tbody>
      <tr>
       <th scope="col">No. </th>
       <th scope="col">Drink</th>
       <th scope="col">Price</th>
     </tr>
     <tr>
       <td scope="row">#1</td>
       <td>Iced Tea</td>
       <td>$3.25</td>
     </tr>
     <tr>
       <td scope="row">#2</td>
       <td>Fountain Soda</td>
       <td>$3.00</td>
     </tr>
     <tr>
       <td scope="row">#3</td>
       <td>Coffee</td>
       <td>$2.00</td>
     </tr>
     <tr>
       <td scope="row">#4</td>
       <td>Latte</td>
       <td>$4.25</td>
     </tr>
 
    </tbody>
  </table>
 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <script src="script.js">
  </script>
</body>
 
</html>

โฮเวอร์

เพิ่ม .table-hover ในแอตทริบิวต์ class ของ <table> แท็กจะอนุญาตแถวทั้งหมดใน <tbody> ที่จะกลายเป็นโฉบ 

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Table Demo</title>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
 
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <table class="table table-hover table-primary table-bordered">
    <thead class="thead-light">
      <th>Bootstrap Table Demo With Hover</th>
     <th />
     <th />
    </thead>
    <tbody>
      <tr>
       <th scope="col">No. </th>
       <th scope="col">Drink</th>
       <th scope="col">Price</th>
     </tr>
     <tr>
       <td scope="row">#1</td>
       <td>Iced Tea</td>
       <td>$3.25</td>
     </tr>
     <tr>
       <td scope="row">#2</td>
       <td>Fountain Soda</td>
       <td>$3.00</td>
     </tr>
     <tr>
       <td scope="row">#3</td>
       <td>Coffee</td>
       <td>$2.00</td>
     </tr>
     <tr>
       <td scope="row">#4</td>
       <td>Latte</td>
       <td>$4.25</td>
     </tr>
 
    </tbody>
  </table>
 
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <script src="script.js">
  </script></body>
 
</html>

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

ห่อหุ้ม <table> . ของคุณ ด้วย <div> ด้วยชื่อคลาส .table-responsive เพื่อให้ตารางของคุณตอบสนองในทุกเบรกพอยต์ โดยพื้นฐานแล้วจะทำให้ตารางของคุณสามารถเลื่อนในแนวนอนได้หากเนื้อหาถูกตัดทอนตามขนาดของตาราง 

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Table Demo</title>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
 
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <table class="table table-hover table-primary table-bordered">
    <thead class="thead-light">
      <th>Bootstrap Table Demo With Hover</th>
     <th />
     <th />
    </thead>
    <tbody>
      <tr>
       <th scope="col">No. </th>
       <th scope="col">Drink</th>
       <th scope="col">Price</th>
     </tr>
     <tr>
       <td scope="row">#1</td>
       <td>Iced Tea</td>
       <td>$3.25</td>
     </tr>
     <tr>
       <td scope="row">#2</td>
       <td>Fountain Soda</td>
       <td>$3.00</td>
     </tr>
     <tr>
       <td scope="row">#3</td>
       <td>Coffee</td>
       <td>$2.00</td>
     </tr>
     <tr>
       <td scope="row">#4</td>
       <td>Latte</td>
       <td>$4.25</td>
     </tr>
 
    </tbody>
  </table>
 
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <script src="script.js">
  </script></body>
 
</html>

บทสรุป

มีหลายวิธีในการปรับแต่งตารางโดยใช้ Bootstrap ร่วมกับ HTML ของคุณ หลังจากที่คุณเชี่ยวชาญการใช้วิธีการเหล่านี้ในการจัดสไตล์ตาราง Bootstrap แล้ว ให้ลองใช้สไตล์ที่ปรับแต่งได้ของคุณเอง!