1 | <!DOCTYPE html>
|
2 | <html>
|
3 | <head>
|
4 |
|
5 | <meta charset="utf-8" />
|
6 | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
7 | <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
8 | <title>Theming - Semantic</title>
|
9 |
|
10 |
|
11 | <link rel="stylesheet" type="text/css" href="../../dist/components/reset.css">
|
12 | <link rel="stylesheet" type="text/css" href="../../dist/components/site.css">
|
13 | <link rel="stylesheet" type="text/css" href="../../dist/components/grid.css">
|
14 |
|
15 |
|
16 | <link rel="stylesheet" type="text/css" href="../../dist/components/icon.css">
|
17 | <link rel="stylesheet" type="text/css" href="../../dist/components/table.css">
|
18 | <link rel="stylesheet" type="text/css" href="../../dist/components/button.css">
|
19 | <link rel="stylesheet" type="text/css" href="../../dist/components/transition.css">
|
20 | <link rel="stylesheet" type="text/css" href="../../dist/components/popup.css">
|
21 |
|
22 |
|
23 | <script src="../assets/library/jquery.min.js"></script>
|
24 | <script src="../assets/library/iframe-content.js"></script>
|
25 | <script type="text/javascript" src="../../dist/components/popup.js"></script>
|
26 | <script type="text/javascript" src="../../dist/components/transition.js"></script>
|
27 |
|
28 |
|
29 | <script src="../assets/show-examples.js"></script>
|
30 |
|
31 |
|
32 | <style>
|
33 | body {
|
34 | padding: 1em;
|
35 | }
|
36 | .ui.table {
|
37 | table-layout: fixed;
|
38 | }
|
39 | </style>
|
40 |
|
41 |
|
42 | <script>
|
43 | </script>
|
44 | </head>
|
45 |
|
46 | <body>
|
47 |
|
48 | <div class="ui two column relaxed grid">
|
49 | <div class="column">
|
50 | <table class="ui right aligned table">
|
51 | <thead>
|
52 | <th class="left aligned">Person</th>
|
53 | <th>Calories</th>
|
54 | <th>Fat</th>
|
55 | <th>Protein</th>
|
56 | </thead>
|
57 | <tbody>
|
58 | <tr>
|
59 | <td class="left aligned">Delmar</td>
|
60 | <td>36</td>
|
61 | <td>36g</td>
|
62 | <td>2g</td>
|
63 | </tr>
|
64 | <tr>
|
65 | <td class="left aligned">Louise</td>
|
66 | <td>24</td>
|
67 | <td>24g</td>
|
68 | <td>29g</td>
|
69 | </tr>
|
70 | <tr>
|
71 | <td class="left aligned">Terrell</td>
|
72 | <td>22</td>
|
73 | <td>11g</td>
|
74 | <td>9g</td>
|
75 | </tr>
|
76 | <tr>
|
77 | <td class="left aligned">Marion</td>
|
78 | <td>7</td>
|
79 | <td>35g</td>
|
80 | <td>3g</td>
|
81 | </tr>
|
82 | <tr>
|
83 | <td class="left aligned">Clayton</td>
|
84 | <td>7</td>
|
85 | <td>38g</td>
|
86 | <td>20g</td>
|
87 | </tr>
|
88 | </tbody>
|
89 | </table>
|
90 | </div>
|
91 | <div class="column">
|
92 | <table class="ui right aligned celled table">
|
93 | <thead>
|
94 | <th class="left aligned">Person</th>
|
95 | <th>Calories</th>
|
96 | <th>Fat</th>
|
97 | <th>Protein</th>
|
98 | </thead>
|
99 | <tbody>
|
100 | <tr>
|
101 | <td class="left aligned">Drema</td>
|
102 | <td class="positive">15</td>
|
103 | <td class="negative">26g</td>
|
104 | <td class="warning">8g</td>
|
105 | </tr>
|
106 | <tr class="positive">
|
107 | <td class="left aligned">Nona</td>
|
108 | <td>11</td>
|
109 | <td>21g</td>
|
110 | <td>16g</td>
|
111 | </tr>
|
112 | <tr class="negative">
|
113 | <td class="left aligned">Isidra</td>
|
114 | <td>34</td>
|
115 | <td>43g</td>
|
116 | <td>11g</td>
|
117 | </tr>
|
118 | <tr class="warning">
|
119 | <td class="left aligned">Bart</td>
|
120 | <td>41</td>
|
121 | <td>40g</td>
|
122 | <td>30g</td>
|
123 | </tr>
|
124 | <tr class="selected">
|
125 | <td class="left aligned">Nguyet</td>
|
126 | <td>41</td>
|
127 | <td>44g</td>
|
128 | <td>28g</td>
|
129 | </tr>
|
130 | </tbody>
|
131 | </table>
|
132 | </div>
|
133 | <div class="column">
|
134 | <table class="ui basic right aligned table">
|
135 | <thead>
|
136 | <th class="left aligned">Person</th>
|
137 | <th>Calories</th>
|
138 | <th>Fat</th>
|
139 | <th>Protein</th>
|
140 | </thead>
|
141 | <tbody>
|
142 | <tr>
|
143 | <td class="left aligned">Mirna</td>
|
144 | <td>1</td>
|
145 | <td>28g</td>
|
146 | <td>29g</td>
|
147 | </tr>
|
148 | <tr>
|
149 | <td class="left aligned">Fernando</td>
|
150 | <td>38</td>
|
151 | <td>2g</td>
|
152 | <td>48g</td>
|
153 | </tr>
|
154 | <tr>
|
155 | <td class="left aligned">Lisette</td>
|
156 | <td>18</td>
|
157 | <td>9g</td>
|
158 | <td>23g</td>
|
159 | </tr>
|
160 | <tr>
|
161 | <td class="left aligned">Ahmad</td>
|
162 | <td>42</td>
|
163 | <td>26g</td>
|
164 | <td>49g</td>
|
165 | </tr>
|
166 | <tr>
|
167 | <td class="left aligned">Laquanda</td>
|
168 | <td>27</td>
|
169 | <td>27g</td>
|
170 | <td>49g</td>
|
171 | </tr>
|
172 | </tbody>
|
173 | </table>
|
174 | </div>
|
175 | <div class="column">
|
176 | <table class="ui very basic right aligned table">
|
177 | <thead>
|
178 | <th class="left aligned">Person</th>
|
179 | <th>Calories</th>
|
180 | <th>Fat</th>
|
181 | <th>Protein</th>
|
182 | </thead>
|
183 | <tbody>
|
184 | <tr>
|
185 | <td class="left aligned">Drema</td>
|
186 | <td>15</td>
|
187 | <td>26g</td>
|
188 | <td>8g</td>
|
189 | </tr>
|
190 | <tr>
|
191 | <td class="left aligned">Nona</td>
|
192 | <td>11</td>
|
193 | <td>21g</td>
|
194 | <td>16g</td>
|
195 | </tr>
|
196 | <tr>
|
197 | <td class="left aligned">Isidra</td>
|
198 | <td>34</td>
|
199 | <td>43g</td>
|
200 | <td>11g</td>
|
201 | </tr>
|
202 | <tr>
|
203 | <td class="left aligned">Bart</td>
|
204 | <td>41</td>
|
205 | <td>40g</td>
|
206 | <td>30g</td>
|
207 | </tr>
|
208 | <tr>
|
209 | <td class="left aligned">Nguyet</td>
|
210 | <td>41</td>
|
211 | <td>44g</td>
|
212 | <td>28g</td>
|
213 | </tr>
|
214 | </tbody>
|
215 | </table>
|
216 | </div>
|
217 | <div class="column">
|
218 | <table class="ui celled selectable right aligned table">
|
219 | <thead>
|
220 | <th class="left aligned">Person</th>
|
221 | <th>Calories</th>
|
222 | <th>Fat</th>
|
223 | <th>Protein</th>
|
224 | </thead>
|
225 | <tbody>
|
226 | <tr>
|
227 | <td class="left aligned">Tasia</td>
|
228 | <td>12</td>
|
229 | <td>7g</td>
|
230 | <td>21g</td>
|
231 | </tr>
|
232 | <tr>
|
233 | <td class="left aligned">Ronnie</td>
|
234 | <td>38</td>
|
235 | <td>37g</td>
|
236 | <td>38g</td>
|
237 | </tr>
|
238 | <tr>
|
239 | <td class="left aligned">Gabriel</td>
|
240 | <td>30</td>
|
241 | <td>46g</td>
|
242 | <td>46g</td>
|
243 | </tr>
|
244 | <tr>
|
245 | <td class="left aligned">Logan</td>
|
246 | <td>12</td>
|
247 | <td>21g</td>
|
248 | <td>39g</td>
|
249 | </tr>
|
250 | <tr>
|
251 | <td class="left aligned">Clare</td>
|
252 | <td>39</td>
|
253 | <td>41g</td>
|
254 | <td>2g</td>
|
255 | </tr>
|
256 | </tbody>
|
257 | </table>
|
258 | </div>
|
259 | <div class="column">
|
260 | <table class="ui striped right aligned table">
|
261 | <thead>
|
262 | <th class="left aligned">Person</th>
|
263 | <th>Calories</th>
|
264 | <th>Fat</th>
|
265 | <th>Protein</th>
|
266 | </thead>
|
267 | <tbody>
|
268 | <tr>
|
269 | <td class="left aligned">Rosaline</td>
|
270 | <td>5</td>
|
271 | <td>35g</td>
|
272 | <td>6g</td>
|
273 | </tr>
|
274 | <tr>
|
275 | <td class="left aligned">Barrie</td>
|
276 | <td>27</td>
|
277 | <td>23g</td>
|
278 | <td>28g</td>
|
279 | </tr>
|
280 | <tr>
|
281 | <td class="left aligned">Trinidad</td>
|
282 | <td>14</td>
|
283 | <td>50g</td>
|
284 | <td>7g</td>
|
285 | </tr>
|
286 | <tr>
|
287 | <td class="left aligned">Jaqueline</td>
|
288 | <td>31</td>
|
289 | <td>30g</td>
|
290 | <td>50g</td>
|
291 | </tr>
|
292 | <tr>
|
293 | <td class="left aligned">Tamala</td>
|
294 | <td>18</td>
|
295 | <td>6g</td>
|
296 | <td>13g</td>
|
297 | </tr>
|
298 | </tbody>
|
299 | </table>
|
300 | </div>
|
301 | <div class="column">
|
302 | <table class="ui padded celled right aligned table">
|
303 | <thead>
|
304 | <th class="left aligned">Person</th>
|
305 | <th>Calories</th>
|
306 | <th>Fat</th>
|
307 | <th>Protein</th>
|
308 | </thead>
|
309 | <tbody>
|
310 | <tr>
|
311 | <td class="left aligned">Lianne</td>
|
312 | <td>23</td>
|
313 | <td>32g</td>
|
314 | <td>43g</td>
|
315 | </tr>
|
316 | <tr>
|
317 | <td class="left aligned">Joette</td>
|
318 | <td>21</td>
|
319 | <td>13g</td>
|
320 | <td>31g</td>
|
321 | </tr>
|
322 | <tr>
|
323 | <td class="left aligned">Le</td>
|
324 | <td>28</td>
|
325 | <td>39g</td>
|
326 | <td>23g</td>
|
327 | </tr>
|
328 | <tr>
|
329 | <td class="left aligned">Sacha</td>
|
330 | <td>46</td>
|
331 | <td>43g</td>
|
332 | <td>13g</td>
|
333 | </tr>
|
334 | <tr>
|
335 | <td class="left aligned">Bruna</td>
|
336 | <td>9</td>
|
337 | <td>47g</td>
|
338 | <td>12g</td>
|
339 | </tr>
|
340 | </tbody>
|
341 | </table>
|
342 | </div>
|
343 | <div class="column">
|
344 | <table class="ui definition celled right aligned table">
|
345 | <thead>
|
346 | <th></th>
|
347 | <th>Calories</th>
|
348 | <th>Fat</th>
|
349 | <th>Protein</th>
|
350 | </thead>
|
351 | <tbody>
|
352 | <tr>
|
353 | <td class="left aligned">Lianne</td>
|
354 | <td>23</td>
|
355 | <td>32g</td>
|
356 | <td>43g</td>
|
357 | </tr>
|
358 | <tr>
|
359 | <td class="left aligned">Joette</td>
|
360 | <td>21</td>
|
361 | <td>13g</td>
|
362 | <td>31g</td>
|
363 | </tr>
|
364 | <tr>
|
365 | <td class="left aligned">Le</td>
|
366 | <td>28</td>
|
367 | <td>39g</td>
|
368 | <td>23g</td>
|
369 | </tr>
|
370 | <tr>
|
371 | <td class="left aligned">Sacha</td>
|
372 | <td>46</td>
|
373 | <td>43g</td>
|
374 | <td>13g</td>
|
375 | </tr>
|
376 | <tr>
|
377 | <td class="left aligned">Bruna</td>
|
378 | <td>9</td>
|
379 | <td>47g</td>
|
380 | <td>12g</td>
|
381 | </tr>
|
382 | </tbody>
|
383 | </table>
|
384 | </div>
|
385 | <div class="column">
|
386 | <table class="ui inverted right aligned table">
|
387 | <thead>
|
388 | <th class="left aligned">Person</th>
|
389 | <th>Calories</th>
|
390 | <th>Fat</th>
|
391 | <th>Protein</th>
|
392 | </thead>
|
393 | <tbody>
|
394 | <tr>
|
395 | <td class="left aligned">Lianne</td>
|
396 | <td>23</td>
|
397 | <td>32g</td>
|
398 | <td>43g</td>
|
399 | </tr>
|
400 | <tr>
|
401 | <td class="left aligned">Joette</td>
|
402 | <td>21</td>
|
403 | <td>13g</td>
|
404 | <td>31g</td>
|
405 | </tr>
|
406 | <tr>
|
407 | <td class="left aligned">Le</td>
|
408 | <td>28</td>
|
409 | <td>39g</td>
|
410 | <td>23g</td>
|
411 | </tr>
|
412 | <tr>
|
413 | <td class="left aligned">Sacha</td>
|
414 | <td>46</td>
|
415 | <td>43g</td>
|
416 | <td>13g</td>
|
417 | </tr>
|
418 | <tr>
|
419 | <td class="left aligned">Bruna</td>
|
420 | <td>9</td>
|
421 | <td>47g</td>
|
422 | <td>12g</td>
|
423 | </tr>
|
424 | </tbody>
|
425 | </table>
|
426 | </div>
|
427 | <div class="column">
|
428 | <table class="ui inverted blue selectable celled right aligned table">
|
429 | <thead>
|
430 | <th class="left aligned">Person</th>
|
431 | <th>Calories</th>
|
432 | <th>Fat</th>
|
433 | <th>Protein</th>
|
434 | </thead>
|
435 | <tbody>
|
436 | <tr>
|
437 | <td class="left aligned">Lianne</td>
|
438 | <td>23</td>
|
439 | <td>32g</td>
|
440 | <td>43g</td>
|
441 | </tr>
|
442 | <tr>
|
443 | <td class="left aligned">Joette</td>
|
444 | <td>21</td>
|
445 | <td>13g</td>
|
446 | <td>31g</td>
|
447 | </tr>
|
448 | <tr>
|
449 | <td class="left aligned">Le</td>
|
450 | <td>28</td>
|
451 | <td>39g</td>
|
452 | <td>23g</td>
|
453 | </tr>
|
454 | <tr>
|
455 | <td class="left aligned">Sacha</td>
|
456 | <td>46</td>
|
457 | <td>43g</td>
|
458 | <td>13g</td>
|
459 | </tr>
|
460 | <tr>
|
461 | <td class="left aligned">Bruna</td>
|
462 | <td>9</td>
|
463 | <td>47g</td>
|
464 | <td>12g</td>
|
465 | </tr>
|
466 | </tbody>
|
467 | </table>
|
468 | </div>
|
469 |
|
470 | </body>
|
471 | </html> |
\ | No newline at end of file |