HTML Tables With Bootstrap 4

HTML tables with bootstrap 4 styling

Image for post
Image for post
Image by Karolina Grabowska from Pixabay

Creating table

<section id="table">
<table>
<thead>
<tr>
<th scope="col"> Nº </th>
<th scope="col"> First </th>
<th scope="col"> Last </th>
<th scope="col"> Year </th>
<th scope="col"> Gender </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"> 1 </th>
<td > Tadala </td>
<td> Doe </td>
<td> 2017 </td>
<td> Female </td>
</tr>
<tr>
<th scope="row"> 2 </th>
<td> Elon </td>
<td> Andiwa </td>
<td> 2015 </td>
<td> Male </td>
</tr>
<tr>
<th scope="row"> 3 </th>
<td> Tehillah </td>
<td> Tati </td>
<td> 2020 </td>
<td> Female </td>
</tr>
</tbody>
</table>
</section>
Image for post
Image for post

Styling the table

Adding basic bootstrap table formatting

Image for post
Image for post
HTML table formatted with bootstraps’ table class

Highlighting table header

Image for post
Image for post
HTML table header highlighted with bootstraps’ thead-light class

Make table rows striped

Image for post
Image for post

Add borders

Image for post
Image for post

Remove borders

Image for post
Image for post

Hoverable rows

Image for post
Image for post

Conclusion

Written by

I develop software by profession. My interests include: history, economics, politics & enterprise-architecture. I am a child of God.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store