Tabla CSS pura con bordes horizontales

Una tabla es una disposición de datos en filas y columnas, o posiblemente en una estructura más compleja. Las tablas se utilizan ampliamente en la comunicación, la investigación y el análisis de datos. En Pure CSS, agregaremos una clase de «tabla pura» para agregar estilos a la tabla. Esta clase agrega relleno y bordes a los elementos de la tabla y enfatiza el encabezado.

Una tabla con bordes horizontales es una tabla que solo tiene un borde horizontal. Para hacer la tabla con borde horizontal, agregaremos la clase «pure-table-horizontal» .

Tabla CSS pura con clase de bordes horizontales:

pure-table-horizontal: esta clase se utiliza para crear la tabla con borde horizontal. Esta clase se utiliza con una clase de tabla pura.

Sintaxis:

<table class="pure-table pure-table-horizontal">
    <thead>
         // Table heading content
    </thead>
    <tbody>
         // Table body content
    </tbody>
</table>

Ejemplo:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" 
          href=
"https://unpkg.com/purecss@2.0.6/build/pure-min.css"
          integrity=
"sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5"
          crossorigin="anonymous">
</head>
  
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
  
        <h3>Pure CSS Table with Horizontal Borders</h3>
  
        <table class="pure-table pure-table-horizontal">
            <thead>
                <tr>
                    <th>Rank</th>
                    <th>Name</th>
                    <th>Runs</th>
                    <th>Centuries</th>
                    <th>Strike Rate</th>
                    <th>Avg</th>
                </tr>
            </thead>
  
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Rohit</td>
                    <td>10000</td>
                    <td>29</td>
                    <td>97</td>
                    <td>55</td>
                </tr>
  
                <tr>
                    <td>2</td>
                    <td>Virat</td>
                    <td>12000</td>
                    <td>40</td>
                    <td>91</td>
                    <td>49</td>
                </tr>
  
                <tr>
                    <td>3</td>
                    <td>Rahul</td>
                    <td>5000</td>
                    <td>8</td>
                    <td>85</td>
                    <td>45</td>
                </tr>
  
                <tr>
                    <td>4</td>
                    <td>Rishabh</td>
                    <td>4000</td>
                    <td>2</td>
                    <td>89</td>
                    <td>39</td>
                </tr>
            </tbody>
        </table>
    </center>
</body>
  
</html>

Producción:

Tabla CSS pura con bordes horizontales

Publicación traducida automáticamente

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

HTML

Deja una respuesta Cancelar la respuesta