Materialize CSS
  Prev Page
Next Page  
Materialize Tables
In Materialize CSS Tables are a nice way to organize a lot of data, you can display different types of tables using various styles. In addition, to improve mobile experience, all tables on mobile-screen widths are centered automatically. The materialize tables are 6 types there are following :

1)  Borderless Table
2)  Bordered Table
3)  Striped Table
4)  Highlight Table
5)  Centered Table
6)  Responsive Table
Borderless Table

Borderless Table are represents a basic table without any border.

<div class="row">

<table>
    <thead>
      <tr>
          <th>Name</th>
          <th>Mobile</th>
          <th>Email ID</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Ramana</td>
        <td>9963XXXXX68</td>
        <td>ramana@freetimelearn.com</td>
      </tr>
      <tr>
        <td>Raja</td>
        <td>9700XXXX92</td>
        <td>raja@freetimelearn.com</td>
      </tr>
      <tr>
        <td>Sravan</td>
        <td>95115XXXX22</td>
        <td>sravan@freetimelearn.com</td>
      </tr>
      <tr>
        <td>Srinu</td>
        <td>8985XXXX90</td>
        <td>srinu@freetimelearn.com</td>
      </tr>
      <tr>
        <td>Pavan</td>
        <td>8333XXXX98</td>
        <td>pavan@freetimelearn.com</td>
      </tr>
    </tbody>
</table>

</div>
Output :
Bordered Table

Add this class="bordered" class to the table tag for a bordered table.

<div class="row">

<table class="bordered">
    <thead>
      <tr>
          <th>Name</th>
          <th>Mobile</th>
          <th>Email ID</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Ramana</td>
        <td>9963XXXXX68</td>
        <td>ramana@freetimelearn.com</td>
      </tr>
      <tr>
        <td>Raja</td>
        <td>9700XXXX92</td>
        <td>raja@freetimelearn.com</td>
      </tr>
      <tr>
        <td>Sravan</td>
        <td>95115XXXX22</td>
        <td>sravan@freetimelearn.com</td>
      </tr>
      <tr>
        <td>Srinu</td>
        <td>8985XXXX90</td>
        <td>srinu@freetimelearn.com</td>
      </tr>
      <tr>
        <td>Pavan</td>
        <td>8333XXXX98</td>
        <td>pavan@freetimelearn.com</td>
      </tr>
    </tbody>
</table>

</div>
Output :
Striped Table

Add this class="striped" class to the table tag for a striped table

<div class="row">

<table class="striped">
    <thead>
      <tr>
          <th>Name</th>
          <th>Mobile</th>
          <th>Email ID</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Ramana</td>
        <td>9963XXXXX68</td>
        <td>ramana@freetimelearn.com</td>
      </tr>
      <tr>
        <td>Raja</td>
        <td>9700XXXX92</td>
        <td>raja@freetimelearn.com</td>
      </tr>
      <tr>
        <td>Sravan</td>
        <td>95115XXXX22</td>
        <td>sravan@freetimelearn.com</td>
      </tr>
      <tr>
        <td>Srinu</td>
        <td>8985XXXX90</td>
        <td>srinu@freetimelearn.com</td>
      </tr>
      <tr>
        <td>Pavan</td>
        <td>8333XXXX98</td>
        <td>pavan@freetimelearn.com</td>
      </tr>
    </tbody>
</table>

</div>
Output :
Highlight Table

Add this class="highlight" class to the table tag for a highlight table.

<div class="row">

<table class="highlight">
    <thead>
      <tr>
          <th>Name</th>
          <th>Mobile</th>
          <th>Email ID</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Ramana</td>
        <td>9963XXXXX68</td>
        <td>ramana@freetimelearn.com</td>
      </tr>
      <tr>
        <td>Raja</td>
        <td>9700XXXX92</td>
        <td>raja@freetimelearn.com</td>
      </tr>
      <tr>
        <td>Sravan</td>
        <td>95115XXXX22</td>
        <td>sravan@freetimelearn.com</td>
      </tr>
      <tr>
        <td>Srinu</td>
        <td>8985XXXX90</td>
        <td>srinu@freetimelearn.com</td>
      </tr>
      <tr>
        <td>Pavan</td>
        <td>8333XXXX98</td>
        <td>pavan@freetimelearn.com</td>
      </tr>
    </tbody>
</table>	

</div>
Output :
Centered Table

Add this class="centered" class to the table tag to center align all the text in the table.

<div class="row">

<table class="centered">
    <thead>
      <tr>
          <th>Name</th>
          <th>Mobile</th>
          <th>Email ID</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Ramana</td>
        <td>9963XXXXX68</td>
        <td>ramana@freetimelearn.com</td>
      </tr>
      <tr>
        <td>Raja</td>
        <td>9700XXXX92</td>
        <td>raja@freetimelearn.com</td>
      </tr>
      <tr>
        <td>Sravan</td>
        <td>95115XXXX22</td>
        <td>sravan@freetimelearn.com</td>
      </tr>
      <tr>
        <td>Srinu</td>
        <td>8985XXXX90</td>
        <td>srinu@freetimelearn.com</td>
      </tr>
      <tr>
        <td>Pavan</td>
        <td>8333XXXX98</td>
        <td>pavan@freetimelearn.com</td>
      </tr>
    </tbody>
</table>

</div>
Output :
Responsive Table

Add this class="responsive-table" class to the table tag to make a responsive table to show a horizontally scrollable on smaller screen widths.

<div class="row">

<table class="responsive-table">
    <thead>
      <tr>
          <th>Name</th>
          <th>Mobile</th>
          <th>Email ID</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Ramana</td>
        <td>9963XXXXX68</td>
        <td>ramana@freetimelearn.com</td>
      </tr>
      <tr>
        <td>Raja</td>
        <td>9700XXXX92</td>
        <td>raja@freetimelearn.com</td>
      </tr>
      <tr>
        <td>Sravan</td>
        <td>95115XXXX22</td>
        <td>sravan@freetimelearn.com</td>
      </tr>
      <tr>
        <td>Srinu</td>
        <td>8985XXXX90</td>
        <td>srinu@freetimelearn.com</td>
      </tr>
      <tr>
        <td>Pavan</td>
        <td>8333XXXX98</td>
        <td>pavan@freetimelearn.com</td>
      </tr>
    </tbody>
</table>	

</div>
Output :
  Prev Page
Next Page