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.

TableForm Header

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

<div id="ui-table-header" data-role="header" data-position="fixed">
  <table>
    <tbody>
      <tr>
        <td style="width:25%" ><a id="ui-back-button" data-role="button">Back</a></td>
        <td style="width:50%"><span class="ui-hdr-title-text">Product Sales Transport</span></td>
        <td style="width: 25%" ><a id="ui-filter-button" data-role="button">Filter</a></td>
      </tr>
    </tbody>
  </table>
</div>

TableForm Content

To create the table view as shown in attached screenshot, a table is used with nine rows, four columns merged accordingly. To create the title for rows as shown in the screenshot use colspan and rowspan for merging rows and columns to form one entity

<table class="ui-tableBorder">
  <tr class="ui-table-row">
    <td style="width: 20%" rowspan="2"></td>
    <td>Quater</td>
    <td colspan="2">2008 Q1 </td>
    <td>20</td>
  </tr>
  <tr class="ui-table-row">
    <td>Subcategory </td>
    <td>units </td>
    <td>sold </td>
    <td>unit </td>
  </tr>
  <tr>
    <td rowspan="7" class="ui-table-row1">Books</td>
    <td class="ui-table-row1">Arts & architecture</td>
    <td colspan="2">39</td>
  </tr>
</table>

Grouped rows-Table Form CSS File

The css for Grouped rows-table application is shown below

Header Style

The css for header text, button and customized button with triangle edge as shown below

#ui-table-header{
	background-image: -webkit-linear-gradient(top, grey 0%, #000 100%);
}
#ui-back-button {
	position: relative;
	width: 40%;
	border: 0px;
	border-right: none;
	background:-webkit-linear-gradient(grey, grey 43%, black 63%, black);
	cursor: pointer;
	font-size: 10px;
	font-weight:bold;
	color:white;
	text-align: center;
	left:35px;
	vertical-align: middle;
	text-overflow:ellipsis;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
	box-shadow: 0 4px 2px -2px grey;
}
#ui-back-button:before {
	position: absolute;
	top: 6px;
	left: -12px;
	width: 20px;
	height: 17px;
	-webkit-transform: rotate(-44deg) skewX(-10deg) skewY(-10deg);
	background: -webkit-linear-gradient(-136deg, grey, grey 40%, black 63%, black);
	content: '';
	z-index: 0;
}
#ui-filter-button {
	position: relative;
	width: 40%;
	border: 0px;
	border-right: none;
	background:-webkit-linear-gradient(grey, grey 43%, black 63%, black);
	cursor: pointer;
	font-size: 10px;
	font-weight:bold;
	color:white;
	text-align: center;
	left:35px;
	vertical-align: middle;
	text-overflow:ellipsis;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
	box-shadow: 0 4px 2px -2px grey;
}
.ui-hdr-title-text {
	text-align: center;
	vertical-align: middle;
	font-size: 20px;
	font-weight: bold;
	color: white;
}

Content Table Style

Following css has been defined for table border, title and column, applying background to the specific rows and merging rows and columns

table {
	width: 100%;
	height: 100%;
}
td{
	font-size: 15px;
}
.ui-table-border {
	border: 1px solid black;
	border-collapse: collapse;
	width: 100%;
}
.ui-table-row{
	background: yellow;
	font-size: 15px;
	font-weight: bold;
}
.ui-table-row1{
	background: grey;
	border-style:none;
	font-size: 15px;
	color: white;

}
.ui-table-border-color{
	border-right-width:1px;
  border-right-style:solid;
  border-right-color:black;
}

Screenshots

Below is the screenshot of the table View