In this tutorial table element with different attributes in
bootstrap will be explained.Bootstrap provides different
types of responsive and attractive table's layout.
Some example with source code are given below.
Simple table in bootstrap
In this example table class of bootstrap is used to
make a table responsive.
<tableclass="table"><tr><th>Name</th><th>RollNo</th><th>Age</th></tr><tr><td>Irfan</td><td>1234</td><td>16</td></tr><tr><td>Farhan</td><td>6789</td><td>20</td></tr></table>
Output of above code
| Name | RollNo. | Age |
|---|---|---|
| Irfan | 1234 | 16 |
| Farhan | 6789 | 20 |
The table-bordered class
In this example table-bordered bootstrap class is
used to make a table responsive while using borders. Using this
example there is no need to use other styling scripts to make the
table responsive with borderes.
<tableclass="table table-bordered"><tr><th>Name</th><th>RollNo</th><th>Age</th></tr><tr><td>Irfan</td><td>1234</td><td>16</td></tr><tr><td>Farhan</td><td>6789</td><td>20</td></tr></table>
Output of above code
| Name | RollNo. | Age |
|---|---|---|
| Irfan | 1234 | 16 |
| Farhan | 6789 | 20 |
The table-striped class
In this example table-striped bootstrap class is
used to make a table with zebra-stripes. This makes the table
more attractive than a simple table.
<tableclass="table table-striped"><tr><th>Name</th><th>RollNo</th><th>Age</th></tr><tr><td>Irfan</td><td>1234</td><td>16</td></tr><tr><td>Farhan</td><td>6789</td><td>20</td></tr></table>
Output of above code
| Name | RollNo. | Age |
|---|---|---|
| Irfan | 1234 | 16 |
| Farhan | 6789 | 20 |
The table-hover class
In this example table-hover bootstrap class is
used to make a table hover-able rows. This makes the table
more attractive than a simple table and this is very easy
with short code.
<tableclass="table table-hover"><tr><th>Name</th><th>RollNo</th><th>Age</th></tr><tr><td>Irfan</td><td>1234</td><td>16</td></tr><tr><td>Farhan</td><td>6789</td><td>20</td></tr></table>
Output of above code
| Name | RollNo. | Age |
|---|---|---|
| Irfan | 1234 | 16 |
| Farhan | 6789 | 20 |
The table-condensed class
In this example table-condensed bootstrap class is
used to make a table rows condensed.
<tableclass="table table-condensed"><tr><th>Name</th><th>RollNo</th><th>Age</th></tr><tr><td>Irfan</td><td>1234</td><td>16</td></tr><tr><td>Farhan</td><td>6789</td><td>20</td></tr></table>
Output of above code
| Name | RollNo. | Age |
|---|---|---|
| Irfan | 1234 | 16 |
| Farhan | 6789 | 20 |
The table-responsive class
In this example table-responsive bootstrap class is
used to make a table responsive. It makes the table scroll on different
size of screen like 767px and others.
<divclass="table-responsive"><tableclass="table"><tr><th>Name</th><th>RollNo</th><th>Age</th></tr><tr><td>Irfan</td><td>1234</td><td>16</td></tr><tr><td>Farhan</td><td>6789</td><td>20</td></tr></table></div>
Output of above code
| Name | RollNo. | Age |
|---|---|---|
| Irfan | 1234 | 16 |
| Farhan | 6789 | 20 |
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
