Skip to content
Related Articles

Related Articles

Materialize CSS Centered Table

Improve Article
Save Article
  • Last Updated : 12 Jul, 2022
Improve Article
Save Article

Materialize CSS is a design language that combines the classic principles of successful design along with innovation and technology. It is created and designed by Google. It is very easy to use to make our webpage dynamic and responsive.

Materialize CSS Table is used to store the data in the rows and columns in a well-structured manner. Materialize CSS Centered Table is used to align all the text in the center using the centered class. In this article, we will discuss the Centered Table in Materialize CSS.

Materialize CSS Centered Table Class:

  • centered: This class is used to align all the text in the center.

Syntax:

<table class="centered">
    ...  
</table>

Example: The following code demonstrates the Materialize CSS Centered Table.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- 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>
    <div class="container center-align">
        <h3 class="green-text"> GeeksforGeeks </h3>
        <h4> Materialize CSS Centered Table </h4>
  
        <table class="centered">
            <thead>
                <tr>
                    <th> GFG Header 1 </th>
                    <th> GFG Header 2 </th>
                    <th> GFG Header 3 </th>
                    <th> GFG Header 4 </th>
                </tr>
            </thead>
  
            <tbody>
                <tr>
                    <td> GeeksforGeeks </td>
                    <td> Coding </td>
                    <td> DSA </td>
                    <td> Java </td>
                </tr>
                <tr>
                    <td> Python </td>
                    <td> Dart </td>
                    <td> Flutter </td>
                    <td> Javascript </td>
                </tr>
                <tr>
                    <td> C++ </td>
                    <td> Web development </td>
                    <td> App development </td>
                    <td> Java </td>
                </tr>
                <tr>
                    <td> Python </td>
                    <td> GeeksforGeeks </td>
                    <td> Portal for geeks </td>
                    <td> Computer Science </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
  
</html>


Output:

Materialize CSS Centered Table

Reference: https://materializecss.com/table.html#centered


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!