Tabla bordeada con CSS puro – Barcelona Geeks

La 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 la clase «pure-table» para agregar estilos en la tabla. Esta clase agrega el relleno y los bordes a los elementos de la tabla y enfatiza el encabezado.

La tabla bordeada es una tabla que tiene borde horizontal y vertical a la celda. Para hacer la tabla bordeada, agregaremos la clase «pure-table-bordered» .

Clase de tabla bordeada de CSS puro:

pure-table-bordered: Esta clase se utiliza para crear la tabla bordeada. Esta clase se usa con la clase de tabla pura.

Sintaxis:

<table class="pure-table pure-table-bordered">
    <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 Bordered Table</h3>
  
        <table class="pure-table pure-table-bordered">
            <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 bordeada con CSS puro

Referencia: https://purecss.io/tables/#bordered-table

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