Bootstrap Table Classes - Bootstrap Tutorial 16

Veröffentlicht am: 05 Dezember 2019
auf dem Kanal: ChidresTechTutorials

923

Notes for You:: Bootstrap Table Classes - Bootstrap Tutorial 16

table: sets table width to 100% and ads top border to table rows
<table class="table">
<thead>
<tr>
<th>Some Text</th><th>Some Text</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
</tfoot>
</table>

table & table-striped : sets alternative background color to the rows of a table body tag
<table class="table table-striped">
<thead>
<tr>
<th>Some Text</th><th>Some Text</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
</tfoot>
</table>

table & table-bordered: creates a table with border
<table class="table table-bordered">
<thead>
<tr>
<th>Some Text</th><th>Some Text</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
</tfoot>
</table>

table & table-borderless : creates a table without border
<table class="table table-borderless">
<thead>
<tr>
<th>Some Text</th><th>Some Text</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
</tfoot>
</table>

table & table-hover : it ads hover effect to rows of a table body tag
<table class="table table-hover">
<thead>
<tr>
<th>Some Text</th><th>Some Text</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
</tfoot>
</table>

Table Color related classes:
allow us to create colored tables

table-primary
table-secondary
table-success
table-info
table-warning
table-danger
table-light
table-dark

<table class="table table-primary table-hover">
<thead>
<tr>
<th>Some Text</th><th>Some Text</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Some Text</td><td>Some Text</td>
</tr>
</tfoot>
</table>

Note:
replace < with less-than symbol.
replace > with greater-than symbol.

=========================================

Follow the link for next video:
Bootstrap Tutorial 17 - Bootstrap Button Related Classes | Bootstrap Buttons
   • Bootstrap Button Classes - Bootstrap Tutor...

Follow the link for previous video:
Bootstrap Tutorial 15 - Bootstrap List Related Classes | Bootstrap Lists
   • Bootstrap List Classes - Bootstrap Tutoria...

=========================================

Bootstrap Tutorials Playlist:-
   • Bootstrap4 Tutorials

=========================================
Watch My Other Useful Tutorials:-

PHP Tutorials Playlist:-
   • PHP Tutorials - The Ultimate Course

=========================================

Subscribe to our YouTube channel:-
   / chidrestechtutorials

Hash Tags:- #ChidresTechTutorials #Bootstrap #BootstrapTutorial

Auf dieser Seite können Sie das Online-Video Bootstrap Table Classes - Bootstrap Tutorial 16 mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer ChidresTechTutorials 05 Dezember 2019 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 923 Mal angesehen und es wurde von 23 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!