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: