UNPKG

21.7 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="mdi-navigation-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="typography.html">Typography</a></li>
65 </ul>
66 </div>
67 </li>
68 <li class="bold"><a class="collapsible-header waves-effect waves-teal">Components</a>
69 <div class="collapsible-body">
70 <ul>
71 <li><a href="badges.html">Badges</a></li>
72 <li><a href="buttons.html">Buttons</a></li>
73 <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
74 <li><a href="cards.html">Cards</a></li>
75 <li><a href="chips.html">Chips</a></li>
76 <li><a href="collections.html">Collections</a></li>
77 <li><a href="footer.html">Footer</a></li>
78 <li><a href="forms.html">Forms</a></li>
79 <li><a href="icons.html">Icons</a></li>
80 <li><a href="navbar.html">Navbar</a></li>
81 <li><a href="pagination.html">Pagination</a></li>
82 <li><a href="preloader.html">Preloader</a></li>
83 </ul>
84 </div>
85 </li>
86 <li class="bold"><a class="collapsible-header waves-effect waves-teal">JavaScript</a>
87 <div class="collapsible-body">
88 <ul>
89 <li><a href="collapsible.html">Collapsible</a></li>
90 <li><a href="dialogs.html">Dialogs</a></li>
91 <li><a href="dropdown.html">Dropdown</a></li>
92 <li><a href="media.html">Media</a></li>
93 <li><a href="modals.html">Modals</a></li>
94 <li><a href="parallax.html">Parallax</a></li>
95 <li><a href="pushpin.html">Pushpin</a></li>
96 <li><a href="scrollfire.html">ScrollFire</a></li>
97 <li><a href="scrollspy.html">Scrollspy</a></li>
98 <li><a href="side-nav.html">SideNav</a></li>
99 <li><a href="tabs.html">Tabs</a></li>
100 <li><a href="transitions.html">Transitions</a></li>
101 <li><a href="waves.html">Waves</a></li>
102 </ul>
103 </div>
104 </li>
105 </ul>
106 </li>
107 <li class="bold"><a href="http://materializecss.com/mobile.html" class="waves-effect waves-teal">Mobile</a></li>
108 <li class="bold"><a href="showcase.html" class="waves-effect waves-teal">Showcase</a></li>
109 </ul>
110 </header>
111 <main><div class="container">
112 <div class="row">
113
114 <div class="col s12 m9 l10">
115
116 <!-- Tables Section-->
117 <div id="tables" class="section scrollspy">
118 <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>
119 <h2 class="header">Borderless Table</h2>
120 <div class="row">
121 <div class="col s12">
122 <p>Tables are borderless by default.</p>
123 <table>
124 <thead>
125 <tr>
126 <th data-field="id">Name</th>
127 <th data-field="name">Item Name</th>
128 <th data-field="price">Item Price</th>
129 </tr>
130 </thead>
131
132 <tbody>
133 <tr>
134 <td>Alvin</td>
135 <td>Eclair</td>
136 <td>$0.87</td>
137 </tr>
138 <tr>
139 <td>Alan</td>
140 <td>Jellybean</td>
141 <td>$3.76</td>
142 </tr>
143 <tr>
144 <td>Jonathan</td>
145 <td>Lollipop</td>
146 <td>$7.00</td>
147 </tr>
148 <tr>
149 <td>Shannon</td>
150 <td>KitKat</td>
151 <td>$9.99</td>
152 </tr>
153 </tbody>
154
155 </table>
156 </div>
157 <div class="col s12">
158 <pre><code class="language-markup">
159 &lt;table>
160 &lt;thead>
161 &lt;tr>
162 &lt;th data-field="id">Name&lt;/th>
163 &lt;th data-field="name">Item Name&lt;/th>
164 &lt;th data-field="price">Item Price&lt;/th>
165 &lt;/tr>
166 &lt;/thead>
167
168 &lt;tbody>
169 &lt;tr>
170 &lt;td>Alvin&lt;/td>
171 &lt;td>Eclair&lt;/td>
172 &lt;td>$0.87&lt;/td>
173 &lt;/tr>
174 &lt;tr>
175 &lt;td>Alan&lt;/td>
176 &lt;td>Jellybean&lt;/td>
177 &lt;td>$3.76&lt;/td>
178 &lt;/tr>
179 &lt;tr>
180 &lt;td>Jonathan&lt;/td>
181 &lt;td>Lollipop&lt;/td>
182 &lt;td>$7.00&lt;/td>
183 &lt;/tr>
184 &lt;/tbody>
185 &lt;/table>
186 </code></pre>
187 </div>
188 </div>
189 </div>
190
191 <div id="bordered" class="section scrollspy">
192 <h2 class="header">Bordered Table</h2>
193 <div class="row">
194 <div class="col s12">
195 <p>Add <code class="language-markup">class="bordered"</code> to the table tag for a bordered table</p>
196 <table class="bordered">
197 <thead>
198 <tr>
199 <th data-field="id">Name</th>
200 <th data-field="name">Item Name</th>
201 <th data-field="price">Item Price</th>
202 </tr>
203 </thead>
204 <tbody>
205 <tr>
206 <td>Alvin</td>
207 <td>Eclair</td>
208 <td>$0.87</td>
209 </tr>
210 <tr>
211 <td>Alan</td>
212 <td>Jellybean</td>
213 <td>$3.76</td>
214 </tr>
215 <tr>
216 <td>Jonathan</td>
217 <td>Lollipop</td>
218 <td>$7.00</td>
219 </tr>
220 <tr>
221 <td>Shannon</td>
222 <td>KitKat</td>
223 <td>$9.99</td>
224 </tr>
225 </tbody>
226 </table>
227 </div>
228 </div>
229 </div>
230
231 <div id="striped" class="section scrollspy">
232 <h2 class="header">Striped Table</h2>
233 <div class="row">
234 <div class="col s12">
235 <p>Add <code class="language-markup">class="striped"</code> to the table tag for a striped table</p>
236 <table class="striped">
237 <thead>
238 <tr>
239 <th data-field="id">Name</th>
240 <th data-field="name">Item Name</th>
241 <th data-field="price">Item Price</th>
242 </tr>
243 </thead>
244 <tbody>
245 <tr>
246 <td>Alvin</td>
247 <td>Eclair</td>
248 <td>$0.87</td>
249 </tr>
250 <tr>
251 <td>Alan</td>
252 <td>Jellybean</td>
253 <td>$3.76</td>
254 </tr>
255 <tr>
256 <td>Jonathan</td>
257 <td>Lollipop</td>
258 <td>$7.00</td>
259 </tr>
260 <tr>
261 <td>Shannon</td>
262 <td>KitKat</td>
263 <td>$9.99</td>
264 </tr>
265 </tbody>
266 </table>
267 </div>
268 </div>
269 </div>
270
271 <div id="highlight" class="section scrollspy">
272 <h2 class="header">Highlight Table</h2>
273 <div class="row">
274 <div class="col s12">
275 <p>Add <code class="language-markup">class="highlight"</code> to the table tag for a highlight table</p>
276 <table class="highlight">
277 <thead>
278 <tr>
279 <th data-field="id">Name</th>
280 <th data-field="name">Item Name</th>
281 <th data-field="price">Item Price</th>
282 </tr>
283 </thead>
284 <tbody>
285 <tr>
286 <td>Alvin</td>
287 <td>Eclair</td>
288 <td>$0.87</td>
289 </tr>
290 <tr>
291 <td>Alan</td>
292 <td>Jellybean</td>
293 <td>$3.76</td>
294 </tr>
295 <tr>
296 <td>Jonathan</td>
297 <td>Lollipop</td>
298 <td>$7.00</td>
299 </tr>
300 <tr>
301 <td>Shannon</td>
302 <td>KitKat</td>
303 <td>$9.99</td>
304 </tr>
305 </tbody>
306 </table>
307 </div>
308 </div>
309 </div>
310
311 <div id="centered" class="section scrollspy">
312 <h2 class="header">Centered Table</h2>
313 <div class="row">
314 <div class="col s12">
315 <p>Add <code class="language-markup">class="centered"</code> to the table tag to center align all the text in the table</p>
316 <table class="centered">
317 <thead>
318 <tr>
319 <th data-field="id">Name</th>
320 <th data-field="name">Item Name</th>
321 <th data-field="price">Item Price</th>
322 </tr>
323 </thead>
324 <tbody>
325 <tr>
326 <td>Alvin</td>
327 <td>Eclair</td>
328 <td>$0.87</td>
329 </tr>
330 <tr>
331 <td>Alan</td>
332 <td>Jellybean</td>
333 <td>$3.76</td>
334 </tr>
335 <tr>
336 <td>Jonathan</td>
337 <td>Lollipop</td>
338 <td>$7.00</td>
339 </tr>
340 <tr>
341 <td>Shannon</td>
342 <td>KitKat</td>
343 <td>$9.99</td>
344 </tr>
345 </tbody>
346 </table>
347 </div>
348 </div>
349
350 </div>
351
352 <div id="responsive" class="section scrollspy">
353 <h2 class="header">Responsive Table</h2>
354 <div class="row">
355 <div class="col s12">
356 <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>
357 <table class="responsive-table">
358 <thead>
359 <tr>
360 <th data-field="id">Name</th>
361 <th data-field="name">Item Name</th>
362 <th data-field="price">Item Price</th>
363 </tr>
364 </thead>
365 <tbody>
366 <tr>
367 <td>Alvin</td>
368 <td>Eclair</td>
369 <td>$0.87</td>
370 </tr>
371 <tr>
372 <td>Alan</td>
373 <td>Jellybean</td>
374 <td>$3.76</td>
375 </tr>
376 <tr>
377 <td>Jonathan</td>
378 <td>Lollipop</td>
379 <td>$7.00</td>
380 </tr>
381 <tr>
382 <td>Shannon</td>
383 <td>KitKat</td>
384 <td>$9.99</td>
385 </tr>
386 </tbody>
387 </table>
388 </div>
389 </div>
390
391 </div>
392
393
394 </div><!-- End Tables Section -->
395
396 <div class="col hide-on-small-only m3 l2">
397 <div class="toc-wrapper">
398 <div class="buysellads hide-on-small-only">
399 <!-- CarbonAds Zone Code -->
400 <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss" id="_carbonads_js"></script>
401 </div>
402 <div style="height: 1px;">
403 <ul class="section table-of-contents">
404 <li><a href="#tables">Borderless</a></li>
405 <li><a href="#bordered">Bordered</a></li>
406 <li><a href="#striped">Striped</a></li>
407 <li><a href="#highlight">highlight</a></li>
408 <li><a href="#centered">Centered</a></li>
409 <li><a href="#responsive">Responsive</a></li>
410 </ul>
411 </div>
412 </div>
413 </div>
414
415 </div>
416</div>
417
418
419 </main> <footer class="page-footer">
420 <div class="container">
421 <div class="row">
422 <div class="col l4 s12">
423 <h5 class="white-text">Help Materialize Grow</h5>
424 <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>
425 <form id="paypal-donate" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
426<input type="hidden" name="cmd" value="_s-xclick">
427<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----MIIHLwYJKoZIhvcNAQcEoIIHIDCCBxwCAQExggEwMIIBLAIBADCBlDCBjjELMAkGA1UEBhMCVVMxCzAJBgNVBAgTAkNBMRYwFAYDVQQHEw1Nb3VudGFpbiBWaWV3MRQwEgYDVQQKEwtQYXlQYWwgSW5jLjETMBEGA1UECxQKbGl2ZV9jZXJ0czERMA8GA1UEAxQIbGl2ZV9hcGkxHDAaBgkqhkiG9w0BCQEWDXJlQHBheXBhbC5jb20CAQAwDQYJKoZIhvcNAQEBBQAEgYC2O5rnsmP26R+2wNew3Jc3rCzBzw8LpJh1TTRZyMIFMYv/voKC1TMEvxU0ct4gdsZ29zARE96gRsCPVtVpY1hGr0NivLXeiHyw3xoW9UfzjcI9gZy5PZYoNv2xkTMj+jUkzuBMDiB2JfrIH7ZNxbcK1m/ep7Luoo1CR8JmYNCtlzELMAkGBSsOAwIaBQAwgawGCSqGSIb3DQEHATAUBggqhkiG9w0DBwQI/PHaKaPxsg2AgYh0FZUDlxXaZSGYZJiUkF4L0p9hZn0tYmT6kqOqB50541GOsZtJSVAO/F+Qz5I9EsCuGve7GLKSBufhNjWa24ay5T2hkGJkAzISlqS2qBQSFDDpHDyEnNSZ2vPG2K8Bepc/SQD5nurs+vyC55axU4OnG33RBEtAmdOrAlZGxwzDBSjg4us1epUyoIIDhzCCA4MwggLsoAMCAQICAQAwDQYJKoZIhvcNAQEFBQAwgY4xCzAJBgNVBAYTAlVTMQswCQYDVQQIEwJDQTEWMBQGA1UEBxMNTW91bnRhaW4gVmlldzEUMBIGA1UEChMLUGF5UGFsIEluYy4xEzARBgNVBAsUCmxpdmVfY2VydHMxETAPBgNVBAMUCGxpdmVfYXBpMRwwGgYJKoZIhvcNAQkBFg1yZUBwYXlwYWwuY29tMB4XDTA0MDIxMzEwMTMxNVoXDTM1MDIxMzEwMTMxNVowgY4xCzAJBgNVBAYTAlVTMQswCQYDVQQIEwJDQTEWMBQGA1UEBxMNTW91bnRhaW4gVmlldzEUMBIGA1UEChMLUGF5UGFsIEluYy4xEzARBgNVBAsUCmxpdmVfY2VydHMxETAPBgNVBAMUCGxpdmVfYXBpMRwwGgYJKoZIhvcNAQkBFg1yZUBwYXlwYWwuY29tMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDBR07d/ETMS1ycjtkpkvjXZe9k+6CieLuLsPumsJ7QC1odNz3sJiCbs2wC0nLE0uLGaEtXynIgRqIddYCHx88pb5HTXv4SZeuv0Rqq4+axW9PLAAATU8w04qqjaSXgbGLP3NmohqM6bV9kZZwZLR/klDaQGo1u9uDb9lr4Yn+rBQIDAQABo4HuMIHrMB0GA1UdDgQWBBSWn3y7xm8XvVk/UtcKG+wQ1mSUazCBuwYDVR0jBIGzMIGwgBSWn3y7xm8XvVk/UtcKG+wQ1mSUa6GBlKSBkTCBjjELMAkGA1UEBhMCVVMxCzAJBgNVBAgTAkNBMRYwFAYDVQQHEw1Nb3VudGFpbiBWaWV3MRQwEgYDVQQKEwtQYXlQYWwgSW5jLjETMBEGA1UECxQKbGl2ZV9jZXJ0czERMA8GA1UEAxQIbGl2ZV9hcGkxHDAaBgkqhkiG9w0BCQEWDXJlQHBheXBhbC5jb22CAQAwDAYDVR0TBAUwAwEB/zANBgkqhkiG9w0BAQUFAAOBgQCBXzpWmoBa5e9fo6ujionW1hUhPkOBakTr3YCDjbYfvJEiv/2P+IobhOGJr85+XHhN0v4gUkEDI8r2/rNk1m0GA8HKddvTjyGw/XqXa+LSTlDYkqI8OwR8GEYj4efEtcRpRYBxV8KxAW93YDWzFGvruKnnLbDAF6VR5w/cCMn5hzGCAZowggGWAgEBMIGUMIGOMQswCQYDVQQGEwJVUzELMAkGA1UECBMCQ0ExFjAUBgNVBAcTDU1vdW50YWluIFZpZXcxFDASBgNVBAoTC1BheVBhbCBJbmMuMRMwEQYDVQQLFApsaXZlX2NlcnRzMREwDwYDVQQDFAhsaXZlX2FwaTEcMBoGCSqGSIb3DQEJARYNcmVAcGF5cGFsLmNvbQIBADAJBgUrDgMCGgUAoF0wGAYJKoZIhvcNAQkDMQsGCSqGSIb3DQEHATAcBgkqhkiG9w0BCQUxDxcNMTQxMjE1MDcwNTI3WjAjBgkqhkiG9w0BCQQxFgQUTOnEae05+jEbHsz0um3L3/Cl/zgwDQYJKoZIhvcNAQEBBQAEgYAGuieIpSk7XCxyo4RieZQ/SO0EHUYEW9B7KFJB9qZ1+yCKpUm7prwsGGOJAAdqKOw59I7qjLQI5cFJz/O8Ivb14TclAZiKTnOCB/wO1QHp+9s+hF00D6v0TDetLm0GLnk/7ljWvNq1pTyiMTLVg4yw1dAzQE1tC6bYTtLuDhLl0Q==-----END PKCS7-----
428">
429<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
430</button>
431</form>
432
433 </div>
434 <div class="col l4 s12">
435 <h5 class="white-text">Join the Discussion</h5>
436 <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>
437 <a class="btn waves-effect waves-light red lighten-3" target="_blank" href="https://gitter.im/Dogfalo/materialize">Chat</a>
438 </div>
439 <div class="col l4 s12" style="overflow: hidden;">
440 <h5 class="white-text">Connect</h5>
441 <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>
442 <br>
443 <a href="https://twitter.com/MaterializeCSS" class="twitter-follow-button" data-show-count="true" data-size="large" data-dnt="true">Follow @MaterializeCSS</a>
444 <br>
445 <div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/108619793845925798422" data-rel="publisher"></div>
446 </div>
447 </div>
448 </div>
449 <div class="footer-copyright">
450 <div class="container">
451 © 2014-2015 Materialize, All rights reserved.
452 <a class="grey-text text-lighten-4 right" href="https://github.com/Dogfalo/materialize/blob/master/LICENSE">MIT License</a>
453 </div>
454 </div>
455 </footer>
456 <!-- Scripts-->
457 <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
458 <script>if (!window.jQuery) { document.write('<script src="bin/jquery-2.1.1.min.js"><\/script>'); }
459 </script>
460 <script src="js/jquery.timeago.min.js"></script>
461 <script src="js/prism.js"></script>
462 <script src="jade/lunr.min.js"></script>
463 <script src="jade/search.js"></script>
464 <script src="bin/materialize.js"></script>
465 <script src="js/init.js"></script>
466 <!-- Twitter Button -->
467 <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>
468
469 <!-- Google Plus Button-->
470 <script src="https://apis.google.com/js/platform.js" async defer></script>
471
472 <!-- Google Analytics -->
473 <script>
474 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
475 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
476 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
477 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
478
479 ga('create', 'UA-56218128-1', 'auto');
480 ga('require', 'displayfeatures');
481 ga('send', 'pageview');
482 </script>
483 </body>
484</html>
\No newline at end of file