Saltar al contenido

Atributo colspan de HTML

El atributo colspan de HTML especifica cuántas columnas debe abarcar una celda de tabla. El valor debe ser un número entero positivo. Este atributo permite que una sola celda de tabla abarque el ancho de más de una columna o celda. Tiene la misma funcionalidad que "combinar celdas" en Excel.

Puedes usar el atributo colspan en los elementos <td> y <th>.

Cuando el atributo colspan se usa en la etiqueta <td>, determina el número de celdas estándar que debe abarcar. Cuando se usa en la etiqueta <th>, el atributo colspan especifica el número de celdas de encabezado que debe abarcar.

Sintaxis

Sintaxis del atributo colspan de HTML

html
<tag colspan="value">&lt;/tag&gt;

Ejemplo del atributo colspan de HTML usado en el elemento <td>:

Ejemplo del atributo colspan de HTML usado en el elemento <td>

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <th>Month</th>
        <th>Salary</th>
      </tr>
      <tr>
        <td>March</td>
        <td>$100</td>
      </tr>
      <tr>
        <td>April</td>
        <td>$150</td>
      </tr>
      <tr>
        <td colspan="2">Total: $250</td>
      </tr>
    </table>
  </body>
</html>

Ejemplo del atributo colspan de HTML usado en el elemento <th>:

Ejemplo del atributo colspan de HTML usado en el elemento <th>

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <th colspan="2">Month and Date</th>
      </tr>
      <tr>
        <td>January</td>
        <td>15</td>
      </tr>
      <tr>
        <td>February</td>
        <td>23</td>
      </tr>
    </table>
  </body>
</html>

Práctica

¿Cuál es el propósito principal del atributo colspan de HTML?

¿Te resulta útil?

Vista previa dual-run — compárala con las rutas Symfony en producción.