Scribd
Cargar
28 vistas3 páginas

TABLAS

Las tablas en HTML se utilizan para organizar datos en filas y columnas, y no deben ser usadas para maquetar páginas web. Se pueden unificar celdas utilizando los atributos 'rowspan' y 'colspan', y se puede añadir un título a la tabla con la etiqueta 'caption'. Es importante usar un espacio en blanco en celdas vacías para asegurar una correcta visualización en navegadores.

Cargado por

Cristian Franz Cano Pérez
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 PDF, TXT o lee en línea desde Scribd
28 vistas3 páginas

TABLAS

Las tablas en HTML se utilizan para organizar datos en filas y columnas, y no deben ser usadas para maquetar páginas web. Se pueden unificar celdas utilizando los atributos 'rowspan' y 'colspan', y se puede añadir un título a la tabla con la etiqueta 'caption'. Es importante usar un espacio en blanco en celdas vacías para asegurar una correcta visualización en navegadores.

Cargado por

Cristian Franz Cano Pérez
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 PDF, TXT o lee en línea desde Scribd

TABLAS

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 ) como su contenido. Esto hará que tu página se visualice correctamente, ya
que algunos navegadores tienen problemas representando celdas vacías. Ejemplo: <td> </td>
Veamos un ejemplo. Crea un archivo [Link] con este código y visualízalo:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo del uso de tablas</title>
</head>
<body>
<table border="2px">
<tr>
<td>Celda1</td>
<td>Celda2</td>
<td>Celda3</td>
</tr>
<tr>
<td>Celda4</td>
<td>Celda5</td>
<td>Celda6</td>
</tr>
</table>
</body>
</html>
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 VERTICAL CON ROWSPAN
En este caso, para la unificación vertical de celdas, utilizaremos el atributo de celda “rowspan”.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo del uso de tablas</title>
</head>
<body>
<table border="2px">
<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>Campo9</td>
</tr>
</table>
</body>
</html>
TÍTULO DE LAS TABLAS CON LA ETIQUETA CAPTION
Mediante la etiqueta 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.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo del uso de tablas</title>
</head>
<body>
<!--- comentarios -->
<table border="2px">
<caption>Título de la tabla</caption>
<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>Campo9</td>
</tr>
</table>
</body>
</html>

También podría gustarte