Scribd
Cargar
72 vistas6 páginas

Crear Tablas HTML Colspan y Rowspan

Este documento proporciona instrucciones para crear tablas HTML utilizando los elementos <table>, <tr>, <td>, <th>, así como las propiedades colspan y rowspan para unir celdas. También explica cómo agregar un título a la tabla con el elemento <caption>.

Cargado por

ZyKox Bit
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como TXT, PDF, TXT o lee en línea desde Scribd
72 vistas6 páginas

Crear Tablas HTML Colspan y Rowspan

Este documento proporciona instrucciones para crear tablas HTML utilizando los elementos <table>, <tr>, <td>, <th>, así como las propiedades colspan y rowspan para unir celdas. También explica cómo agregar un título a la tabla con el elemento <caption>.

Cargado por

ZyKox Bit
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como TXT, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 6

Crear tablas HTML. colspan y rowspan. Unir celdas: horizontal y vertical.

tr, td,
th. Caption o título (CU00719B)

Resumen: Entrega nº19 del Tutorial básico del programador web: HTML desde cero.
Codificación aprenderaprogramar.com: CU00719B

CREACIÓN DE TABLAS EN HTML

En HTML, una poderosa herramienta a la hora de mostrar cierto tipo de información


son las tablas. Hay muchos sitios que por su naturaleza no usan tablas aunque
existen algunas ocasiones en que el papel de las tablas se vuelve esencial.

El fin de las tablas es preferentemente contener datos ordenados en celdas (filas y


columnas). En principio, no deben ser usadas para crear divisiones de cara a
mostrar una página web, es decir, es preferible que una página web no esté dividida
en distintos espacios usando tablas. Para maquetar una página web y dividirla en
distintos espacios se usarán otras herramientas (capas, elementos flotantes, etc.).

Las tablas pueden ser consideradas como un grupo de filas donde cada una de ellas
contiene un grupo de celdas. Una tabla puede ser insertada en un documento HTML
usando tres elementos básicos: el elemento TABLE (estructura contenedora
principal), el elemento TR (contenedor de fila) y el elemento TD (celda).

Cuando el contenido de una celda debe ser vacío, deberías usar una espacio en
blanco (que en HTML se escribe como &nbsp;) como su contenido. Esto hará que tu
página se visualice correctamente, ya que algunos navegadores tienen problemas
representando celdas vacías. Ejemplo: <td>&nbsp;</td>

Veamos un ejemplo. Crea un archivo ejemplo.html con este código y visualízalo:

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo del uso de tablas - aprenderaprogramar.com</title>
</head>
<body>
<table border="2px"> <!-- Lo cambiaremos por CSS -->
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>
</body>
</html>
Ten en cuenta que el atributo border está deprecated o not supported por las
versiones más recientes de HTML. Más adelante veremos cómo reemplazarlo usando
técnicas CSS.

UNIFICACIÓN DE CELDAS

En algunas ocasiones, puede ser necesario unificar dos o más celdas en una sola que
pasará a ocupar el lugar de aquellas afectadas. Estas unificaciones pueden ser
llevadas a cabo con los atributos “rowspan” (para unificación vertical) y “colspan”
(para unificación horizontal).

UNIFICACIÓN HORIZONTAL CON COLSPAN

Como hemos comentado con anterioridad, para la unificación horizontal de celdas,


utilizaremos el atributo de celda “colspan”. Crea un archivo ejemplo.html con este
código y visualízalo. Recuerda que el atributo border está deprecated o not
supported y que más adelante veremos como reemplazarlo mediante el uso de CSS:

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo del uso de tablas - aprenderaprogramar.com</title>
</head>
<body>
<table border="2px"> <!-- Lo cambiaremos por CSS -->
<tr>
<td>Campo 1</td>
<td>Campo 2</td>
<td>Campo 3</td>
</tr>
<tr>
<td colspan="2">Campos 4 y 5</td>
<td>Campo 6</td>
</tr>
<tr>
<td>Campo 7</td>
<td>Campo 8</td>
<td>Campo 9</td>
</tr>
</table>
</body>
</html>

Gráficamente:
UNIFICACIÓN VERTICAL CON ROWSPAN

En este caso, para la unificación vertical de celdas, utilizaremos el atributo de


celda “rowspan”. Crea un archivo ejemplo.html con este código y visualízalo
(recuerda que el atributo border está deprecated o not supported y que más adelante
veremos como reemplazarlo mediante el uso de CSS):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo del uso de tablas- aprenderaprogramar.com</title>
</head>
<body>
<table border="2px"> <!-- Lo cambiaremos por CSS -->
<tr>
<td rowspan="3">Campo unificado</td>
<td>Campo 2</td>
<td>Campo 3</td>
</tr>
<tr>
<td>Campo 5</td>
<td>Campo 6</td>
</tr>
<tr>
<td>Campo 8</td>
<td>Campo 9</td>
</tr>
</table>
</body>
</html>

Gráficamente:

CELDAS DE ENCABEZADO

Hay dos tipos de celdas que pueden ser definidas en una tabla HTML. Una de ellas es
la celda simple (elemento TD), ya definido anteriormente, y la otra es un tipo
especial de celda (elemento TH ó table header, cabecera de tabla) que contiene
información de encabezado para un conjunto de celdas específicas.

Los navegadores representan normalmente el contenido de las celdas especiales como


texto centrado y en negrita, atributos que también pueden ser visualmente logrados
con la utilización de celdas normales (elemento TD). Entonces, ¿para que son útiles
estos encabezados? Cuando utilizamos th la celda queda definida como encabezado, no
sólo tiene el aspecto de un encabezado. Por poner un símil, no es lo mismo vestirse
de policía sin serlo, que ser policía. No es lo mismo una celda que parece un
encabezado sin estar definida como tal, que una celda definida realmente como
encabezado. Los navegadores para personas invidentes identifican este tipo de
encabezados y le dan un tratamiento especial. Además algunos motores de búsqueda
(bing, google, yahoo) dan un tratamiento distinto a este tipo de celdas, y algunos
navegadores crean efectos especiales para este tipo de celdas. Finalmente, disponer
de encabezados nos permitirá crear tablas con un diseño específico para los
encabezados. Escribe este código con tu editor de texto y comprueba sus resultados:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo del uso de tablas- aprenderaprogramar.com</title>
</head>
<body>
<table border="2px"> <!-- Lo cambiaremos por CSS -->
<tr>
<th>Alumno</th>
<th>Asignatura</th>
<th>Calificación</th>
</tr>
<tr>
<td>Juan Pérez</td>
<td>Matemáticas</td>
<td>9</td>
</tr>
<tr>
<td>Rodolfo Cárdenas</td>
<td>Francés</td>
<td>5</td>
</tr>
</table>
</body>
</html>

TÍTULO DE LAS TABLAS CON EL ELEMENTO CAPTION

Mediante el elemento caption, podemos definir el título de una tabla. Este título
debería describir de una manera breve y precisa el contenido y la naturaleza de la
tabla y es habitualmente representado en algún lugar cercano a la tabla (su
posición puede ser establecida usando CSS). El elemento caption sólo está permitido
si va justo después de la apertura de la tabla. Escribe este código y comprueba el
resultado.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo del uso de tablas - aprenderaprogramar.com</title>
</head>
<body>
<table border="2px"> <!-- Lo cambiaremos por CSS -->
<caption>Título de la tabla</caption>
<tr>
<td>Contenido 1</td>
<td>Contenido 2</td>
<td>Contenido 3</td>
</tr>
<tr>
<td>Contenido 4</td>
<td>Contenido 5</td>
<td>Contenido 6</td>
</tr>
</table>
</body>
</html>

EJERCICIO

Crea un documento con una tabla HTML que tenga la apariencia de la tabla indicada a
continuación. La primera fila debe estar compuesta por elementos de encabezado de
tabla (th). No te preocupes por el centrado de los textos, sino únicamente por que
las subdivisiones en la tabla aparezcan correctamente.

Jefe departamento

Jefe sección

Empleado

Edad empleado

Juan Alberto Chan

Martín López

Maite Suárez

55

Luis Morales

Mateo Carralde

33

Diana Rodríguez

Carlos Hernández
Alberto Fernández

62

Luis Pérez

Diego Gutiérrez

44

Para acceder a la información general sobre este curso y al listado completo de


entregas pulsa en este link: Ver curso completo.

Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com,


abiertos a cualquier persona independientemente de su nivel de conocimiento.

También podría gustarte