Home
The jQuery Mobile tutorial - Displaying data in tables

Chapter 5

Displaying data in tables

The HTML tables are used to present data in tabular form. They are mainly used by the <table> element, and sometimes through the <div> tag. jQuery Mobile chose to use the <div> element to represent them, allowing to overcome the differences between browsers display.

A table with two columns

To represent data in tabular form in two columns, jQuery Mobile uses a <div> element which has the ui-grid-a CSS class. This class specifies that the table will be in two columns. Array elements, inside this <div>, are represented by <div> elements with CSS classes ui-block-a for the first item, and ui-block-b for the second.

A table with two columns

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <h3> A table with two columns </h3>

    <div class=ui-grid-a>

      <div class=ui-block-a> Element ui-block-a class </div>

      <div class=ui-block-b> Element ui-block-b class </div>

    </div>

  </div>

</div>


</body>

</html>




The <div> elements of ui-block-a and ui-block-b classes were positionned one beside the other in the display. No space between cells of the table is visible, and no border.

Note that if we had used a <table> tag to represent this table, the layout of displayed data would have been almost the same, except the margins between them that vary depending on the browser

An array of several columns

We have already seen that to represent a table in two columns, jQuery Mobile uses a <div> element with ui-grid-a class containing two <div> elements with ui-block-a and ui-block-b classes.

The same principle is in place for three, four or five columns. For example, for a table of three columns, we will create a <div> with ui-grid-b class, which contains three <div> elements with respective classes of ui-block-a, ui-block-b and ui-block -c.

Tables on multiple columns

CSS class of surrounding<div>

Signification

ui-grid-a

Table with two columns corresponding to two <div> with classes ui-block-a and ui-block-b.

ui-grid-b

Table with three columns corresponding to three <div> with classes ui-block-a, ui-block-b and ui-block-c.

ui-grid-c

Table with four columns corresponding to four <div> with classes ui-block-a, ui-block-b, ui-block-c and ui-block-d.

ui-grid-d

Table with five columns corresponding to five <div> with classes ui-block-a, ui-block-b, ui-block-c, ui-block-d and ui-block-e.

For example for a table of four columns:

An array of four columns

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <h3> A table with four columns </h3>

    <div class=ui-grid-c>

      <div class=ui-block-a> Element ui-block-a class </div>

      <div class=ui-block-b> Element ui-block-b class </div>

      <div class=ui-block-c> Element ui-block-c class </div>

      <div class=ui-block-d> Element ui-block-d class </div>

    </div>

  </div>

</div>


</body>

</html>




Several rows in the table

For now, our tables have a single line. How to insert multiple?

jQuery Mobile uses ui-block-a CSS class element to create a new line. Each time an element with this class is found, it is automatically placed on a new line in the table. The other elements of CSS classes ui-block-b, ui-block-c, ui-block-d and ui-block-e start following it, on the same line of the table.

Note that if the element of ui-block-a class is automatically positioned in the first column in the table, the element in the next cell is the one specified in the HTML. This item is not necessarily ui-block-b class, but can be any other class except ui-block-a (otherwise it would be located on a new line).

An array of 2 rows and 3 columns

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <h3> A table with 2 rows and 3 columns </h3>

    <div class=ui-grid-b>

      <div class=ui-block-a>Element 1.1</div>

      <div class=ui-block-b>Element 1.2</div>

      <div class=ui-block-c>Element 1.3</div>

      <div class=ui-block-a>Element 2.1</div>

      <div class=ui-block-b>Element 2.2</div>

      <div class=ui-block-c>Element 2.3</div>

    </div>

  </div>

</div>


</body>

</html>




Suppose we described our table as follows:

An array with two elements on the first line and three on the second

<div class=ui-grid-b>

  <div class=ui-block-a>Element 1.1</div>

  <div class=ui-block-c>Element 1.3</div>

  <div class=ui-block-a>Element 2.1</div>

  <div class=ui-block-b>Element 2.2</div>

  <div class=ui-block-c>Element 2.3</div>

</div>

The element with ui-block-b class is not inserted. The display is now:




We find that the element of ui-block-c class came in second place, and a new row was created as an element of ui-block-a class was encountered.

If we want to insert a blank, for example in second place, it is sufficient to indicate a <div> element containing a non-breaking space (&nbsp;):

An empty cell in the table

<div class=ui-grid-b>

  <div class=ui-block-a>Element 1.1</div>

  <div class=ui-block-b>&nbsp;</div>

  <div class=ui-block-c>Element 1.3</div>

  <div class=ui-block-a>Element 2.1</div>

  <div class=ui-block-b>Element 2.2</div>

  <div class=ui-block-c>Element 2.3</div>

</div>




Insert button in tables

Using tables to display buttons allows to align and size them correctly in the HTML page. Here is an example displaying two buttons on one line:

Two buttons aligned

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <h3> Two buttons aligned </h3>

    <div class=ui-grid-a>

      <div class=ui-block-a>

        <a href=# data-role=button> OK </a></div>

      <div class=ui-block-b>

        <a href=# data-role=button> Remove </a></div>

    </div>

  </div>

</div>


</body>

</html>




The two buttons are aligned and the same size, as they are inserted into cells of equal size.

You can also place icons on the buttons, as we saw in the previous chapter.

Two buttons aligned with their icons

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <h3> Two buttons aligned </h3>

    <div class=ui-grid-a>

      <div class=ui-block-a>

        <a href=# data-role=button data-icon=check> OK </a></div>

      <div class=ui-block-b>

        <a href=# data-role=button data-icon=delete> Remove </a></div>

    </div>

  </div>

</div>


</body>

</html>




Customize tables

Tables use ui-grid-a, grid-ui-b, etc.. CSS classes to define the element that will surround the table, but also the classes ui-block-a, ui-block-b, etc.. to define each cell in the table. By customizing these CSS classes, we can assign different styles to our tables.

An aired and centered table

We will use the height CSS property to indicate a cell height, and text-align property to center the content thereof.

Styling content of table cells

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

  

  <style type=text/css>

    .ui-block-a, .ui-block-b, .ui-block-c {

      height : 50px;

      text-align : center;

    }

  </style>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <h3> An aired and centered table </h3>

    <div class=ui-grid-b>

      <div class=ui-block-a>Elem 1.1</div>

      <div class=ui-block-b>Elem 1.2</div>

      <div class=ui-block-c>Elem 1.3</div>

      <div class=ui-block-a>Elem 2.1</div>

      <div class=ui-block-b>Elem 2.2</div>

      <div class=ui-block-c>Elem 2.3</div>

    </div>

  </div>

</div>


</body>

</html>

This code is similar to the one we had previously written. We just added a few lines of description of the styles associated with the ui-block-a, ui-block-b and ui-block-c classes




Alternating odd and even lines (creating our own styles)

We wish to alternate the style of the odd and even lines of the table, to provide a better presentation. It is done by adding two new CSS classes that we create (named odd and even), and we associate with our odd and even lines.

Styling odd and even lines

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

  

  <style type=text/css>

    .odd {

      background-color : black;

      color : white;

      text-align : center;

      height : 30px;

      padding-top : 5px;

    }

    .even {

      background-color : gray;

      color : white;

      text-align : center;

      height : 30px;

      padding-top : 5px;

    }

  </style>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <h3> A table with alternated rows </h3>

    <div class=ui-grid-b>

      <div class="ui-block-a odd">Elem 1.1</div>

      <div class="ui-block-b odd">Elem 1.2</div>

      <div class="ui-block-c odd">Elem 1.3</div>

      <div class="ui-block-a even">Elem 2.1</div>

      <div class="ui-block-b even">Elem 2.2</div>

      <div class="ui-block-c even">Elem 2.3</div>

      <div class="ui-block-a odd">Elem 3.1</div>

      <div class="ui-block-b odd">Elem 3.2</div>

      <div class="ui-block-c odd">Elem 3.3</div>

      <div class="ui-block-a even">Elem 4.1</div>

      <div class="ui-block-b even">Elem 4.2</div>

      <div class="ui-block-c even">Elem 4.3</div>

      <div class="ui-block-a odd">Elem 5.1</div>

      <div class="ui-block-b odd">Elem 5.2</div>

      <div class="ui-block-c odd">Elem 5.3</div>

    </div>

  </div>

</div>


</body>

</html>




Use styles defined by jQuery Mobile

jQuery Mobile defines CSS classes to customize the cells of tables. These styles correspond to the CSS classes ui-bar-a, ui-bar-b, ui-bar-c, ui-bar-d and ui-bar-e.

Using the classes ui-bar-a, ui-bar-b, etc..

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <h3> A table with alternated rows </h3>

    <div class=ui-grid-b>

      <div class="ui-block-a ui-bar-a">Elem 1.1</div>

      <div class="ui-block-b ui-bar-a">Elem 1.2</div>

      <div class="ui-block-c ui-bar-a">Elem 1.3</div>

      <div class="ui-block-a ui-bar-b">Elem 2.1</div>

      <div class="ui-block-b ui-bar-b">Elem 2.2</div>

      <div class="ui-block-c ui-bar-b">Elem 2.3</div>

      <div class="ui-block-a ui-bar-c">Elem 3.1</div>

      <div class="ui-block-b ui-bar-c">Elem 3.2</div>

      <div class="ui-block-c ui-bar-c">Elem 3.3</div>

      <div class="ui-block-a ui-bar-d">Elem 4.1</div>

      <div class="ui-block-b ui-bar-d">Elem 4.2</div>

      <div class="ui-block-c ui-bar-d">Elem 4.3</div>

      <div class="ui-block-a ui-bar-e">Elem 5.1</div>

      <div class="ui-block-b ui-bar-e">Elem 5.2</div>

      <div class="ui-block-c ui-bar-e">Elem 5.3</div>

    </div>

  </div>

</div>


</body>

</html>




You can mix the styles defined by jQuery Mobile with ours. For example:

Use our styles and those of jQuery Mobile

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

  

  <style type=text/css>

    .ui-block-a, .ui-block-b, .ui-block-c {

      height : 30px;

      text-align : center;

      padding-top : 5px;

    }

  </style>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <h3> A table with alternated rows </h3>

    <div class=ui-grid-b>

      <div class="ui-block-a ui-bar-a">Elem 1.1</div>

      <div class="ui-block-b ui-bar-a">Elem 1.2</div>

      <div class="ui-block-c ui-bar-a">Elem 1.3</div>

      <div class="ui-block-a ui-bar-b">Elem 2.1</div>

      <div class="ui-block-b ui-bar-b">Elem 2.2</div>

      <div class="ui-block-c ui-bar-b">Elem 2.3</div>

      <div class="ui-block-a ui-bar-c">Elem 3.1</div>

      <div class="ui-block-b ui-bar-c">Elem 3.2</div>

      <div class="ui-block-c ui-bar-c">Elem 3.3</div>

      <div class="ui-block-a ui-bar-d">Elem 4.1</div>

      <div class="ui-block-b ui-bar-d">Elem 4.2</div>

      <div class="ui-block-c ui-bar-d">Elem 4.3</div>

      <div class="ui-block-a ui-bar-e">Elem 5.1</div>

      <div class="ui-block-b ui-bar-e">Elem 5.2</div>

      <div class="ui-block-c ui-bar-e">Elem 5.3</div>

      <div class="ui-block-a ui-bar-f">Elem 5.1</div>

      <div class="ui-block-b ui-bar-f">Elem 5.2</div>

      <div class="ui-block-c ui-bar-f">Elem 5.3</div>

    </div>

  </div>

</div>


</body>

</html>




Align the buttons side by side

We saw earlier in this chapter how to insert buttons in the tables on the same line. We wish here to use in addition the possibility to juxtapose the buttons horizontally as we saw in the chapter Displaying buttons. This is done using a <div> element with the attributes data-role="controlgroup" and data-type="horizontal".

Two buttons aligned side by side

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <h3> Two buttons aligned side by side</h3>

    <div class=ui-grid-a data-role=controlgroup data-type=horizontal >

      <div class=ui-block-a style="text-align:right">

        <a href=# data-role=button style="width:140px"> OK </a>

      </div>

      <div class=ui-block-b>

        <a href=# data-role=button style="width:140px"> Remove </a>

      </div>

    </div>

  </div>

</div>


</body>

</html>

As we have previously explained, data-role="controlgroup" and data-type="horizontal" attributes are used to juxtapose the buttons horizontally. However, we also use the text-align:right property for the first cell of the table, so that its content is juxtaposed on the right edge of the cell. Finally the use of width:140px property for each button makes the two buttons have the same width.




The principle is the same for three buttons displayed in the same row of the table. Of course we must take into account the size of the cells that are in this case smaller in size (eg 100 pixels). So the text on the button will be shorter, otherwise jQuery Mobile replaces the text that overflows with "...".

Three buttons aligned side by side

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <h3>  Three buttons aligned side by side </h3>

    <div class=ui-grid-b data-role=controlgroup data-type=horizontal >

      <div class=ui-block-a style="text-align:right">

        <a href=# data-role=button style="width:100px"> Yes </a></div>

      <div class=ui-block-b>

        <a href=# data-role=button style="width:100px"> ??? </a></div>

      <div class=ui-block-c>

        <a href=# data-role=button style="width:100px"> No </a></div>

    </div>

  </div>

</div>


</body>

</html>




Using CSS themes

In addition to customizing the tables we have previously seen, jQuery Mobile allows you to position a CSS theme to the window containing the tables. The contents of the window (so the tables included therein) benefit from the overall CSS theme of the window. Any buttons included on the page will be styled according to the theme.

Set the "a" theme on a window containing a table

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=home data-theme=a>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <h3> A table with 2 rows and 3 columns </h3>

    <div class=ui-grid-b>

      <div class=ui-block-a>Element 1.1</div>

      <div class=ui-block-b>Element 1.2</div>

      <div class=ui-block-c>Element 1.3</div>

      <div class=ui-block-a>Element 2.1</div>

      <div class=ui-block-b>Element 2.2</div>

      <div class=ui-block-c>Element 2.3</div>

    </div>

  </div>

</div>


</body>

</html>





Copyright Eric Sarrion (ericsarrion@gmail.com)