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:
html
<!DOCTYPE html><html><head> <!--Import Google Icon Font--> <link href= rel="stylesheet"> <!-- Compiled and minified CSS --> <link rel="stylesheet" href= <!--Let browser know website is optimized for mobile--> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /></head><body> <table class="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 --> <script src= </script></body></html> |
Output:
- Bordered Table:
html
<!DOCTYPE html><html><head> <!--Import Google Icon Font--> <link href= rel="stylesheet"> <!-- Compiled and minified CSS --> <link rel="stylesheet" href= <!--Let browser know website is optimized for mobile--> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /></head><body> <table class="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 --> <script src= </script></body></html> |
Output:
- Highlighted Table:
html
<!DOCTYPE html><html><head> <!--Import Google Icon Font--> <link href= rel="stylesheet"> <!-- Compiled and minified CSS --> <link rel="stylesheet" href= <!--Let browser know website is optimized for mobile--> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /></head><body> <table class="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 --> <script src= </script></body></html> |
Output:
- Centered Table:
html
<!DOCTYPE html><html><head> <!--Import Google Icon Font--> <link href= rel="stylesheet"> <!-- Compiled and minified CSS --> <link rel="stylesheet" href= <!--Let browser know website is optimized for mobile--> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /></head><body> <table class="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 --> <script src= </script></body></html> |
Output:
- Responsive Table:
html
<!DOCTYPE html><html><head> <!--Import Google Icon Font--> <link href= rel="stylesheet"> <!-- Compiled and minified CSS --> <link rel="stylesheet" href= <!--Let browser know website is optimized for mobile--> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /></head><body> <table class="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 --> <script src= </script></body></html> |
Output:
.png)
