UNPKG

11.5 kBHTMLView Raw
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 <!--- Site CSS -->
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 <!--- Component CSS -->
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 <!--- Component JS -->
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 <!--- Show Names -->
29 <script src="../assets/show-examples.js"></script>
30
31 <!--- Example CSS -->
32 <style>
33 body {
34 padding: 1em;
35 }
36 .ui.table {
37 table-layout: fixed;
38 }
39 </style>
40
41 <!--- Example Javascript -->
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