TableSubscribe to RSS - Table

Headerless Table Tutorial -HTML5

Headerless Table Tutorial

Overview

This tutorial talks about using headerless tables for the content listing in mobile applications. The headerless table uses fat rows and every row displays multiple variables of an object. Generally, the row identifier is displayed in larger font and other details are displayed in smaller font. 

The sample application demonstrates how the fat rows are designed.

Note: The application is based of jQuery multi page.

Grouped Row Table

Grouped Rows Form

Overview

 

TableForm HTML Page

Grouped Rows is an appplication to display the product sale transport. In this form, buttons in header is customised. Table is created along with all the  categories and sub-categories of the fields and the amount of units that were sold in the product sale.

Tizen UX Conversion Tutorial: Editable Table - Part 1

Overview

This article is part one of a two part series that demostrates the Editable Table UI pattern. Then in part 2, the UI is modified to follow the Tizen UX Guidelines.

TableForm HTML Page

Editable Table is an appplication, where user is allowed to change the table content using selector and checkbox as shown in below screenshot. In this form, theme has been applied to table having different colors for alternative rows.