Bootstrap in Hindi Tables

First Page
Next Page

Bootstrap Table मे एक Light Padding और Horizontal Dividers होते है. Bootstrap का उपयोग करके आप आसान तरीके से Table के रूप मे बहुत सुधार कर सकते है.

Supported Table Elements

Tag Description
<table>

यह एक Table को Define करता है.
<thead>

यह Table मे Header सामग्री का समूह कहलाता है.

<tbody>

यह Table मे Body सामग्री का समूह कहलाता है.
<tr>

यह Table मे Row को Define करता है.
<td>

यह Table मे Cell को Define करता है.
<th>

यह Table मे Header Cell को Define करता है.
<caption>

यह एक Table Caption को Define करता है.

Simple Table with Bootstrap

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Tables Example</title>
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
   <body>
      <div class="container">  
         <table class="table">
            <thead>
               <tr>
                  <th>Row</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Email</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td>1</td>
                  <td>Saharukh</td>
                  <td>khan</td>
                  <td>Saharukh@mail.com</td>
               </tr>
               <tr>
                  <td>2</td>
                  <td>Saharukh</td>
                  <td>khan</td>
                  <td>Saharukh@mail.com</td>
               </tr>
               <tr>
                  <td>3</td>
                  <td>Saharukh</td>
                  <td>khan</td>
                  <td>Saharukh@mail.com</td>
               </tr>
            </tbody>
         </table>       
      </div>  
   </body>
</html>

Output

Striped Table

आप आसानी से Bootstrap's Class को जोड़कर zebra-stripes की तरह Alternate Background वाली Table बना सकते है. इसके लिये आपको Table Base Class मे .table-striped का उपयोग करना होगा. यह Background के Color को <tbody> Elements के भीतर Table Row मे जोड़कर प्राप्त किया जाता है.

For Example

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Striped Table</title>
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
   <body>
      <div class="container">
         <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>Amir</td>
                  <td>Mumbai, Maharashtra,</td>
                  <td>400090</td>
               </tr>
               <tr>
                  <td>Salman</td>
                  <td>Indore</td>
                  <td>452018</td>
               </tr>
               <tr>
                  <td>Saharukh</td>
                  <td>New Delhi</td>
                  <td>110005</td>
               </tr>
            </tbody>
         </table>
      </div>
   </body>
</html>

Output

Bordered Table

Table Border Class का उपयोग Table और Cells के सभी किनारों पर Borders को Add करने के लिए किया जाता है.

For Example

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Bordered Table</title>
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
   <body>
      <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>Amir</td>
               <td>Mumbai, Maharashtra,</td>
               <td>400090</td>
            </tr>
            <tr>
               <td>Salman</td>
               <td>Indore</td>
               <td>452018</td>
            </tr>
            <tr>
               <td>Saharukh</td>
               <td>New Delhi</td>
               <td>110005</td>
            </tr>
         </tbody>
      </table>
   </body>
</html>

Output

Hover Table

Table Hover Class का उपयोग Table Rows पर Hover स्थिति को सक्षम करने के लिए किया जाता है.

For Example

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Hover Table</title>
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
   <body>
      <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>Amir</td>
               <td>Mumbai, Maharashtra,</td>
               <td>400090</td>
            </tr>
            <tr>
               <td>Salman</td>
               <td>Indore</td>
               <td>452018</td>
            </tr>
            <tr>
               <td>Saharukh</td>
               <td>New Delhi</td>
               <td>110005</td>
            </tr>
         </tbody>
      </table>
   </body>
</html>

Output

Responsive Tables

किसी भी Table को Responsive बनाने के लिए केवल Table को <div> Element के अंदर Table Responsive Class को Apply करना होता है.

For Example

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Responsive Tables</title>
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
   <body>
      <div class="table-responsive">
         <table class="table">
            <caption>Responsive Tables Layout</caption>
            <thead>
               <tr>
                  <th>Name</th>
                  <th>City</th>
                  <th>Pincode</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td>Amir</td>
                  <td>Mumbai, Maharashtra,</td>
                  <td>400090</td>
               </tr>
               <tr>
                  <td>Salman</td>
                  <td>Indore</td>
                  <td>452018</td>
               </tr>
               <tr>
                  <td>Saharukh</td>
                  <td>New Delhi</td>
                  <td>110005</td>
               </tr>
            </tbody>
         </table>
      </div>
   </body>
</html>

Output

First Page
Next Page


Bootstrap Articles in Hindi

Bootstrap in Hindi Introduction
Bootstrap in Hindi Grid
Bootstrap in Hindi Pagination
Jumbotron and Glyphicons
Bootstrap in Hindi Tables
Bootstrap in Hindi Carousel
Bootstrap in Hindi Navbar
Bootstrap in Hindi Images
Bootstrap in Hindi Thumbnails
Bootstrap in Hindi Forms
Bootstrap in Hindi Dropdowns
Bootstrap Hindi Tooltip Plugin