How to create Responsive Table [Striped, Bordered, Condesed, Hover ...

What Will I Learn?

You will learn How to create table using bootstrap
You will learn how to modify table to striped, bordered, hover and condesed
You will learn how to create responsive table in every device`

Requirements

You have basic about HTML
You have basic about CSS
You have basic about JavaScript
You should Install or host the bootstrap file. If you don't want do that, you can add the bootstrap CDN.
Text Editor and a Browser

Difficulty

Basic

Tutorial Contents

Table is a component that can not be separated from webdesign. It is an important element that is often used. To make it easy for web developers, Bootstrap provides several style classes for creating tables. By using bootstrap, you easily create responsive table and modify it to any kind style such as Striped, Bordered and Condesed Table. For more detail how to create it easily, Lets pay attention steps bellow :

Open your Text Editor Software [in this tutorial I use visual studio code]
Create new file and save as html extention. For ex table.html
As we know for using bootstrap we should use HTML5 Doctype. Add the HTML5 element on your file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Table</title>
</head>
<body>
</body>
</html>

For using bootstrap framework we should install or host bootstrap file first. If we don't want to do that, you can also add Bootstrap CDN as a replacement. You can visit bootstrap official website to get it. add and put it in <head> element

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

After adding all element above, Now we can start to create the table.
To crete the table, we use <table> tag as usual but for style, bootstrap has provided some class. it it .table. With using this class you didn't need add more csss.

<table class="table">
</table>

Create the header table as usual using <thead> tag, Then add some row using <tr> and colums using <th> tag.

<thead>
      <tr>
        <th>Username</th>
        <th>Email</th>
        <th>Address</th>
      </tr>
    </thead>

Create the body content of the table using <tbody> element, then add row using <tr> and colums using <td> as usual. like this:

<tbody>
      <tr>
        <td>lapulga</td>
        <td>lapulga@gmail.com</td>
        <td>parang sikureng</td>
      </tr>
</tbody>

Add more rows in table body content as you want
Save and run file on your browser
We just created the basic style table using bootstrap. Now lets modify table to Stripped. Stripped table is the table with rows in zebra color style. To create stripped table you just shuold add .table-striped class in <table> tag like this:

<table class="table table-striped">

Save and try to run, then see the different
To create bordered table, add the .table-bordered class in <table> tag like this:

<table class="table table-bordered">

Bordered and stripped table are already created, Now we will create condesed table. Condesed table is a table more compact by cutting cell padding in half. To create it we just need add .table-condensed class in <table> tag like this:

<table class="table table-condensed">

Now is hover table. Hover table is a table with hover effect (grey background color) on table rows. To create it just add .table-hover like this:

 <table class="table table-hover">

Run the file and try to put your mouse pointer on the row you will see the row background is grey
The last how to combine two or more style table, for example we will combine stripped and bordered table. just add the both classes respectively. Like this :

<table class="table table-striped table-bordered">

To make your table responsive in all device you must add .table-responsive class. The table will then scroll horizontally on small devices (under 768px).

<table class="table table-responsive">

Finish. For the full code you can copy bellow :

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Table</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Table Example</h2>         
  <table class="table">
    <thead>
      <tr>
        <th>Username</th>
        <th>Email</th>
        <th>Address</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>lapulga</td>
        <td>lapulga@gmail.com</td>
        <td>parang sikureng</td>
      </tr>
      <tr>
        <td>sogata</td>
        <td>sogata@aceh.co</td>
        <td>merua wek sen</td>
      </tr>
      <tr>
        <td>atan26</td>
        <td>atan@yahoo.co.id</td>
        <td>Bu meayon</td>
      </tr>
    </tbody>
  </table>
  <h2>Table Stripped</h2>         
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Username</th>
        <th>Email</th>
        <th>Address</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>lapulga</td>
        <td>lapulga@gmail.com</td>
        <td>parang sikureng</td>
      </tr>
      <tr>
        <td>sogata</td>
        <td>sogata@aceh.co</td>
        <td>merua wek sen</td>
      </tr>
      <tr>
        <td>atan26</td>
        <td>atan@yahoo.co.id</td>
        <td>Bu meayon</td>
      </tr>
    </tbody>
  </table>
  <h2>Table Bordered</h2>         
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Username</th>
        <th>Email</th>
        <th>Address</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>lapulga</td>
        <td>lapulga@gmail.com</td>
        <td>parang sikureng</td>
      </tr>
      <tr>
        <td>sogata</td>
        <td>sogata@aceh.co</td>
        <td>merua wek sen</td>
      </tr>
      <tr>
        <td>atan26</td>
        <td>atan@yahoo.co.id</td>
        <td>Bu meayon</td>
      </tr>
    </tbody>
  </table>
  <h2>Table Condesed</h2>         
  <table class="table table-condensed">
    <thead>
      <tr>
        <th>Username</th>
        <th>Email</th>
        <th>Address</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>lapulga</td>
        <td>lapulga@gmail.com</td>
        <td>parang sikureng</td>
      </tr>
      <tr>
        <td>sogata</td>
        <td>sogata@aceh.co</td>
        <td>merua wek sen</td>
      </tr>
      <tr>
        <td>atan26</td>
        <td>atan@yahoo.co.id</td>
        <td>Bu meayon</td>
      </tr>
    </tbody>
  </table>
  <h2>Table Hover</h2>         
  <table class="table table-hover">
    <thead>
      <tr>
        <th>Username</th>
        <th>Email</th>
        <th>Address</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>lapulga</td>
        <td>lapulga@gmail.com</td>
        <td>parang sikureng</td>
      </tr>
      <tr>
        <td>sogata</td>
        <td>sogata@aceh.co</td>
        <td>merua wek sen</td>
      </tr>
      <tr>
        <td>atan26</td>
        <td>atan@yahoo.co.id</td>
        <td>Bu meayon</td>
      </tr>
    </tbody>
  </table>
  <h2>Table Striped and bordered</h2>         
  <table class="table table-striped table-bordered">
    <thead>
      <tr>
        <th>Username</th>
        <th>Email</th>
        <th>Address</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>lapulga</td>
        <td>lapulga@gmail.com</td>
        <td>parang sikureng</td>
      </tr>
      <tr>
        <td>sogata</td>
        <td>sogata@aceh.co</td>
        <td>merua wek sen</td>
      </tr>
      <tr>
        <td>atan26</td>
        <td>atan@yahoo.co.id</td>
        <td>Bu meayon</td>
      </tr>
    </tbody>
  </table>
</div>
</body>
</html>

LIVE DEMO

Curriculum

Posted on Utopian.io - Rewarding Open Source Contributors

How to create Responsive Table [Striped, Bordered, Condesed, Hover Table] Using Bootstrap