El atributo colspan en HTML especifica el número de columnas que debe abarcar una celda. Permite que la celda de una sola tabla abarque el ancho de más de una celda o columna. Proporciona la misma funcionalidad que «combinar celdas» en un programa de hoja de cálculo como Excel.
Uso: se puede usar con los elementos <td> y <th> al crear una tabla HTML .
Valores de atributo: contiene un valor, es decir, un número que especifica el número de columnas que debe abarcar una celda.
Nota : colspan=”0″ le dice al navegador que expanda la celda hasta la última columna del grupo de columnas (colgroup).
- <td>: el atributo colspan cuando se usa con la etiqueta <td> determina el número de celdas estándar que debe abarcar.
Sintaxis:
<td colspan = "value">table content...</td>
El valor especifica el número de columnas que llena la celda. El valor debe ser un número entero.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>HTML colspan Attribute</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 6px;
text-align:center;
}
</style>
</head>
<body>
<center>
<h1 style="color: green;">GeeksforGeeks</h1>
<h2>HTML colspan Attribute</h2>
<table>
<tr>
<th>Name</th>
<th>Expense</th>
</tr>
<tr>
<td>Arun</td>
<td>$10</td>
</tr>
<tr>
<td>Priya</td>
<td>$8</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">Sum: $18</td>
</tr>
</table>
</center>
</body>
</html>
Producción:
- <th>: el atributo colspan cuando se usa con la etiqueta <th> determina el número de celdas de encabezado que debe abarcar.
Sintaxis:
<th colspan = "value">table content...</th>
El valor especifica el número de columnas que llena la celda. El valor debe ser un número entero.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>HTML colspan Attribute</title>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 6px;
text-align: center;
}
</style>
</head>
<body>
<center>
<h1 style="color: green;">GeeksforGeeks</h1>
<h2>HTML colspan Attribute</h2>
<table>
<tr>
<th colspan="2">Expense</th>
</tr>
<tr>
<td>Arun</td>
<td>$10</td>
</tr>
<tr>
<td>Priya</td>
<td>$8</td>
</tr>
</table>
</center>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con el atributo colspan se enumeran a continuación:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
HTML es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA