The Tables in Materialize CSS

The materialize framework has built-in CSS classes for creating and styling the HTML tables in your web pages. The tables are responsive by default; so they adapt the shape of device size. In smaller screens, the tables are aligned centrally automatically.

Besides, by using the responsive-table class, the table header is adjusted according to the user’s screen with horizontal scroll bar; an example is coming up.

A demo of basic table by materialize CSS

The simple table does not require you adding any specific classes as using the materialize CSS. You simply require creating the table markup. The table is without outer border and headers are bold while rows are separated by horizontal lines. Only the reference to the materialize.css is required in the <head> section and the table is created as follows:

materialize table simple

Complete Code:

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/css/materialize.min.css">

 </head>

<body class = "container"> 
<table>
<thead>
  <tr>
      <th>Product ID</th>
      <th>Product Name</th>
      <th>Product Quanity</th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>P-001</td>
    <td>Mango</td>
    <td>105 Dozen</td>
  </tr>
  <tr>
    <td>P-002</td>
    <td>Apple</td>
    <td>35 Kgs</td>
  </tr>
  <tr>
    <td>P-001</td>
    <td>Oranges</td>
    <td>55 Kgs</td>
  </tr>
  <tr>
    <td>P-004</td>
    <td>Strawberries</td>
    <td>15 Kgs</td>
  </tr>          
</tbody>
</table>
</body>   
</html>

You can see, no hovering effect in rows and no outer border for the default style of materialize framework.

The demo of stripped table

Adding the stripped class in the <table> tag adds “zebra crossing” in the table rows. In that case, every other row is given the light grey background so table data is distinguishable easily. See the table outlook with stripped class:

materialize table strip

The markup for the <table> tag:

<table class="striped">

<thead>

  <tr>

      <th>Product ID</th>

      <th>Product Name</th>

      <th>Product Quanity</th>

  </tr>

</thead>

The same data is used as in above example and you can see the striped rows are added.

The example of highlighted table rows

Just add the highlight class in the table tag for creating a table with a hovering effect in rows. As the user brings the mouse over any row, it is highlighted.

You may add the highlight class along with the stripped class or in a simple table for a hovering effect. Have a look at the table created with both stripped and highlight classes:

Code:

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/css/materialize.min.css">

 </head>

<body class = "container"> 
<table class="striped highlight">
<thead>
  <tr>
      <th>Product ID</th>
      <th>Product Name</th>
      <th>Product Quanity</th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>P-001</td>
    <td>Mango</td>
    <td>105 Dozen</td>
  </tr>
  <tr>
    <td>P-002</td>
    <td>Apple</td>
    <td>35 Kgs</td>
  </tr>
  <tr>
    <td>P-001</td>
    <td>Oranges</td>
    <td>55 Kgs</td>
  </tr>
  <tr>
    <td>P-004</td>
    <td>Strawberries</td>
    <td>15 Kgs</td>
  </tr>          
</tbody>
</table>
</body>   
</html>

Centrally aligned table

You may use the centered class in the <table> tag for centrally aligning the headings and table data. You may use centered class in the basic table or in combination with stripped and/or highlight class. Have a look at centered align table.

The table markup with centered class:

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/css/materialize.min.css">

 </head>

<body class = "container"> 
<table class="striped centered">
<thead>
  <tr>
      <th>Product ID</th>
      <th>Product Name</th>
      <th>Product Quanity</th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>P-001</td>
    <td>Mango</td>
    <td>105 Dozen</td>
  </tr>
  <tr>
    <td>P-002</td>
    <td>Apple</td>
    <td>35 Kgs</td>
  </tr>
  <tr>
    <td>P-001</td>
    <td>Oranges</td>
    <td>55 Kgs</td>
  </tr>
  <tr>
    <td>P-004</td>
    <td>Strawberries</td>
    <td>15 Kgs</td>
  </tr>          
</tbody>
</table>
</body>   
</html>

A demo of horizontally scrollable table

If you have many table headings and table data accordingly then presenting data with the horizontal scroll bar in small devices makes it easier for the users to go through the table information.

For creating responsive tables with the horizontal scrollbar, use the responsive-table class in the <table> tag. In that case, the table headings appear towards the left side while table rows with a scroll bar, as shown below:

materialize table responsive

The markup:

<table class="responsive-table">
<thead>
  <tr>
      <th>Product ID</th>
      <th>Product Name</th>
      <th>Product Quanity</th>
  </tr>
</thead>

Notice this line:

<table class=”responsive-table”>

Rest remains the same.

For viewing this table with the scroll bar in example page, either resize the screen on the desktop or view it on the smartphone.

Customizing the stripped color example

In your web project is based on materialized framework, you may need customizing different components as per the need of your project or liking. For example, rather than using the default grayish color for the stripped rows, you may like using some other color for every other row.

One of the ways of doing this is overriding the default CSS class(es) in the materialized.css. For example, for customizing the striped rows color, you may use the table.striped class and provide new color value after the reference of materialize.min.css file.

See this example where I have overridden this class in the <style> section:

materialize table custom

The CSS:

<style>

table.striped > tbody > tr:nth-child(odd) {

  background-color: rgba(170, 213, 213, 0.5);

}



</style>

The markup:

<table class="striped">

<thead>

  <tr>

…..

You can see, the same markup is used as for the default striped table.

Changing the highlight color example

Similarly, after adding the highlight class in the table tag, you may change the default grayish color while still using the highlight class name.

See the example below where I changed the highlight class background color just like the above example:

The CSS for this example:

<style>

table.highlight > tbody > tr:hover {

  background-color: rgba(255, 181, 145, 0.5);

}

</style>

The table tag:

<table class=”striped highlight”>

Complete code:

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/css/materialize.min.css">
<style>
table.highlight > tbody > tr:hover {
  background-color: rgba(255, 181, 145, 0.5);
}
</style>
 </head>

<body class = "container"> 
<table class="striped highlight">
<thead>
  <tr>
      <th>Product ID</th>
      <th>Product Name</th>
      <th>Product Quanity</th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>P-001</td>
    <td>Mango</td>
    <td>105 Dozen</td>
  </tr>
  <tr>
    <td>P-002</td>
    <td>Apple</td>
    <td>35 Kgs</td>
  </tr>
  <tr>
    <td>P-001</td>
    <td>Oranges</td>
    <td>55 Kgs</td>
  </tr>
  <tr>
    <td>P-004</td>
    <td>Strawberries</td>
    <td>15 Kgs</td>
  </tr>          
</tbody>
</table>
</body>   
</html>