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-->
<
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
>
chevron_rightfilter_noneOutput:
- Bordered Table:
<!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
>
chevron_rightfilter_noneOutput:
- Highlighted Table:
<!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
>
chevron_rightfilter_noneOutput:
- Centered Table:
<!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
>
chevron_rightfilter_noneOutput:
- Responsive Table:
<!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
>
chevron_rightfilter_noneOuptut: