Table Form

Overview

This article is part two of a two part series that demonstrates the Table Form UI pattern implemented Tizen UX Guidelines using Tizen Web Framework

TableForm HTML Page

TableForm is an application to display all the contents of the Product Analysis. Table is created along with all the fields present in the product analysis.

TableForm Header

In this Application header, table with one row and two columns is used to place header button and title to align horizontally, style has been defined and applied to button and title as shown below

<div data-role="header" data-position="fixed">
  <h1>Product Analysis</h1>
    <div data-role="tabbar">
      <ul>
	<li><a data-role="button">2009Qh</a></li>
	<li><a data-role="button">Atlanta</a></li>
      </ul>
  </div>
</div>

TableForm Content

To create the table view as shown in attached screenshot as shown below , a table is used with multiple rows and four columns as shown below.

<tr>
  <th class="ui-table-column-1"></th>
  <th class="ui-table-column-2">Subcategory</th>
  <th class="ui-table-column-3"><span id="ui-button1">Sales</span></th>
  <th class="ui-table-column-4"></th>
</tr>
<tr>
  <td class="ui-table-column-1">
    <img src="./images/image1.jpg" class="ui-table-thumnail"></img>
  </td>
  <td class="ui-table-column-2">Video Equipment</td>
  <td class="ui-table-column-3">$17,557</td>
  <td class="ui-table-column-4">></td>
</tr>

TableForm CSS File

Content Table Style

Following css has been defined for table border, title and column as show below

table{
  width: 100%;
  height: 100%;
}

table.ui-tableBorder{
  border-collapse:collapse;
}

table.ui-tableBorder td, table.ui-tableBorder th {
  border-bottom:1px solid grey;padding:5px;
}

td{
  height: 100px;
}

.ui-table-column-1{
  width:15%;
}

.ui-table-column-2{
  width:50%;
}

.ui-table-column-3{
  width:20%;
}

.ui-table-column-4{
  width:15%;
  text-align:right;
}

Screenshots

Below is the screenshot of the table View