तालिका बनाने के लिए बूटस्ट्रैप फ्रेमवर्क का उपयोग करना

एक तालिका, सामान्य रूप से, स्तंभों के एक समूह के साथ एक पंक्ति के बीच संबंध का वर्णन करती है। यह डेटा को व्यवस्थित और चित्रित करने का एक शानदार तरीका है।

बूटस्ट्रैप एक सीएसएस ढांचा है जो हमें जल्दी से सामग्री बनाने में मदद कर सकता है। इस लेख में, हम समीक्षा करते हैं कि बूटस्ट्रैप को कैसे स्थापित किया जाए, जानें कि हमें तालिका की आवश्यकता क्यों हो सकती है, और बूटस्ट्रैप ढांचे का उपयोग करके कार्रवाई में तालिकाओं के कुछ उदाहरणों पर एक नज़र डालें।

आरंभ करना

यह सुनिश्चित करने के लिए कि हम अपने वेब पेज पर एक मोडल देख सकते हैं, सुनिश्चित करें कि हमारे पास उचित निर्भरताएं हैं। इस प्रदर्शन के लिए, हमें बूटस्ट्रैप, पॉपर.जेएस और jQuery की आवश्यकता नहीं है, लेकिन इसे वैसे भी जोड़ना एक अच्छा विचार है क्योंकि आप शायद अन्य घटकों के साथ काम करेंगे जिन्हें इसकी आवश्यकता है। अपनी सभी निर्भरताओं को प्राप्त करने में सहायता के लिए बूटस्ट्रैप के त्वरित प्रारंभ पृष्ठ पर नेविगेट करें।

यह आप पर निर्भर करता है कि हमें आवश्यक पैकेजों को कैसे लिंक करना है, लेकिन jQuery, Popper.js और बूटस्ट्रैप के लिए सामग्री वितरण नेटवर्क - सीडीएन - का उपयोग करना सबसे आसान, सबसे शुरुआती-अनुकूल तरीका है। अपने <script> . के क्रम से सावधान रहें टैग - यहां ऑर्डर मायने रखता है।

टेबल का उपयोग कब करें

जब आप एक साथ ढेर सारा डेटा एकत्र करना चाहते हैं तो एक टेबल का उपयोग करें। जब आप आसानी से उत्तरदायी तालिकाएँ बनाना चाहते हैं तो बूटस्ट्रैप तालिका का उपयोग करें। बूटस्ट्रैप किसी तालिका की मूल HTML संरचना का उपयोग करता है। आपको बस अपनी वेबसाइट के लिए अनुकूलित, उत्तरदायी तालिकाओं को शामिल करने के लिए उनके सीएसएस और अपनी कस्टम स्टाइल को शामिल करना है।

टेबल बनाने के लिए बूटस्ट्रैप का उपयोग करें

टेबल्स पारंपरिक रूप से HTML और CSS के साथ बनाए जाते हैं। इससे हमारी टेबल का बेसिक स्ट्रक्चर और स्टाइल स्क्रीन पर आ जाएगा। हम बूटस्ट्रैप का उपयोग एक प्रतिक्रियाशील डिज़ाइन प्राप्त करने और जल्दी से जाने के लिए तैयार करने के लिए करते हैं ताकि हम अपने आवेदन के लिए आइटम की हमारी सूची में उच्च प्राथमिकता वाले आइटम पर जा सकें।

बूटस्ट्रैप का उपयोग करते समय, प्रलेखन को हाथ में रखें ताकि आप तालिका को ठीक से व्यवस्थित कर सकें। एक मोडल या नेवबार के विपरीत एक तालिका के बारे में अलग बात यह है कि यह जरूरी नहीं कि काम करने के लिए जावास्क्रिप्ट पर निर्भर हो, इसलिए इसे वास्तविक घटक के बजाय सामग्री सुविधा के रूप में अधिक माना जाता है। घटक मेनू के विपरीत साइडबार में सामग्री मेनू के अंतर्गत तालिकाएँ बनाने के तरीके के बारे में आपको जानकारी मिलेगी।

आइए बुनियादी संरचना से शुरू करें:

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

<!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>

यदि आप ऊपर मार्कअप चलाते हैं, तो आपको एक बहुत ही मूल तालिका दिखाई देगी जिसमें एक शीर्षलेख और कई पंक्तियाँ होंगी जो पेय, कीमतों और उनकी पंक्ति संख्या का वर्णन करती हैं। पूरे दस्तावेज़ के लिए बूटस्ट्रैप द्वारा जो स्थापित किया गया है, उसके अलावा कोई स्टाइल नहीं है।

तालिका में स्टाइल जोड़ने के लिए, आपको केवल .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>

आप प्रासंगिक वर्ग (यानी टेबल-प्राथमिक, टेबल-खतरे, टेबल-सफलता, आदि) को नियंत्रित करने के लिए अंधेरे और प्रकाश के अतिरिक्त मूल बूटस्ट्रैप रंग गुणों का भी उपयोग कर सकते हैं

शैली विकल्प

यदि आप शरीर से अलग तालिका के शीर्ष की रंग योजना को नियंत्रित करना चाहते हैं, तो आप .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 <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>

निष्कर्ष

आपके HTML के साथ संयोजन में बूटस्ट्रैप का उपयोग करके तालिकाओं को अनुकूलित करने के कई तरीके हैं। अपने बूटस्ट्रैप तालिकाओं को स्टाइल करने के लिए इन तरीकों का उपयोग करने में महारत हासिल करने के बाद, अपनी अनुकूलन योग्य शैलियों का उपयोग करने का प्रयास करें!