Source code of tbs_us_examples_grouping.htm

  1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
 
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>TinyButStrong - Example of grouping sections</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="./tbs_us_examples_styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main-body">
  <h1>Example of grouping sections</h1>
  <div class="w3cinfo"> this TBS template is W3C compliant <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml11" alt="Valid XHTML 1.1" height="31" width="88" style="border:none;" /></a> </div>
  <div id="example">
  
    <p>Parameters <samp>headergrp</samp><samp>footergrp</samp> and <samp>splittergrp</samp> enable you to display Headers, Footers and Splitters of groups. Note: their place in the block acts on the display. </p>
        
    <table style="width: 600px;">
        <tr>
          <td style="background-color:#CFE7CF">&#8226;</td>
          <td colspan="4" style="background-color:#CFE7CF" class="title-section"> [blk_res.country;block=tr;headergrp=country]</td>
          <td class="text-discrete" style="padding-left: 60px;">this is a header on country</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td style="background-color:#FFF5D2">&#8226;</td>
          <td colspan="3" style="background-color:#FFF5D2; text-decoration:underline;">[blk_res.city;block=tr+tr;headergrp=city]</td>
          <td rowspan="2" class="text-discrete" style="padding-left: 60px;">this is a header on city (2 rows)</td>
        </tr>
        <tr class="text-mini">
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td style="background-color:#F0F0F0">&nbsp;</td>
          <td style="background-color:#F0F0F0"><strong><em>Name</em></strong></td>
          <td style="background-color:#F0F0F0"><strong><em>Score</em></strong></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td style="background-color:#F0F0F0">&deg;</td>
          <td style="background-color:#F0F0F0">[blk_res.winner;block=tr]</td>
          <td style="background-color:#F0F0F0">[blk_res.score]</td>
          <td class="text-discrete" style="padding-left: 60px;">this is a normal section</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td style="background-color:#FFFFDF">&rarr; </td>
          <td colspan="3" style="background-color:#FFFFDF"><span class="text-mini">[blk_res.city;block=tr;footergrp=city]</span></td>
          <td class="text-discrete" style="padding-left: 60px;">this is a footer on city</td>
        </tr>
        <tr>
          <td style="background-color:#DDEEDD">&rarr;</td>
          <td colspan="4" style="background-color:#DDEEDD"><span class="text-mini">[blk_res.country;block=tr;footergrp=country]</span></td>
          <td class="text-discrete" style="padding-left: 60px;">this is a footer on country</td>
        </tr>
        <tr>
          <td colspan="5">
            [blk_res;block=tr;splittergrp=country]
            <hr style="background-color:#060; border:solid 1px #090;" />
          </td>
          <td class="text-discrete" style="padding-left: 60px;">this is a splitter on country</td>
        </tr>
    </table>

  </div>
</div>
</body>
</html>