How to display table data in stripes and strokes format in jQuery Mobile ?

Last Updated : 22 Feb, 2022

In this article, we will learn how to display table data in stripes and strokes format. To display table data in stripes and strokes format, set the data-role=”table” and data-mode=”reflow” using the classes table-stripe, table-stroke, ui-responsive.

Reflow mode: The ui-responsive class is used to create responsive tables. The data in responsive tables presented are in two modes, reflow and column toggle. In this session, we will focus on reflow mode.

Reflow mode reformats the table columns at narrow widths such that each row of the table is displayed as a block of data pairs. The tables information with more complex or lengthy data formatting that doesn’t need comparison among rows of data can be presented in reflow mode.

Syntax:

<table data-role=”table” data-mode=”reflow” class=”ui-responsive”>

The classes table-stripe, table-stroke will give the rows of a table zebra stripes effect. The alternating rows will be in two different shades.

CDN link:

<link rel=”stylesheet” href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css”>
<script src=”https://code.jquery.com/jquery-1.11.3.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>

Approach:

Firstly, add the above jQuery and jQuery Mobile CDN links to the script or download them to your local machine.
Create a table tag and set the data-role attribute to “table” and data-mode attribute to “reflow”.
Set the classes of table tag to table-stripe, table-stroke, ui-responsive.
The ui-responsive class will make the table responsive.
The table-stripe and table-stroke give the zebra stripe effect to the table.
Create the column names using the thead tag and the th tag.
The data of the table is added using the body tag.
The rows are created using the tr tag.

Example:

HTML

<html> 
  
<head> 
  <link rel="stylesheet" 
        href= 
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
  <script src= 
"https://code.jquery.com/jquery-1.11.3.min.js"> 
  </script> 
  <script src= 
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> 
  </script> 
    
</head> 
  
<body> 
  <h2 style="color:green">GeeksforGeeks</h2> 
  <strong>Table data in stripes and strokes</strong> 
  <br> 
  <table data-role="table" data-mode="reflow" 
         class="table-stripe table-stroke ui-responsive"> 
  
    <thead> 
      <tr> 
        <th>Course Name</th> 
        <th>Instructor</th> 
        <th>Course fee</th> 
      </tr> 
    </thead> 
  
    <tbody> 
      <tr> 
        <td>D.S.A</td> 
        <td>Mohan</td> 
        <td>4500</td> 
      </tr> 
      <tr> 
        <td>D.B.M.S</td> 
        <td>Rahul</td> 
        <td>2500</td> 
      </tr> 
      <tr> 
        <td>O.S</td> 
        <td>Rohan</td> 
        <td>3500</td> 
      </tr> 
      <tr> 
        <td>C.Networks</td> 
        <td>Sandeep</td> 
        <td>2500</td> 
      </tr> 
    </tbody> 
  </table> 
  
</body> 
</html>