PROGRAMACIÓN HTML I

SEMANA 7
Tablas

Todos los derechos de autor son de la exclusiva propiedad de IACC o de los otorgantes de sus licencias. No está
permitido copiar, reproducir, reeditar, descargar, publicar, emitir, difundir, poner a disposición del público ni 1
ESTE
utilizarDOCUMENTO
los contenidos paraCONTIENE LAdeSEMANA
fines comerciales 7
ninguna clase.
 2
ESTE DOCUMENTO CONTIENE LA SEMANA 7
ÍNDICE

TABLAS ................................................................................................................................................ 4
OBJETIVOS ESPECÍFICOS ........................................................................................................................... 4
INTRODUCCIÓN ...................................................................................................................................... 4
1. CREAR TABLAS ............................................................................................................................. 5
1.1. BORDES................................................................................................................................ 6
1.2. MANEJO DE COLUMNAS ..................................................................................................... 9
1.3. MANEJO DE FILAS .............................................................................................................. 10
1.4. OPCIONES DE CELDAS ....................................................................................................... 11
2. TABLAS ANIDADAS .................................................................................................................... 13
2.1. DISEÑO DE TABLAS ............................................................................................................ 13
2.2. PROCESO DE ANIDACIÓN .................................................................................................. 14
COMENTARIO FINAL.......................................................................................................................... 15
REFERENCIAS........................................................................................................................................ 16

3
ESTE DOCUMENTO CONTIENE LA SEMANA 7
TABLAS

OBJETIVOS ESPECÍFICOS
 Comprender el uso e importancia de tablas dentro de una página web.
 Utilizar las funciones de formateo de columnas, filas y celdas al interior de una página
web.
 Comprender el proceso de anidación de tablas aplicando sus funciones al interior de una
página web.

INTRODUCCIÓN
A lo largo de la asignatura se han explorado diversos elementos que pueden emplearse en HTML
para lograr crear páginas web de acuerdo a lo que se tiene pensado.

Esta semana es el turno de conocer un elemento en HTML llamado tablas. Al hablar de una tabla
puede venir a la mente una estructura conformada por filas y columnas, para HTML resulta igual,
sin embargo en este lenguaje el uso de estas reviste suma importancia ya que permite la
presentación de la información de una mejor forma.

A continuación se conocerán las diferentes funciones que permitirán configurar las tablas a utilizar
dentro de una página web.

4
ESTE DOCUMENTO CONTIENE LA SEMANA 7
 1. CREAR TABLAS

HTML posee un elemento que permite tabular los datos en una página. Este elemento es <table>

Según Equipo Vértice (2009), una tabla está compuesta por filas (horizontales) y columnas
(verticales).

Fuente: http://www.htmlpoint.com/guida/guida_tabelle_2.gif

El elemento <table> inicia y termina con la definición de una tabla; luego, cada fila que se crea será
obtenida mediante el uso del elemento <tr>. Finalmente, dentro de la etiqueta del inicio y fin del
elemento <tr> se definirán las celdas que componen las columnas de la fila con el elemento <td>.

Así por ejemplo se obtendrá la siguiente tabla definida en HTML:

Fuente: material elaborado para esta asignatura.

5
ESTE DOCUMENTO CONTIENE LA SEMANA 7
 1.1. BORDES

Por defecto, los bordes de una tabla no se despliegan en el navegador, a no ser que se modifique
el atributo border.

Por ejemplo:

Fuente: material elaborado para esta asignatura.

Con un valor 1 para border aparecen bordes visibles:

Fuente: material elaborado para esta asignatura.

6
ESTE DOCUMENTO CONTIENE LA SEMANA 7
A medida que se aumenta el valor (medido en píxeles) se engrosa la fila que bordea la tabla.

Fuente: material elaborado para esta asignatura.

Existen características que se deben tomar en cuenta cuando se diseña una tabla, tal como son el
título que esta tendrá y los encabezados de columnas. A continuación se explica cada uno de ellos:

TÍTULO PARA UNA TABLA: mediante el elemento <caption> se puede establecer un título para
la tabla, tal como se observa a continuación:

7
ESTE DOCUMENTO CONTIENE LA SEMANA 7
 Fuente: material elaborado para esta asignatura.

TABLAS CON ENCABEZADOS: para establecer un título a cada columna de la tabla, se utiliza la
etiqueta <th>:

Fuente: material elaborado para esta asignatura.

8
ESTE DOCUMENTO CONTIENE LA SEMANA 7
El Equipo Vértice (2009) expone que existen otros atributos para el elemento <table>, los cuales se
exponen a continuación:

 cellspacing: corresponde al espacio entre las celdas de la tabla.

 cellpadding: corresponde al espacio entre el borde de la celda y su contenido.
 bordercolor: es el color del tipo RGB que se le asignará al borde de la tabla.

A continuación se observa un ejemplo del uso de cellspacing, cellpadding y bordercolor:

Fuente: material elaborado para esta asignatura.

1.2. MANEJO DE COLUMNAS

Las columnas de una tabla no son generadas directamente, sino que cada elemento de la celda
<td> que se encuentra presente en varias filas (elementos <tr>) conformará una columna
completa de la tabla.

A continuación se presenta un ejemplo del manejo de columnas:

9
ESTE DOCUMENTO CONTIENE LA SEMANA 7
 Fuente: material elaborado para esta asignatura.

De igual manera, el Equipo Vértice (2009) especifica que algunos atributos para el elemento <td>
son:

align Justifica el texto de la celda del mismo modo que si fuese el de

un párrafo.
valign Permite alinear verticalmente en contenidos de una celda o
fila, para que el texto aparezca arriba (top), en el centro
(middle) o abajo (bottom).
bgcolor Da color de fondo a una celda o fila seleccionada.
bordercolor Define el color del borde.

1.3. MANEJO DE FILAS

El Equipo Vértice (2009) explica que algunos atributos comunes aplicados al elemento de fila <tr>
son los siguientes:

align Justifica el texto de la celda del mismo modo que si fuese el de

un párrafo.
valign Permite alinear verticalmente en contenidos de una celda o
fila, para que el texto aparezca arriba (top), en el centro
(middle) o abajo (bottom).
bgcolor Da color de fondo a una celda o fila seleccionada.
bordercolor Define el color del borde.

10
ESTE DOCUMENTO CONTIENE LA SEMANA 7
En el ejemplo a continuación se ha alineado a la derecha el contenido de una de las filas y una de
las celdas:

Fuente: material elaborado para esta asignatura.

1.4. OPCIONES DE CELDAS

Según el Equipo Vértice (2009), otros atributos aplicados al elemento para celda <td> son:

background Define una imagen de fondo para una celda.

height Define la altura de la celda en píxeles o porcentaje.
width Define la anchura de la celda en píxeles o porcentaje.
colspan Expande una celda horizontalmente, es decir, se especifica
cuántas columnas abarcará la celda, lo que sería equivalente a
una combinación de celdas.
rowspan Expande una celda verticalmente.

A continuación se presenta un ejemplo en el cual se han combinado las tres celdas de una fila en
una sola que se expande a lo ancho de ella.

11
ESTE DOCUMENTO CONTIENE LA SEMANA 7
 Fuente: material elaborado para esta asignatura.

A continuación se puede observar en este ejemplo la combinación de atributos para el manejo de

filas y para el manejo de celdas:

Fuente: material elaborado para esta asignatura.

El resultado es el siguiente:

Fuente: material elaborado para esta asignatura.

12
ESTE DOCUMENTO CONTIENE LA SEMANA 7
 2. TABLAS ANIDADAS

Es posible anidar una tabla dentro de otra, tal como se presenta en el siguiente ejemplo:

Fuente: material elaborado para esta asignatura.

No es recomendable para efectos de la optimización y claridad del código HTML la anidación de

más tres niveles, siendo una posibilidad para estos casos la utilización de la opción de combinación
de celdas.

2.1. DISEÑO DE TABLAS

Con los atributos vistos hasta ahora es posible formatear el diseño de las tablas, cambiar atributos
como los colores de fondo y bordes, ancho de bordes, alineación, espacios entre el borde y el
contenido de la celda, entre otros. A continuación se muestra un ejemplo en el cual se utilizan en
forma paralela varios de los elementos vistos esta semana:

Fuente: material elaborado para esta asignatura.

Para cambiar los atributos como tipo de fuente o color de un texto que se encuentra dentro de
una tabla, se debe utilizar el elemento <font> visto anteriormente. De igual manera se podrá

13
ESTE DOCUMENTO CONTIENE LA SEMANA 7
incrustar imágenes dentro de una celda con el atributo <img>, tal como se vio en ejemplos
anteriores.

2.2. PROCESO DE ANIDACIÓN

Para anidar una tabla dentro de otra, solo se debe respetar la cohesión del elemento <table>, tal
como se muestra en el siguiente ejemplo:

Fuente: material elaborado para esta asignatura.

14
ESTE DOCUMENTO CONTIENE LA SEMANA 7
COMENTARIO FINAL
Durante esta semana se conoció acerca del manejo de tablas en HTML. Con la utilización de este
elemento es posible presentar de una manera adecuada información a través de columnas y filas.

La configuración de tablas en HTML no reviste mayor complicación. Se debe aprender a combinar

los diferentes atributos que estas poseen y de esta forma aprovechar al máximo las tablas para así
ordenar los datos de la forma más adecuada.

Semana a semana ha sido posible ir avanzando en aspectos que ayudan a diseñar una página web
de acuerdo a las necesidades que se tengan, solo basta con combinarlos adecuadamente para así
obtener la página que se quiera.

15
ESTE DOCUMENTO CONTIENE LA SEMANA 7
REFERENCIAS
Equipo Vértice (2009). Diseño básico de páginas web en HTML. España: Editorial Vértice.

PARA REFERENCIAR ESTE DOCUMENTO, CONSIDERE:

IACC (2016). Tablas. Programación HTML I. Semana 7.

16
ESTE DOCUMENTO CONTIENE LA SEMANA 7
 17
ESTE DOCUMENTO CONTIENE LA SEMANA 7