Scribd
Cargar
22 vistas14 páginas

Tipos y Ejemplos de Tablas en HTML

Este documento explica cómo crear y formattear tablas en HTML. Las tablas en HTML se componen de las etiquetas <table>, <tr>, y <td>. La etiqueta <table> define una tabla completa, <tr> define una fila dentro de la tabla, y <td> define una celda dentro de una fila. El documento también explica atributos como align, valign, colspan y rowspan que permiten alinear y combinar celdas. Finalmente, presenta ejemplos de código HTML para ilustrar cómo crear una tabla básica.

Cargado por

NoX
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 PPT, PDF, TXT o lee en línea desde Scribd
22 vistas14 páginas

Tipos y Ejemplos de Tablas en HTML

Este documento explica cómo crear y formattear tablas en HTML. Las tablas en HTML se componen de las etiquetas <table>, <tr>, y <td>. La etiqueta <table> define una tabla completa, <tr> define una fila dentro de la tabla, y <td> define una celda dentro de una fila. El documento también explica atributos como align, valign, colspan y rowspan que permiten alinear y combinar celdas. Finalmente, presenta ejemplos de código HTML para ilustrar cómo crear una tabla básica.

Cargado por

NoX
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 PPT, PDF, TXT o lee en línea desde Scribd

5.

Tablas
 HTML nos permite construir tablas sencillas
 Se supone que las tablas solo deben utilizarse para
visualizar datos ([Link]. una tabla de precios, una lista de
productos, etc.)
 Es muy habitual utilizarlas
para maquetar el documento HTML
 Las tablas HTML manejan
tres elementos concretos:
 Las tablas
 Las filas
 Las celdas
1
5. Tablas

 Tabla
<table> … </table>
 Fila
<tr> … </tr>
 Celda
<td> … </td>

2
5. Tablas:La etiqueta <table>
<table  align=“alineación”
align=“alineación”  Indica la alineación de la tabla
dentro del documento HTML
width=“pixels|porcentaje”
(puede ser center, left, o
border=“pixels” right)
cellpadding=“pixels”  width=“pixels|porcentaje”
cellspacing=“pixels”  Indica la anchura absoluta
… (pixels) o relativa (porcentaje) de
la tabla
>
 border=“pixels”
filas  Indica el grosor, en pixels, de los
</table> bordes de la tabla
3
5. Tablas:La etiqueta <table>
<table  cellpadding=“pixels”
…  Indica el “acolchamiento” de las
background=“imagen” celdas. Es decir, la distancia (en
bgcolor=“color fondo” pixels) entre el borde de la celda
y el texto
border=“pixels”
bordercolor=“color  cellspacing=“pixels”
borde”  Indica la distancia, en pixels,
entre celdas
cellpadding=“pixels”
cellspacing=“pixels”
>
filas
</table> 4
5. Tablas: Ejemplos
<table . . . >
<tr><th>Año</th><th>ventas</th></tr>
<tr><td>1999</td><td>15000000</td></tr>
<tr><td>2000</td><td>17500000</td></tr>
</table>

5
5. Tablas:La etiqueta <tr>

 align=“alineación”
<tr  Indica la alineación horizontal de
atributos comunes todas las celdas que contiene la
fila. Puede ser center, left o
align=“alineación” right.

valign=“alineación”  valign=“alineación”
 Indica la alineación vertical de
> todas las celdas que contiene la
fila. Puede ser top, middle,
celdas bottom o baseline.
</tr>

6
5. Tablas:La etiqueta <td>

<td  align=“alineación”
align=“alineación”  Indica la alineación horizontal
valign=“alineación” del texto. Puede ser center,
left o right.
colspan=“num_celdas”
 valign=“alineación”
rowspan=“num_celdas”  Indica la alineación vertical del
atributos comunes texto. Puede ser top, middle,
> bottom o baseline.
contenido_celda
</td>
7
5. Tablas:La etiqueta <td>
 rowspan y colspan
 Estos atributos nos permite definir celdas que
abarcan más de una fila o columna
 Si rowspan > 1, entonces la celda actual
abarcará (hacia abajo) más de una fila
 Si colspan > 1, entonces la celda actual
abarcará (hacia la derecha) más de una
columna.

8
[Link]: La etiqueta <td>

9
[Link]: La etiqueta <td>

10
[Link]: Otras etiquetas
 <th>  Igual que <td>, pero para cabeceras
 <caption align="top|bottom">  Para poner
título encima o debajo de la tabla
 <col> y <colgroup>  Permiten hacer una
agrupación lógica de columnas
 <thead> , <tbody> , <tfoot>  Permiten hacer
una agrupación lógica de filas en cabecera,
cuerpo y pie de tabla (respectivamente)

11
Práctica

12
Práctica 10
1.- Crear un documento html (doc5_1).html para las
tablas:
l:
 1.- Crear la siguiente taba:

13
Práctica

14

También podría gustarte