物化 CSS |表格

原文:https://www.geeksforgeeks.org/materialize-css-tables/

表格是组织大量数据的一种很好且简单的方式。物化 CSS 提供了一些工具类来设置表格的样式。除了改善移动体验,手机屏幕宽度上的所有表格都自动居中。以下是表格的样式:

  • Stripped Table:

    ```html <!DOCTYPE html>

        

        

        

                                                                                                       

                                                                                                                                                                                                                                                                                                                                     
    StudentStudy Time(days)Marks
    Atul280
    Aman471
    Ansh298
    John596

             

    ```

    输出:

  • Bordered Table:

    ```html <!DOCTYPE html>

             

        

        

                                                                                                       

                                                                                                                                                                                                                                                                                                                                     
    StudentStudy Time(days)Marks
    Atul280
    Aman471
    Ansh298
    John596

             

    ```

    输出:

  • Highlighted Table:

    ```html <!DOCTYPE html>

             

        

        

                                                                                                       

                                                                                                                                                                                                                                                                                                                                     
    StudentStudy Time(days)Marks
    Atul280
    Aman471
    Ansh298
    John596

             

    ```

    输出:

  • Centered Table:

    ```html <!DOCTYPE html>

             

        

        

                                                                                                       

                                                                                                                                                                                                                                                                                                                                     
    StudentStudy Time(days)Marks
    Atul280
    Aman471
    Ansh298
    John596

             

    ```

    输出:

  • Responsive Table:

    ```html <!DOCTYPE html>

             

        

        

                                                                                                       

                                                                                                                                                                                                                                                                                                                                     
    StudentStudy Time(days)Marks
    Atul280
    Aman471
    Ansh298
    John596

             

    ```

    听着: