Tabla de aspectos destacados de Materialise CSS

Materialise CSS es un lenguaje de diseño que combina los principios clásicos del diseño exitoso junto con la innovación y la tecnología. Está creado y diseñado por Google. Es muy fácil de usar para hacer que nuestra página web sea dinámica y receptiva.

Materialise CSS Table se utiliza para almacenar los datos en las filas y columnas de una manera bien estructurada. Materialise CSS Highlight Table se usa para resaltar las filas de la tabla cuando se desplaza con la ayuda de la clase de resaltado . En este artículo, analizaremos la tabla de puntos destacados en Materialise CSS.

Clase de tabla de resaltado CSS de Materialise:

resaltar: esta clase se usa para resaltar las filas cuando se pasa el cursor sobre las filas de la tabla.

Sintaxis:

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

Ejemplo: El siguiente código demuestra la tabla de resaltado CSS de Materialise.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <!-- 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>
    <div class="container center-align">
        <h3 class="green-text"> GeeksforGeeks </h3>
        <h4> Materialize CSS Highlight Table </h4>
  
        <table class="highlight">
            <thead>
                <tr>
                    <th> Student Name </th>
                    <th> Obtained Marks </th>
                    <th> Total marks </th>
                    <th> Percentage(%) </th>
                </tr>
            </thead>
  
            <tbody>
                <tr>
                    <td> Raj </td>
                    <td> 200 </td>
                    <td> 500 </td>
                    <td> 40 </td>
                </tr>
                <tr>
                    <td> Rahul </td>
                    <td> 250 </td>
                    <td> 500 </td>
                    <td> 50 </td>
                </tr>
                <tr>
                    <td> Rocky </td>
                    <td> 150 </td>
                    <td> 500 </td>
                    <td> 30 </td>
                </tr>
                <tr>
                    <td> Deepak </td>
                    <td> 450 </td>
                    <td> 500 </td>
                    <td> 90 </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
  
</html>

Producción:

Tabla de aspectos destacados de Materialise CSS

Referencia: https://materializecss.com/table.html#highlight

Publicación traducida automáticamente

Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

Deja una respuesta Cancelar la respuesta