1. Home
  2. Startup
  3. How to Add a Responsive Table to Your Startup Template

How to Add a Responsive Table to Your Startup Template

This article will show you how to add tabular data to your Startup template.

Adding a Table

How to Add a Responsive Table to Your Startup Template

An HTML table is defined with the <table> tag. Each table row is defined with the <tr> tag, a table header is defined with the <th> tag and a table data/cell is defined with the <td> tag. You can use <thead> to group a table’s header content, <tbody> to group a table’s body content and <tfoot> to group a table’s footer content.

The code below adds the table shown above to the Startup template. We’ve placed the table inside a container that we’ve sized and positioned using some pre-defined classes. Check our classes guide for an explanation of what the classes do. The table has a class of table which a Bootstrap class that adds styles to the table.

<section class="pt-105 pb-45">
  <div class="container px-xl-0">
    <div class="row justify-content-center">
      <div class="col-xl-8 col-lg-10">
        <table class="table">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">First Name</th>
              <th scope="col">Last Name</th>
              <th scope="col">Email</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">1</th>
              <td>Cruella</td>
              <td>De Vil</td>
              <td>deVil@furs_r_us.com</td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td>Tom</td>
              <td>Riddle</td>
              <td>i.am.lord@voldemort.com</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Sheev</td>
              <td>Palpatine</td>
              <td>darth@sidious.me</td>
            </tr>
            <tr>
              <th scope="row">4</th>
              <td>Anakin</td>
              <td>Skywalker</td>
              <td>dv@mail.com</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>

You can make the table have a dark background by adding the table-dark class to it.

Dark table

<section class="pt-105 pb-45">
  <div class="container px-xl-0">
    <div class="row justify-content-center">
      <div class="col-xl-8 col-lg-10">
        <table class="table table-dark">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">First Name</th>
              <th scope="col">Last Name</th>
              <th scope="col">Email</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">1</th>
              <td>Cruella</td>
              <td>De Vil</td>
              <td>deVil@furs_r_us.com</td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td>Tom</td>
              <td>Riddle</td>
              <td>i.am.lord@voldemort.com</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Sheev</td>
              <td>Palpatine</td>
              <td>darth@sidious.me</td>
            </tr>
            <tr>
              <th scope="row">4</th>
              <td>Anakin</td>
              <td>Skywalker</td>
              <td>dv@mail.com</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>

Adding Color to the Table Head

Adding Color to the Table Head

You can make the table’s head more distinguishable from the body by adding some color to it. Use the thead-dark class for a dark table head.

<section class="pt-105 pb-45">
  <div class="container px-xl-0">
    <div class="row justify-content-center">
      <div class="col-xl-8 col-lg-10">
        <table class="table">
          <thead class="thead-dark">
            <tr>
              <th scope="col">#</th>
              <th scope="col">First Name</th>
              <th scope="col">Last Name</th>
              <th scope="col">Email</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">1</th>
              <td>Cruella</td>
              <td>De Vil</td>
              <td>deVil@furs_r_us.com</td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td>Tom</td>
              <td>Riddle</td>
              <td>i.am.lord@voldemort.com</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Sheev</td>
              <td>Palpatine</td>
              <td>darth@sidious.me</td>
            </tr>
            <tr>
              <th scope="row">4</th>
              <td>Anakin</td>
              <td>Skywalker</td>
              <td>dv@mail.com</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>

And thead-light class for a lighter table head.

Light table head

<section class="pt-105 pb-45">
  <div class="container px-xl-0">
    <div class="row justify-content-center">
      <div class="col-xl-8 col-lg-10">
        <table class="table">
          <thead class="thead-light">
            <tr>
              <th scope="col">#</th>
              <th scope="col">First Name</th>
              <th scope="col">Last Name</th>
              <th scope="col">Email</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">1</th>
              <td>Cruella</td>
              <td>De Vil</td>
              <td>deVil@furs_r_us.com</td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td>Tom</td>
              <td>Riddle</td>
              <td>i.am.lord@voldemort.com</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Sheev</td>
              <td>Palpatine</td>
              <td>darth@sidious.me</td>
            </tr>
            <tr>
              <th scope="row">4</th>
              <td>Anakin</td>
              <td>Skywalker</td>
              <td>dv@mail.com</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>

Creating Tables With Striped Rows

Creating Tables With Striped Rows

Zebra-striping the rows of a table makes tables easier to skim through. Add the table-striped class to your table to activate this.

<section class="pt-105 pb-45">
  <div class="container px-xl-0">
    <div class="row justify-content-center">
      <div class="col-xl-8 col-lg-10">
        <table class="table table-striped">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">First Name</th>
              <th scope="col">Last Name</th>
              <th scope="col">Email</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">1</th>
              <td>Cruella</td>
              <td>De Vil</td>
              <td>deVil@furs_r_us.com</td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td>Tom</td>
              <td>Riddle</td>
              <td>i.am.lord@voldemort.com</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Sheev</td>
              <td>Palpatine</td>
              <td>darth@sidious.me</td>
            </tr>
            <tr>
              <th scope="row">4</th>
              <td>Anakin</td>
              <td>Skywalker</td>
              <td>dv@mail.com</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>

Adding Borders to Your Table

Adding Borders to Your Table

Add the table-bordered class for a bordered table.

<section class="pt-105 pb-45">
  <div class="container px-xl-0">
    <div class="row justify-content-center">
      <div class="col-xl-8 col-lg-10">
        <table class="table table-bordered">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">First Name</th>
              <th scope="col">Last Name</th>
              <th scope="col">Email</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">1</th>
              <td>Cruella</td>
              <td>De Vil</td>
              <td>deVil@furs_r_us.com</td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td>Tom</td>
              <td>Riddle</td>
              <td>i.am.lord@voldemort.com</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Sheev</td>
              <td>Palpatine</td>
              <td>darth@sidious.me</td>
            </tr>
            <tr>
              <th scope="row">4</th>
              <td>Anakin</td>
              <td>Skywalker</td>
              <td>dv@mail.com</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>

And the table-borderless class for a borderless table.

Borderless table

<section class="pt-105 pb-45">
  <div class="container px-xl-0">
    <div class="row justify-content-center">
      <div class="col-xl-8 col-lg-10">
        <table class="table table-borderless">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">First Name</th>
              <th scope="col">Last Name</th>
              <th scope="col">Email</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">1</th>
              <td>Cruella</td>
              <td>De Vil</td>
              <td>deVil@furs_r_us.com</td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td>Tom</td>
              <td>Riddle</td>
              <td>i.am.lord@voldemort.com</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Sheev</td>
              <td>Palpatine</td>
              <td>darth@sidious.me</td>
            </tr>
            <tr>
              <th scope="row">4</th>
              <td>Anakin</td>
              <td>Skywalker</td>
              <td>dv@mail.com</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>

Highlighting Table Rows on Hover

Highlighting Table Rows on Hover

If you add the table-hover class to a table, a row will be highlighted when the user hovers their mouse over it.

<section class="pt-105 pb-45">
  <div class="container px-xl-0">
    <div class="row justify-content-center">
      <div class="col-xl-8 col-lg-10">
        <table class="table table-hover">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">First Name</th>
              <th scope="col">Last Name</th>
              <th scope="col">Email</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">1</th>
              <td>Cruella</td>
              <td>De Vil</td>
              <td>deVil@furs_r_us.com</td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td>Tom</td>
              <td>Riddle</td>
              <td>i.am.lord@voldemort.com</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Sheev</td>
              <td>Palpatine</td>
              <td>darth@sidious.me</td>
            </tr>
            <tr>
              <th scope="row">4</th>
              <td>Anakin</td>
              <td>Skywalker</td>
              <td>dv@mail.com</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>

Adding Captions to Tables

Adding Captions to Tables

You might want to give more information describing the table’s data. You can do this by adding a caption at the bottom of the table as shown above. To add a caption, place your text inside a <caption> tag.

<section class="pt-105 pb-45">
  <div class="container px-xl-0">
    <div class="row justify-content-center">
      <div class="col-xl-8 col-lg-10">
        <table class="table">
          <caption>My Contacts List</caption>
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">First Name</th>
              <th scope="col">Last Name</th>
              <th scope="col">Email</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">1</th>
              <td>Cruella</td>
              <td>De Vil</td>
              <td>deVil@furs_r_us.com</td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td>Tom</td>
              <td>Riddle</td>
              <td>i.am.lord@voldemort.com</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Sheev</td>
              <td>Palpatine</td>
              <td>darth@sidious.me</td>
            </tr>
            <tr>
              <th scope="row">4</th>
              <td>Anakin</td>
              <td>Skywalker</td>
              <td>dv@mail.com</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>

Making Your Table Responsive

Making Your Table Responsive

Responsive tables allow tables to be scrolled horizontally when viewed on smaller sized devices instead of the data being too squeezed (you can see the scrollbar above). You can make a table responsive across all viewports by wrapping it in a div with the table-responsive class. You can also specifically choose a maximum breakpoint with which to have the horizontally scrolled table by using .table-responsive{-sm|-md|-lg|-xl}. Below, we use table-responsive-sm to specify that the horizontally scrolled table should only be activated on small devices.

<section class="pt-105 pb-45">
  <div class="container px-xl-0">
    <div class="row justify-content-center">
      <div class="col-xl-8 col-lg-10">
        <div class="table-responsive-sm">
          <table class="table">
            <thead>
              <tr>
                <th scope="col">#</th>
                <th scope="col">First Name</th>
                <th scope="col">Last Name</th>
                <th scope="col">Email</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">1</th>
                <td>Cruella</td>
                <td>De Vil</td>
                <td>deVil@furs_r_us.com</td>
              </tr>
              <tr>
                <th scope="row">2</th>
                <td>Tom</td>
                <td>Riddle</td>
                <td>i.am.lord@voldemort.com</td>
              </tr>
              <tr>
                <th scope="row">3</th>
                <td>Sheev</td>
                <td>Palpatine</td>
                <td>darth@sidious.me</td>
              </tr>
              <tr>
                <th scope="row">4</th>
                <td>Anakin</td>
                <td>Skywalker</td>
                <td>dv@mail.com</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</section>
Updated on April 6, 2020
Was this article helpful?

Related Articles