Tablas CSS

Una tabla en CSS se usa para aplicar las diversas propiedades de estilo a los elementos de la tabla HTML para organizar los datos en filas y columnas, o posiblemente en una estructura más compleja de una manera organizada correctamente. Las tablas se utilizan ampliamente en la comunicación, la investigación y el análisis de datos. La propiedad table-layout en CSS se puede utilizar para mostrar el diseño de la tabla. Esta propiedad se usa básicamente para establecer el algoritmo que se usa para diseñar celdas, filas y columnas de <tabla>.

Propiedades:

Borde : se utiliza para especificar bordes en la tabla.

Sintaxis:

  border: table_width table_color;

Ejemplo 1: este ejemplo describe la tabla CSS para aplicar la propiedad de borde.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <style>
    body {
        text-align: left;
    }
      
    h1 {
        color: green;
    }
      
    table,
    th,
    td {
        
        /* Styling the border. */
        border: 1.5px solid blue;
    }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2>Add border to table:</h2>
    <table>
        <tr>
            <th>Roll No.</th>
            <th>Name</th>
        </tr>
        <tr>
            <td>1</td>
            <td>A_B_C</td>
        </tr>
        <tr>
            <td>2</td>
            <td>X_Y_Z</td>
        </tr>
    </table>
</body>
  
</html>

Producción:

Border Collapse : la propiedad border-collapse nos dice si el navegador debe controlar la apariencia de los bordes adyacentes que se tocan entre sí o si cada celda debe mantener su estilo.

Sintaxis:

border-collapse: collapse/separate;

Ejemplo 2: este ejemplo describe la tabla CSS aplicando la propiedad border-collapse.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <style>
    body {
        text-align: left;
    }
      
    h1 {
        color: green;
    }
      
    table.one {
        
        /* Styling border collapse for table one. */
        border-collapse: collapse;
    }
      
    table.two {
        
        /* Styling border separate for table two. */
        border-collapse: separate;
    }
      
    table,
    td,
    th {
        border: 1.5px solid blue;
    }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2>borders collapsed:</h2>
    <table class="one">
        <tr>
            <th>Roll Number</th>
            <th>Name</th>
        </tr>
        <tr>
            <td>1</td>
            <td>A_B_C</td>
        </tr>
        <tr>
            <td>2</td>
            <td>X_Y_Z</td>
        </tr>
    </table>
    <br>
    <br>
    <h2>borders separated:</h2>
    <table class="two">
        <tr>
            <th>Roll Number</th>
            <th>Name</th>
        </tr>
        <tr>
            <td>1</td>
            <td>A_B_C</td>
        </tr>
        <tr>
            <td>2</td>
            <td>X_Y_Z</td>
        </tr>
    </table>
</body>
  
</html>

Producción:

Espaciado de borde : esta propiedad especifica el espacio entre los bordes de las celdas adyacentes.

Sintaxis:

border-spacing: value;

Ejemplo 3: este ejemplo describe la tabla CSS aplicando la propiedad border-spacing.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <style>
    body {
        text-align: left;
    }
      
    h1 {
        color: green;
    }
      
    table.one {
        border-collapse: separate;
        
        /* Styling the border-spacing 
               between adjacent cells. */
        border-spacing: 10px;
    }
      
    table.two {
        border-collapse: separate;
        
        /* Styling the border-spacing 
              between adjacent cells. */
        border-spacing: 10px 30px;
    }
      
    table,
    td,
    th {
        border: 1.5px solid blue;
    }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2>border spacing:</h2>
    <table class="one">
        <tr>
            <th>Roll Number</th>
            <th>Name</th>
        </tr>
        <tr>
            <td>1</td>
            <td>A_B_C</td>
        </tr>
        <tr>
            <td>2</td>
            <td>X_Y_Z</td>
        </tr>
    </table>
    <br>
    <br>
    <h2>border spacing:</h2>
    <table class="two">
        <tr>
            <th>Roll Number</th>
            <th>Name</th>
        </tr>
        <tr>
            <td>1</td>
            <td>A_B_C</td>
        </tr>
        <tr>
            <td>2</td>
            <td>X_Y_Z</td>
        </tr>
    </table>
</body>
  
</html>

Producción:

Lado del título : la propiedad del lado del título se utiliza para controlar la ubicación del título en la tabla. De forma predeterminada, los títulos se colocan encima de la tabla.

Sintaxis:

caption-side: top/bottom;

Ejemplo 4: este ejemplo describe la tabla CSS aplicando la propiedad caption-side para controlar la ubicación del título de la tabla.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <style>
    body {
        text-align: left;
    }
      
    h1 {
        color: green;
    }
      
    table.one {
        border-collapse: separate;
        border-spacing: 10px;
        
        /* Controlling the placement of caption. */
        caption-side: top;
    }
      
    table.two {
        border-collapse: separate;
        border-spacing: 10px;
        
        /* Controlling the placement of caption. */
        caption-side: bottom;
    }
      
    table,
    td,
    th {
        border: 1.5px solid blue;
    }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2>Caption on top:</h2>
    <table class="one">
        <caption>Caption at the top of the table.</caption>
        <tr>
            <th>Roll Number</th>
            <th>Name</th>
        </tr>
        <tr>
            <td>1</td>
            <td>A_B_C</td>
        </tr>
        <tr>
            <td>2</td>
            <td>X_Y_Z</td>
        </tr>
    </table>
    <br>
    <br>
    <h2>Caption at bottom:</h2>
    <table class="two">
        <caption> Caption at the bottom of the table </caption>
        <tr>
            <th>Roll Number</th>
            <th>Name</th>
        </tr>
        <tr>
            <td>1</td>
            <td>A_B_C</td>
        </tr>
        <tr>
            <td>2</td>
            <td>X_Y_Z</td>
        </tr>
    </table>
</body>
  
</html>

Producción:

Celdas vacías : esta propiedad especifica si mostrar o no los bordes y el fondo en las celdas vacías de una tabla.

Sintaxis:

empty-cells:show/hide;

Ejemplo 5: este ejemplo describe la tabla CSS mediante la aplicación de la propiedad de celda vacía que especifica si mostrar los bordes o no en las celdas vacías de una tabla.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <style>
    body {
        text-align: left;
    }
      
    h1 {
        color: green;
    }
      
    table.one {
        border-collapse: separate;
        border-spacing: 10px;
        
        /* Hiding empty cells border */
        empty-cells: hide;
    }
      
    table.two {
        border-collapse: separate;
        border-spacing: 10px;
        
        /* Display empty cells border */
        empty-cells: show;
    }
      
    table,
    td,
    th {
        border: 1.5px solid blue;
    }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2>empty cells hide:</h2>
    <table class="one">
        <tr>
            <th>Roll Number</th>
            <th>Name</th>
        </tr>
        <tr>
            <td>1</td>
            <td></td>
        </tr>
        <tr>
            <td>2</td>
            <td>X_Y_Z</td>
        </tr>
    </table>
    <br>
    <br>
    <h2>empty cells show:</h2>
    <table class="two">
        <tr>
            <th>Roll Number</th>
            <th>Name</th>
        </tr>
        <tr>
            <td>1</td>
            <td></td>
        </tr>
        <tr>
            <td>2</td>
            <td>X_Y_Z</td>
        </tr>
    </table>
</body>
  
</html>

Producción:

Diseño de tabla : la propiedad de diseño de tabla se utiliza para configurar el algoritmo de diseño utilizado para la tabla.

Sintaxis:

table-layout:auto/fixed;

Ejemplo 6: este ejemplo describe la tabla CSS aplicando la propiedad de diseño de tabla.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <style>
    body {
        text-align: left;
    }
      
    h1 {
        color: green;
    }
      
    table.one {
        width: 80px border-collapse: separate;
        border-spacing: 10px;
        
        /* Layout of table is auto. */
        table-layout: auto;
    }
      
    table.two {
        width: 80px border-collapse: separate;
        border-spacing: 10px;
        /* Layout of table is fixed. */
        table-layout: fixed;
    }
      
    table,
    td,
    th {
        border: 1.5px solid blue;
        width: 80px;
    }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2>auto table layout:</h2>
    <table class="one">
        <tr>
            <th>Roll Number</th>
            <th>Name</th>
        </tr>
        <tr>
            <td>1</td>
            <td>A_B_C_D_E_F_G_H_I_J_K_L_M_N_O_P</td>
        </tr>
        <tr>
            <td>2</td>
            <td>X_Y_Z</td>
        </tr>
    </table>
    <br>
    <br>
    <h2>fixed table layout:</h2>
    <table class="two">
        <tr>
            <th>Roll Number</th>
            <th>Name</th>
        </tr>
        <tr>
            <td>1</td>
            <td>A_B_C_D_E_F_G_H_I_J_K_L_M_N_O_P</td>
        </tr>
        <tr>
            <td>2</td>
            <td>X_Y_Z</td>
        </tr>
    </table>
</body>
  
</html>

Producción:

Navegadores compatibles: los navegadores compatibles con Tables

  • Google Chrome
  • Borde
  • Mozilla Firefox
  • Ópera
  • Safari

Publicación traducida automáticamente

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *