UNPKG

21.8 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="msapplication-tap-highlight" content="no">
8 <meta name="description" content="Materialize is a modern responsive CSS framework based on Material Design by Google. ">
9 <title>Table - Materialize</title>
10 <!-- Favicons-->
11 <link rel="apple-touch-icon-precomposed" href="images/favicon/apple-touch-icon-152x152.png">
12 <meta name="msapplication-TileColor" content="#FFFFFF">
13 <meta name="msapplication-TileImage" content="images/favicon/mstile-144x144.png">
14 <link rel="icon" href="images/favicon/favicon-32x32.png" sizes="32x32">
15 <!-- Android 5 Chrome Color-->
16 <meta name="theme-color" content="#EE6E73">
17 <!-- CSS-->
18 <link href="css/prism.css" rel="stylesheet">
19 <link href="css/ghpages-materialize.css" type="text/css" rel="stylesheet" media="screen,projection">
20 <link href="http://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css">
21 <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
22 <script>
23 window.liveSettings = {
24 api_key: "a0b49b34b93844c38eaee15690d86413",
25 picker: "bottom-right",
26 detectlang: true,
27 dynamic: true,
28 autocollect: true
29 };
30 </script>
31 <script src="//cdn.transifex.com/live.js"></script>
32 </head>
33 <body>
34 <header>
35 <nav class="top-nav">
36 <div class="container">
37 <div class="nav-wrapper"><a class="page-title">Table</a></div>
38 </div>
39 </nav>
40 <div class="container"><a href="#" data-activates="nav-mobile" class="button-collapse top-nav full hide-on-large-only"><i class="material-icons">menu</i></a></div>
41 <ul id="nav-mobile" class="side-nav fixed">
42 <li class="logo"><a id="logo-container" href="http://materializecss.com/" class="brand-logo">
43 <object id="front-page-logo" type="image/svg+xml" data="res/materialize.svg">Your browser does not support SVG</object></a></li>
44 <li class="search">
45 <div class="search-wrapper card">
46 <input id="search"><i class="material-icons">search</i>
47 <div class="search-results"></div>
48 </div>
49 </li>
50 <li class="bold"><a href="about.html" class="waves-effect waves-teal">About</a></li>
51 <li class="bold"><a href="getting-started.html" class="waves-effect waves-teal">Getting Started</a></li>
52 <li class="no-padding">
53 <ul class="collapsible collapsible-accordion">
54 <li class="bold"><a class="collapsible-header active waves-effect waves-teal">CSS</a>
55 <div class="collapsible-body">
56 <ul>
57 <li><a href="color.html">Color</a></li>
58 <li><a href="grid.html">Grid</a></li>
59 <li><a href="helpers.html">Helpers</a></li>
60 <li><a href="media-css.html">Media</a></li>
61 <li><a href="sass.html">Sass</a></li>
62 <li><a href="shadow.html">Shadow</a></li>
63 <li class="active"><a href="table.html">Table</a></li>
64 <li><a href="css-transitions.html">Transitions</a></li>
65 <li><a href="typography.html">Typography</a></li>
66 </ul>
67 </div>
68 </li>
69 <li class="bold"><a class="collapsible-header waves-effect waves-teal">Components</a>
70 <div class="collapsible-body">
71 <ul>
72 <li><a href="badges.html">Badges</a></li>
73 <li><a href="buttons.html">Buttons</a></li>
74 <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
75 <li><a href="cards.html">Cards</a></li>
76 <li><a href="chips.html">Chips</a></li>
77 <li><a href="collections.html">Collections</a></li>
78 <li><a href="footer.html">Footer</a></li>
79 <li><a href="forms.html">Forms</a></li>
80 <li><a href="icons.html">Icons</a></li>
81 <li><a href="navbar.html">Navbar</a></li>
82 <li><a href="pagination.html">Pagination</a></li>
83 <li><a href="preloader.html">Preloader</a></li>
84 </ul>
85 </div>
86 </li>
87 <li class="bold"><a class="collapsible-header waves-effect waves-teal">JavaScript</a>
88 <div class="collapsible-body">
89 <ul>
90 <li><a href="carousel.html">Carousel</a></li>
91 <li><a href="collapsible.html">Collapsible</a></li>
92 <li><a href="dialogs.html">Dialogs</a></li>
93 <li><a href="dropdown.html">Dropdown</a></li>
94 <li><a href="media.html">Media</a></li>
95 <li><a href="modals.html">Modals</a></li>
96 <li><a href="parallax.html">Parallax</a></li>
97 <li><a href="pushpin.html">Pushpin</a></li>
98 <li><a href="scrollfire.html">ScrollFire</a></li>
99 <li><a href="scrollspy.html">Scrollspy</a></li>
100 <li><a href="side-nav.html">SideNav</a></li>
101 <li><a href="tabs.html">Tabs</a></li>
102 <li><a href="transitions.html">Transitions</a></li>
103 <li><a href="waves.html">Waves</a></li>
104 </ul>
105 </div>
106 </li>
107 </ul>
108 </li>
109 <li class="bold"><a href="http://materializecss.com/mobile.html" class="waves-effect waves-teal">Mobile</a></li>
110 <li class="bold"><a href="showcase.html" class="waves-effect waves-teal">Showcase</a></li>
111 </ul>
112 </header>
113 <main><div class="container">
114 <div class="row">
115
116 <div class="col s12 m9 l10">
117
118 <!-- Tables Section-->
119 <div id="tables" class="section scrollspy">
120 <p class="caption">Tables are a nice way to organize a lot of data. We provide a few utility classes to help you style your table as easily as possible. In addition, to improve mobile experience, all tables on mobile-screen widths are centered automatically.</p>
121 <h2 class="header">Borderless Table</h2>
122 <div class="row">
123 <div class="col s12">
124 <p>Tables are borderless by default.</p>
125 <table>
126 <thead>
127 <tr>
128 <th data-field="id">Name</th>
129 <th data-field="name">Item Name</th>
130 <th data-field="price">Item Price</th>
131 </tr>
132 </thead>
133
134 <tbody>
135 <tr>
136 <td>Alvin</td>
137 <td>Eclair</td>
138 <td>$0.87</td>
139 </tr>
140 <tr>
141 <td>Alan</td>
142 <td>Jellybean</td>
143 <td>$3.76</td>
144 </tr>
145 <tr>
146 <td>Jonathan</td>
147 <td>Lollipop</td>
148 <td>$7.00</td>
149 </tr>
150 <tr>
151 <td>Shannon</td>
152 <td>KitKat</td>
153 <td>$9.99</td>
154 </tr>
155 </tbody>
156
157 </table>
158 </div>
159 <div class="col s12">
160 <pre><code class="language-markup">
161 &lt;table>
162 &lt;thead>
163 &lt;tr>
164 &lt;th data-field="id">Name&lt;/th>
165 &lt;th data-field="name">Item Name&lt;/th>
166 &lt;th data-field="price">Item Price&lt;/th>
167 &lt;/tr>
168 &lt;/thead>
169
170 &lt;tbody>
171 &lt;tr>
172 &lt;td>Alvin&lt;/td>
173 &lt;td>Eclair&lt;/td>
174 &lt;td>$0.87&lt;/td>
175 &lt;/tr>
176 &lt;tr>
177 &lt;td>Alan&lt;/td>
178 &lt;td>Jellybean&lt;/td>
179 &lt;td>$3.76&lt;/td>
180 &lt;/tr>
181 &lt;tr>
182 &lt;td>Jonathan&lt;/td>
183 &lt;td>Lollipop&lt;/td>
184 &lt;td>$7.00&lt;/td>
185 &lt;/tr>
186 &lt;/tbody>
187 &lt;/table>
188 </code></pre>
189 </div>
190 </div>
191 </div>
192
193 <div id="bordered" class="section scrollspy">
194 <h2 class="header">Bordered Table</h2>
195 <div class="row">
196 <div class="col s12">
197 <p>Add <code class="language-markup">class="bordered"</code> to the table tag for a bordered table</p>
198 <table class="bordered">
199 <thead>
200 <tr>
201 <th data-field="id">Name</th>
202 <th data-field="name">Item Name</th>
203 <th data-field="price">Item Price</th>
204 </tr>
205 </thead>
206 <tbody>
207 <tr>
208 <td>Alvin</td>
209 <td>Eclair</td>
210 <td>$0.87</td>
211 </tr>
212 <tr>
213 <td>Alan</td>
214 <td>Jellybean</td>
215 <td>$3.76</td>
216 </tr>
217 <tr>
218 <td>Jonathan</td>
219 <td>Lollipop</td>
220 <td>$7.00</td>
221 </tr>
222 <tr>
223 <td>Shannon</td>
224 <td>KitKat</td>
225 <td>$9.99</td>
226 </tr>
227 </tbody>
228 </table>
229 </div>
230 </div>
231 </div>
232
233 <div id="striped" class="section scrollspy">
234 <h2 class="header">Striped Table</h2>
235 <div class="row">
236 <div class="col s12">
237 <p>Add <code class="language-markup">class="striped"</code> to the table tag for a striped table</p>
238 <table class="striped">
239 <thead>
240 <tr>
241 <th data-field="id">Name</th>
242 <th data-field="name">Item Name</th>
243 <th data-field="price">Item Price</th>
244 </tr>
245 </thead>
246 <tbody>
247 <tr>
248 <td>Alvin</td>
249 <td>Eclair</td>
250 <td>$0.87</td>
251 </tr>
252 <tr>
253 <td>Alan</td>
254 <td>Jellybean</td>
255 <td>$3.76</td>
256 </tr>
257 <tr>
258 <td>Jonathan</td>
259 <td>Lollipop</td>
260 <td>$7.00</td>
261 </tr>
262 <tr>
263 <td>Shannon</td>
264 <td>KitKat</td>
265 <td>$9.99</td>
266 </tr>
267 </tbody>
268 </table>
269 </div>
270 </div>
271 </div>
272
273 <div id="highlight" class="section scrollspy">
274 <h2 class="header">Highlight Table</h2>
275 <div class="row">
276 <div class="col s12">
277 <p>Add <code class="language-markup">class="highlight"</code> to the table tag for a highlight table</p>
278 <table class="highlight">
279 <thead>
280 <tr>
281 <th data-field="id">Name</th>
282 <th data-field="name">Item Name</th>
283 <th data-field="price">Item Price</th>
284 </tr>
285 </thead>
286 <tbody>
287 <tr>
288 <td>Alvin</td>
289 <td>Eclair</td>
290 <td>$0.87</td>
291 </tr>
292 <tr>
293 <td>Alan</td>
294 <td>Jellybean</td>
295 <td>$3.76</td>
296 </tr>
297 <tr>
298 <td>Jonathan</td>
299 <td>Lollipop</td>
300 <td>$7.00</td>
301 </tr>
302 <tr>
303 <td>Shannon</td>
304 <td>KitKat</td>
305 <td>$9.99</td>
306 </tr>
307 </tbody>
308 </table>
309 </div>
310 </div>
311 </div>
312
313 <div id="centered" class="section scrollspy">
314 <h2 class="header">Centered Table</h2>
315 <div class="row">
316 <div class="col s12">
317 <p>Add <code class="language-markup">class="centered"</code> to the table tag to center align all the text in the table</p>
318 <table class="centered">
319 <thead>
320 <tr>
321 <th data-field="id">Name</th>
322 <th data-field="name">Item Name</th>
323 <th data-field="price">Item Price</th>
324 </tr>
325 </thead>
326 <tbody>
327 <tr>
328 <td>Alvin</td>
329 <td>Eclair</td>
330 <td>$0.87</td>
331 </tr>
332 <tr>
333 <td>Alan</td>
334 <td>Jellybean</td>
335 <td>$3.76</td>
336 </tr>
337 <tr>
338 <td>Jonathan</td>
339 <td>Lollipop</td>
340 <td>$7.00</td>
341 </tr>
342 <tr>
343 <td>Shannon</td>
344 <td>KitKat</td>
345 <td>$9.99</td>
346 </tr>
347 </tbody>
348 </table>
349 </div>
350 </div>
351
352 </div>
353
354 <div id="responsive" class="section scrollspy">
355 <h2 class="header">Responsive Table</h2>
356 <div class="row">
357 <div class="col s12">
358 <p>Add <code class="language-markup">class="responsive-table"</code> to the table tag to make the table horizontally scrollable on smaller screen widths.</p>
359 <table class="responsive-table">
360 <thead>
361 <tr>
362 <th data-field="id">Name</th>
363 <th data-field="name">Item Name</th>
364 <th data-field="price">Item Price</th>
365 </tr>
366 </thead>
367 <tbody>
368 <tr>
369 <td>Alvin</td>
370 <td>Eclair</td>
371 <td>$0.87</td>
372 </tr>
373 <tr>
374 <td>Alan</td>
375 <td>Jellybean</td>
376 <td>$3.76</td>
377 </tr>
378 <tr>
379 <td>Jonathan</td>
380 <td>Lollipop</td>
381 <td>$7.00</td>
382 </tr>
383 <tr>
384 <td>Shannon</td>
385 <td>KitKat</td>
386 <td>$9.99</td>
387 </tr>
388 </tbody>
389 </table>
390 </div>
391 </div>
392
393 </div>
394
395
396 </div><!-- End Tables Section -->
397
398 <div class="col hide-on-small-only m3 l2">
399 <div class="toc-wrapper">
400 <div class="buysellads hide-on-small-only">
401 <!-- CarbonAds Zone Code -->
402 <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss" id="_carbonads_js"></script>
403 </div>
404 <div style="height: 1px;">
405 <ul class="section table-of-contents">
406 <li><a href="#tables">Borderless</a></li>
407 <li><a href="#bordered">Bordered</a></li>
408 <li><a href="#striped">Striped</a></li>
409 <li><a href="#highlight">Highlight</a></li>
410 <li><a href="#centered">Centered</a></li>
411 <li><a href="#responsive">Responsive</a></li>
412 </ul>
413 </div>
414 </div>
415 </div>
416
417 </div>
418</div>
419
420
421 </main> <footer class="page-footer">
422 <div class="container">
423 <div class="row">
424 <div class="col l4 s12">
425 <h5 class="white-text">Help Materialize Grow</h5>
426 <p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p>
427 <form id="paypal-donate" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
428<input type="hidden" name="cmd" value="_s-xclick">
429<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
430">
431<button class="btn waves-effect waves-light red lighten-3" type="submit" name="action" alt="PayPal - The safer, easier way to pay online!">Donate Now
432</button>
433</form>
434
435 </div>
436 <div class="col l4 s12">
437 <h5 class="white-text">Join the Discussion</h5>
438 <p class="grey-text text-lighten-4">We have a Gitter chat room set up where you can talk directly with us. Come in and discuss new features, future goals, general problems or questions, or anything else you can think of.</p>
439 <a class="btn waves-effect waves-light red lighten-3" target="_blank" href="https://gitter.im/Dogfalo/materialize">Chat</a>
440 </div>
441 <div class="col l4 s12" style="overflow: hidden;">
442 <h5 class="white-text">Connect</h5>
443 <iframe src="http://ghbtns.com/github-btn.html?user=dogfalo&repo=materialize&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
444 <br>
445 <a href="https://twitter.com/MaterializeCSS" class="twitter-follow-button" data-show-count="true" data-size="large" data-dnt="true">Follow @MaterializeCSS</a>
446 <br>
447 <div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/108619793845925798422" data-rel="publisher"></div>
448 </div>
449 </div>
450 </div>
451 <div class="footer-copyright">
452 <div class="container">
453 © 2014-2017 Materialize, All rights reserved.
454 <a class="grey-text text-lighten-4 right" href="https://github.com/Dogfalo/materialize/blob/master/LICENSE">MIT License</a>
455 </div>
456 </div>
457 </footer>
458
459 <!-- Scripts-->
460 <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
461 <script>if (!window.jQuery) { document.write('<script src="bin/jquery-2.1.1.min.js"><\/script>'); }
462 </script>
463 <script src="js/jquery.timeago.min.js"></script>
464 <script src="js/prism.js"></script>
465 <script src="jade/lunr.min.js"></script>
466 <script src="jade/search.js"></script>
467 <script src="bin/materialize.js"></script>
468 <script src="js/init.js"></script>
469 <!-- Twitter Button -->
470 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
471
472 <!-- Google Plus Button-->
473 <script src="https://apis.google.com/js/platform.js" async defer></script>
474
475 <!-- Google Analytics -->
476 <script>
477 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
478 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
479 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
480 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
481
482 ga('create', 'UA-56218128-1', 'auto');
483 ga('require', 'displayfeatures');
484 ga('send', 'pageview');
485 </script>
486
487 </body>
488</html>
\No newline at end of file