7/25/2019 Clase 013

1/10

HTML - Tablas

7/25/2019 Clase 013

2/10

TABLAS EN HTML

Las tablas son la herramienta perfectapara organizar datos de maneraordenada, pero su utilidad no se queda

ah, ya que escondiendo los bordespodremos usarlas tambin para definir laestructura de las pginasPara crear las tablas ser necesario usar

la etiqueta: TABLE, que significa, eningls, tabla. sta etiqueta consta deinstrucci!n de inicio, , e

instrucci!n de fin, . ntreambas debemos introducir otras tresetiquetas, que definirn la estructura de

7/25/2019 Clase 013

3/10

TABLAS EN HTML

TR: La etiqueta Table Row nos permitir

insertar filas en la tabla.

La tabla tendr tantas filas como apariciones

de esta etiqueta haya entre y

. La instrucci!n de inicio "

marca el comien#o de la l$nea" la instrucci!n de

fin" % marca su final. La instrucci!n de fines optati&a" si no se usa se considera que una

l$nea ha acabado cuando comien#a otra o

cuando acaba la tabla. Entre el comien#o y elfin de la l$nea debemos insertar las celdas de la

tabla.

7/25/2019 Clase 013

4/10

TABLAS EN HTML

TH: Este es el primero de los dos tipos de

celdas e'istentes en el len(ua)e *T+L. Table

*eader" ,encabe#ado de tabla-. Al i(ual que laetiqueta anterior el comien#o del encabe#ado

&iene dado por la instrucci!n de inicio" y

finali#a con la instrucci!n de fin" " o con elcomien#o de otra celda. En (eneral entre el

comien#o y el fin se suele insertar te'to" que

ser mostrado en ne(rita o subrayado y

centrado.

7/25/2019 Clase 013

5/10

TABLAS EN HTML

TD: Este es el se(undo tipo de celda de lastablas *T+L. El nombre de la etiqueta" Table

ata ,atos de tabla-" su /unci!n ser

introducir todos los datos que queramos en lasceldillas definidas de esta /orma. e hecho

podemos insertar cualquier elemento de *T+L0

im(enes" listas" te'to /ormateado e incluso

otras tablas. La di/erencia de esta celda con la

anterior es peque1a" en la prctica la di/erencia

principal es que el te'to de los encabe#ados de

tabla aparecer resaltado y centrado y el de lasceldas normales ,T- no.

7/25/2019 Clase 013

6/10

Pasos para elaborar Tablas en HTML

Para empezar crearemos una tablasencilla de dos filas y dos elementos."ayamos por pasos:

#. n primer lugar ponemos la instrucci!nde inicio y fin de la etiqueta $%&L

de'ando un espacio entre ellas parainsertar posteriormente el resto deetiquetas:

($%&L) ...*tras etiquetas... (+$%&L)#-reaci!n de tablas /$0L

7/25/2019 Clase 013

7/10

Pasos para elaborar Tablas en HTML

1. % continuaci!n insertamos las filas. Latabla que nos hemos propuesto crearconsta de dos filas. Por tanto debemosusar la etiqueta $2 dos 3eces. Lo queinsertemos en la primera 4entre lainstrucci!n de inicio y la instrucci!n defin5 ser el contenido de la primera fila y

lo que insertemos en la segunda ser elcontenido de la segunda fila:

($%&L)($2) (+$2) ($2) (+$2)(+$%&L)

7/25/2019 Clase 013

8/10

Pasos para elaborar Tablas en HTML

6. 7efinir el contenido de cada fila. la tablatiene dos columnas en cada fila debemosinsertar dos celdas en cada una. omohemos e8plicado antes, para crear una celda

debemos usar la etiqueta $7. ntre lainstrucci!n de inicio y la instrucci!n de fin deest etiqueta ser donde insertaremos el

3erdadero contenido de la tabla. n esteprimer e'emplo sencillo ser simplementete8to, pero puede ser cualquier otroelemento 9eb como imgenes o listas.

escribir el siguiente c!digo:

($2)

7/25/2019 Clase 013

9/10

Borde de las tablas

l siguiente paso en el aprendiza'e de lastablas consiste en aadirles un borde. stoes tan sencillo como aadir un nue3oatributo a la instrucci!n de inicio de la

etiqueta $%&L. l atributo del que hablamoses &*272, que significa borde en ingls.ste atributo puede tomar un 3alor en

pi8eles que representa el grosor del borde amostrar. ;i incluimos &*272 sin ning#>2epitamos el segundo de los e'emplos 3istos

antes pero aadindole un borde de grosor.

7/25/2019 Clase 013

10/10

Borde de las tablas

l siguiente paso en el aprendiza'e de lastablas consiste en aadirles un borde. stoes tan sencillo como aadir un nue3oatributo a la instrucci!n de inicio de la

etiqueta $%&L. l atributo del que hablamoses &*272, que significa borde en ingls.ste atributo puede tomar un 3alor en

pi8eles que representa el grosor del borde amostrar. ;i incluimos &*272 sin ning#>2epitamos el segundo de los e'emplos 3istos

antes pero aadindole un borde de grosor.