¿Cómo definir la cantidad de columnas que debe abarcar una celda usando HTML5?

Este artículo le mostrará cómo se puede hacer que una columna abarque varias celdas. Esto se hace usando el atributo colspan cuando se usa la etiqueta <td> . Esto permite que la celda de una sola tabla abarque el ancho de más de una celda o columna. Proporciona una funcionalidad similar a las funciones de «combinar celdas» en programas de hojas de cálculo como Excel.

Sintaxis:

<td colspan = "value">table content...</td>

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <style>
        body {
            text-align: center;
        }
  
        h1 {
            color: green;
        }
  
        table,
        tbody,
        td {
            border: 1px solid black;
            border-collapse: collapse;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <h2>
        How to define the number of
        columns a cell should span
        using HTML5?
    </h2>
  
    <table>
  
        <!-- The <tr> tag starts here -->
        <tr>
            <th>Name</th>
            <th>User ID</th>
        </tr>
        <tr>
            <td>Anmol</td>
            <td>345</td>
        </tr>
        <tr>
            <td>Priya</td>
            <td>567</td>
        </tr>
  
        <!-- The last row -->
        <tr>
            <!-- This td will span two 
                columns, that is a single 
                column will take up the 
                space of 2 -->
            <td colspan="2">
                Sumit: 6574
            </td>
        </tr>
    </table>
</body>
  
</html>

Producción:

Navegadores compatibles:

  • Google Chrome
  • explorador de Internet
  • Firefox
  • Ópera
  • Safari

Publicación traducida automáticamente

Artículo escrito por ManasChhabra2 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 *