Materialize CSS | Tables
Tables are nice and easy way to organize a lot of data. Materialize CSS provides a few utility classes to style table. In addition to improve mobile experience, all tables on mobile-screen widths are centered automatically. Following are the styles for table:
- Stripped Table:
<!DOCTYPE html><html><head><!--Import Google Icon Font--><linkhref=rel="stylesheet"><!-- Compiled and minified CSS --><linkrel="stylesheet"href=<!--Let browser know website isoptimized for mobile--><metaname="viewport"content="width=device-width, initial-scale=1.0"/></head><body><tableclass="striped"><thead><tr><th>Student</th><th>Study Time(days)</th><th>Marks</th></tr></thead><tbody><tr><td>Atul</td><td>2</td><td>80</td></tr><tr><td>Aman</td><td>4</td><td>71</td></tr><tr><td>Ansh</td><td>2</td><td>98</td></tr><tr><td>John</td><td>5</td><td>96</td></tr></tbody></table><!-- Compiled and minified JavaScript --><scriptsrc=</script></body></html>Output:
- Bordered Table:
<!DOCTYPE html><html><head><!--Import Google Icon Font--><linkhref=rel="stylesheet"><!-- Compiled and minified CSS --><linkrel="stylesheet"href=<!--Let browser know website isoptimized for mobile--><metaname="viewport"content="width=device-width, initial-scale=1.0"/></head><body><tableclass="bordered"><thead><tr><th>Student</th><th>Study Time(days)</th><th>Marks</th></tr></thead><tbody><tr><td>Atul</td><td>2</td><td>80</td></tr><tr><td>Aman</td><td>4</td><td>71</td></tr><tr><td>Ansh</td><td>2</td><td>98</td></tr><tr><td>John</td><td>5</td><td>96</td></tr></tbody></table><!-- Compiled and minified JavaScript --><scriptsrc=</script></body></html>Output:
- Highlighted Table:
<!DOCTYPE html><html><head><!--Import Google Icon Font--><linkhref=rel="stylesheet"><!-- Compiled and minified CSS --><linkrel="stylesheet"href=<!--Let browser know website isoptimized for mobile--><metaname="viewport"content="width=device-width, initial-scale=1.0"/></head><body><tableclass="highlight"><thead><tr><th>Student</th><th>Study Time(days)</th><th>Marks</th></tr></thead><tbody><tr><td>Atul</td><td>2</td><td>80</td></tr><tr><td>Aman</td><td>4</td><td>71</td></tr><tr><td>Ansh</td><td>2</td><td>98</td></tr><tr><td>John</td><td>5</td><td>96</td></tr></tbody></table><!-- Compiled and minified JavaScript --><scriptsrc=</script></body></html>Output:
- Centered Table:
<!DOCTYPE html><html><head><!--Import Google Icon Font--><linkhref=rel="stylesheet"><!-- Compiled and minified CSS --><linkrel="stylesheet"href=<!--Let browser know website isoptimized for mobile--><metaname="viewport"content="width=device-width, initial-scale=1.0"/></head><body><tableclass="centered"><thead><tr><th>Student</th><th>Study Time(days)</th><th>Marks</th></tr></thead><tbody><tr><td>Atul</td><td>2</td><td>80</td></tr><tr><td>Aman</td><td>4</td><td>71</td></tr><tr><td>Ansh</td><td>2</td><td>98</td></tr><tr><td>John</td><td>5</td><td>96</td></tr></tbody></table><!-- Compiled and minified JavaScript --><scriptsrc=</script></body></html>Output:
- Responsive Table:
<!DOCTYPE html><html><head><!--Import Google Icon Font--><linkhref=rel="stylesheet"><!-- Compiled and minified CSS --><linkrel="stylesheet"href=<!--Let browser know website isoptimized for mobile--><metaname="viewport"content="width=device-width, initial-scale=1.0"/></head><body><tableclass="responsive-table"><thead><tr><th>Student</th><th>Study Time(days)</th><th>Marks</th></tr></thead><tbody><tr><td>Atul</td><td>2</td><td>80</td></tr><tr><td>Aman</td><td>4</td><td>71</td></tr><tr><td>Ansh</td><td>2</td><td>98</td></tr><tr><td>John</td><td>5</td><td>96</td></tr></tbody></table><!-- Compiled and minified JavaScript --><scriptsrc=</script></body></html>Ouptut:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
