TABLAS: Atributos de

tabla, Celdas, Atributos

de celda

Manejo de tablas en HTML 5

Ing. Msc. Ever Condori Torrico

Manejo de Tablas en HTML 5

Las tablas están incluidas en HTML desde sus

primeras versiones y son una forma fantástica
de mostrar datos claramente. Además, si las
construimos de forma semántica y
correctamente, es muy sencillo darle estilos
desde CSS y cambiar su diseño con unas
cuantas propiedades CSS, puesto que
mediante las etiquetas que la componen se
puede hacer referencia a cada parte de la
misma.
2
 Tablas Básicas
Una tabla puede ser sencilla o compleja, dependiendo de nuestro objetivo y la
cantidad de etiquetas o atributos a utilizar. Así pues, veamos primero
las etiquetas básicas para crear una tabla de la forma más sencilla posible:

Etiqueta Descripción

<table> Etiqueta contenedora que tendrá en su interior toda la tabla.

<tr> Table Row. Etiqueta contenedora de cada fila de la tabla.

<td> Table Data. Cada una de las celdas de la tabla.

<th> Table Header. Cada una de las celdas de cabecera de la tabla.

La etiqueta <table> sería el elemento que contendría todos los elementos de la

tabla, mientras que <th> y <td> se utilizarían para cada uno de los campos de la
tabla (cabecera y celda respectivamente). Cada vez que se quisiera añadir una
nueva fila, habría que incluirlo todo dentro de una etiqueta <tr>.
3
Tablas Básicas

4
Combinar celdas en una tabla
Cada etiqueta <td> y <th> puede incluir una serie de atributos para
modificar su comportamiento o para establecer relaciones semánticas
entre celdas. Probablemente, las más interesantes
sean colspan y rowspan:

Atributo Valor Descripción

colspan número Número de columnas que la celda abarcará.
rowspan número Número de filas que la celda abarcará.
headers ids Id de los elementos <th> con los que tiene relación la celda.
scope (solo <th>) row La cabecera se aplica a alguna de las filas adyacentes.
col La cabecera se aplica a alguna de las columnas adyacentes.
rowgroup La cabecera se aplica a todas las celdas restantes de la fila.
colgroup La cabecera se aplica a todas las celdas restantes de la columna.
auto La cabecera se aplica a las celdas de forma automática.
abbr (solo <th>) nombre Abreviatura o información alternativa sobre la cabecera.

5
Etiquetas de organización de tablas
Por defecto, al crear una tabla, el navegador se encarga de crearla a medida
que va leyendo las etiquetas, por lo que la tabla se crea en el orden que se
han especificado sus elementos, de arriba a abajo. Sin embargo, podemos
utilizar una serie de etiquetas contenedoras que establecerán la zona de la
tabla donde deben aparecer su contenido:

Etiqueta Descripción
Etiqueta contenedora de la cabecera de la tabla. Parte superior de la
<thead>
tabla.

<tbody> Etiqueta contenedora del cuerpo de la tabla. Parte central de la tabla.

<tfoot> Etiqueta contenedora del pie de la tabla. Parte inferior de la tabla.

<caption> Establece un título de la tabla, independientemente de su posición.

6
Etiquetas de organización de tablas

7
Agrupando columnas en una tabla
Las tablas, al definirse en el código siguiendo una estructura
horizontal, hacen complejo el aplicar o realizar una serie de cambios a
una columna. Existe una serie de etiquetas para agrupar o seleccionar
columnas y así poder realizar tareas sobre ellas, como por ejemplo,
asociarle una clase específica o darle estilos CSS a una columna
concreta de la tabla, sin necesidad de ir celda por celda.
Para ello, utilizaremos las dos siguientes etiquetas:

Etiqueta Descripción

<colgroup> Etiqueta contenedora de columnas. Crea una agrupación de columnas.

<col> Etiqueta que representa a una columna de la tabla

8
Marco en HTML
El diseño con frames es otra forma de diseñar la
página en la cual utilizamos varios frames o
marcos, (frame: en español significa "marco") de
manera que cada uno de los frames consiste en
un archivo html distinto. La página queda dividida
en diferentes áreas, cada una de esas áreas o
frames es independiente del resto, y es en sí una
página distinta, con un archivo html distinto;
aunque las veamos todas en la misma ventana
del navegador.

9
Composición y etiquetas
o La página principal es una página en HTML, en la que
la etiqueta <body> ... </body> es sustituida por la
etiqueta <frameset> ... </frameset>.

o Dentro de la etiqueta frameset se insertan las

etiquetas <frame src="ruta_de_la_página"/>. Cada
etiqueta frame debe coincidir con una partición de la
página, y el atributo src tiene la ruta al archivo html que
irá en esa parte de la página. Los archivos html pueden
ser tanto internos (del propio sitio web), como externos
(de otros sitios web).

10
Composición y etiquetas
Para hacer la partición de la página, la
etiqueta frameset debe llevar el atributo cols (columnas)
o rows (filas), para partir la página en varias columnas o
en varias filas. La etiqueta frameset solo admite uno de
estos dos atributos, por lo que debemos decidir cómo
hacer la partición principal de la página, si en filas o
columnas. Si queremos poner filas y columnas a la vez lo
haremos anidando etiquetas frameset
El numero de filas (o de columnas) y el espacio que van a
ocupar, lo indicaremos en el valor del
atributo rows (o cols), indicando el espacio ocupado por
cada una de ellas, separados por comas, ejemplo:
<frameset rows="20%,65%,15%"> 11
Composición y etiquetas
Esta sería una página partida horizontalmente en tres
partes, la primera con un 20% de la pantalla, la segunda
con un 65%, y la tercera con un 15%. Ademas de en
tantos por ciento las medidas de los frames pueden
expresarse en píxeles, para ello sólo hay que escribir el
número de píxeles (sin "px" detrás). También podemos
dejar una columna o fila sin definir el tamaño, para que
ocupe todo el resto de la pantalla que no ocupan las
demás, en ese caso, en lugar de porcentaje o número
escribimos un asterisco ( * ). Ejemplo:
<frameset cols="200,*,200">
Este ejemplo indica una partición con dos columnas a
derecha e izquierda de 200px cada una, y una columna
central que ocupa el resto de la página. 12
Ejemplo de frame
Vamos a hacer un ejemplo clásico de página con
cabecera, pie de página y diseño central a tres columnas
(menú izquierdo, contenido, y lateral derecho). En
principio partiremos la página en horizontal en tres partes
(la cabecera, el cuerpo principal, y el pie de página).
<html>
<head>
<title>Diseño con frames 1</title>
</head>
<frameset rows="100,*,100">
<frame src="pagina1.html" />
<frame src="pagina2.html" />
<frame src="pagina3.html" />
</frameset>
</html> 13
 EJERCICIOS

Diseñar un sito web aplicando todas las herramientas

adquiridas en html 5.
Ejemplo diseño de frame que contenga una cabecera, un
menú izquierdo un cuerpo principal y un pie de pagina.

14