HTML Tables With Bootstrap 4

HTML tables with bootstrap 4 styling

Image by Karolina Grabowska from Pixabay

The table remains one of the most versatile tools when it comes to presenting data in a well formatted manner.

In this guide, we will take a look at presenting data in an HTML table and how to add some formatting and styling using bootstrap 4.

Creating table

To create a basic table, we use the HTML <table> element, which is the main container element for tables in HTML.

The code below will create a table that displays basic personal information, that is: FirstName, LastName, YearOfBirth and Gender. In addition, we display the row number of the table data.

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