1<div class="tables"> 2 <h2>Tables</h2> 3 <div class="row"> 4 <div class="col-sm-8 col-md-9"> 5 <p>Striped table</p> 6 <table class="table table-striped"> 7 <thead> 8 <tr> 9 <th>Version</th> 10 <th>Star</th> 11 <th>Year</th> 12 </tr> 13 </thead> 14 <tbody> 15 <tr> 16 <td>12.x</td> 17 <td>Altair</td> 18 <td>2013</td> 19 </tr> 20 <tr> 21 <td>13.x</td> 22 <td>Fomalhaut</td> 23 <td>2014</td> 24 </tr> 25 <tr> 26 <td>14.x</td> 27 <td>Peony</td> 28 <td>2015</td> 29 </tr> 30 <tr> 31 <td>15.x</td> 32 <td>Situla</td> 33 <td>2016</td> 34 </tr> 35 <tr> 36 <td>16.x</td> 37 <td>Tabby's</td> 38 <td>2016</td> 39 </tr> 40 <tr> 41 <td>17.x</td> 42 <td>Zeta Boötis</td> 43 <td>2017</td> 44 </tr> 45 </tbody> 46 </table> 47 </div> 48 49 <div class="col-sm-4 col-md-3"> 50 <div class="input"> 51 <p class="picker" data-selector=".table-striped > tbody > tr:nth-of-type(odd)" data-element="background-color"> 52 <label for="tc-striped-bgcolor-odd">Bg (odd rows):</label> 53 <input id="tc-striped-bgcolor-odd" data-selector=".table-striped > tbody > tr:nth-of-type(odd)" data-element="background-color" data-var="@table-bg-accent" type="text"> 54 <span class="input-group-addon"><i></i></span> 55 </p> 56 <p class="picker" data-selector=".table-striped > tbody > tr:nth-of-type(even)" data-element="background-color"> 57 <label for="tc-striped-bgcolor-even">Bg (even rows):</label> 58 <input id="tc-striped-bgcolor-even" data-selector=".table-striped > tbody > tr:nth-of-type(even)" data-element="background-color" type="text"> 59 <span class="input-group-addon"><i></i></span> 60 </p> 61 <p class="picker" data-selector="table tr" data-element="color"> 62 <label for="tc-table-color">Text color:</label> 63 <input id="tc-table-color" data-selector="table tr" data-element="color" type="text"> 64 <span class="input-group-addon"><i></i></span> 65 </p> 66 </div> 67 </div> 68 </div> 69 70 <div class="row"> 71 <div class="col-sm-8 col-md-9"> 72 <p>Bordered table</p> 73 <table class="table table-bordered"> 74 <thead> 75 <tr> 76 <th class="tb">Site</th> 77 <th class="tb">Name</th> 78 <th class="tb">Purpose</th> 79 </tr> 80 </thead> 81 <tbody> 82 <tr> 83 <td class="tb"><a href="https://tiki.org/">tiki.org</a></td> 84 <td class="tb">{tr}About & News{/tr}</td> 85 <td class="tb">{tr}Information and introduction portal{/tr}</td> 86 </tr> 87 <tr> 88 <td class="tb"><a href="https://doc.tiki.org/">doc.tiki.org</a></td> 89 <td class="tb">{tr}Documentation{/tr}</td> 90 <td class="tb">{tr}How to use Tiki{/tr}</td> 91 </tr> 92 <tr> 93 <td class="tb"><a href="https://dev.tiki.org/">dev.tiki.org</a></td> 94 <td class="tb">{tr}Development{/tr}</td> 95 <td class="tb">{tr}How make Tiki{/tr}</td> 96 </tr> 97 <tr> 98 <td class="tb"><a href="https://tiki.org/Community">tiki.org/Community</a></td> 99 <td class="tb">{tr}Community{/tr}</td> 100 <td class="tb">{tr}Forums and general community information{/tr}</td> 101 </tr> 102 <tr> 103 <td class="tb"><a href="https://themes.tiki.org/">themes.tiki.org</a></td> 104 <td class="tb">{tr}Themes{/tr}</td> 105 <td class="tb">{tr}How make Tiki look pretty{/tr}</td> 106 </tr> 107 </tbody> 108 </table> 109 </div> 110 111 <div class="col-sm-4 col-md-3"> 112 <div class="input"> 113 <p class="picker" data-selector=".table-bordered tr" data-element="background-color"> 114 <label for="tc-bordered-bgcolor">Background:</label> 115 <input id="tc-bordered-bgcolor" data-selector=".table-bordered tr" data-element="background-color" data-var="@table-bg" type="text"> 116 <span class="input-group-addon"><i></i></span> 117 </p> 118 <p> 119 <label for="tc-cells-border">Border:</label> 120 <input id="tc-cells-border" class="nocolor" data-selector=".table-bordered .tb" data-element="border" type="text"> 121 </p> 122 <p> 123 <label for="tc-cells-padding">Padding:</label> 124 <input id="tc-cells-padding" class="nocolor" data-selector=".table > tbody > tr > td" data-element="padding" type="text"> 125 </p> 126 </div> 127 </div> 128 </div> 129</div> 130