Материализовать CSS | Столы

Опубликовано: 5 Января, 2022

Таблицы - удобный и простой способ систематизировать большой объем данных. Materialize CSS предоставляет несколько служебных классов для стилизации таблицы. Помимо улучшения работы с мобильными устройствами, все таблицы с шириной экрана мобильного устройства центрируются автоматически. Ниже приведены стили для стола:

Зачищенная таблица:

 <!DOCTYPE html>
 < html >
 
< head >
 
    <!--Import Google Icon Font-->
    < link href =
 " https://fonts.googleapis.com/icon?family=Material +Icons"
        rel = "stylesheet" >
 
    <!-- Compiled and minified CSS -->
    < link rel = "stylesheet" href =
 " https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css " >
 
    <!--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 =
 " https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js " >
    </ script >
 </ body >
 
</ html > 

Выход:

Таблица с границами:

 <!DOCTYPE html>
 < html >
 
< head >
    <!--Import Google Icon Font-->
    < link href =
 " https://fonts.googleapis.com/icon?family=Material +Icons"
        rel = "stylesheet" >
 
    <!-- Compiled and minified CSS -->
    < link rel = "stylesheet" href =
 " https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css " >
 
    <!--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 =
 " https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js " >
    </ script >
 </ body >
 
</ html > 

Выход:

Выделенная таблица:

 <!DOCTYPE html>
 < html >
 
< head >
    <!--Import Google Icon Font-->
    < link href =
 " https://fonts.googleapis.com/icon?family=Material +Icons"
        rel = "stylesheet" >
 
    <!-- Compiled and minified CSS -->
    < link rel = "stylesheet" href =
 " https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css " >
 
    <!--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 =
 " https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js " >
    </ script >
 </ body >
 
</ html > 

Выход:

Центрированный стол:

 <!DOCTYPE html>
 < html >
 
< head >
    <!--Import Google Icon Font-->
    < link href =
 " https://fonts.googleapis.com/icon?family=Material +Icons"
        rel = "stylesheet" >
 
    <!-- Compiled and minified CSS -->
    < link rel = "stylesheet" href =
 " https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css " >
 
    <!--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 =
 " https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js " >
    </ script >
 </ body >
 
</ html > 

Выход:

Отзывчивая таблица:

 <!DOCTYPE html>
 < html >
 
< head >
    <!--Import Google Icon Font-->
    < link href =
 " https://fonts.googleapis.com/icon?family=Material +Icons"
        rel = "stylesheet" >
 
    <!-- Compiled and minified CSS -->
    < link rel = "stylesheet" href =
 " https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css " >
 
    <!--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 =
 " https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js " >
    </ script >
 </ body >
 
</ html > 

Выход:

Вопросы о Web технологиях HTML CSS-Misc HTML-Misc CSS

Материализовать CSS | Столы

РЕКОМЕНДУЕМЫЕ СТАТЬИ