Tablas en HTML.

1. Colegio Bucerias.
Frida Leyva Terán.
Ing. Azucena
Cervantes Ponce.
Jueves 28 de Mayo,
2015.
1°A

2. Las tablas se usan con profusión
en las páginas Web, muchas
veces debido a que son el único
instrumento con el que se
cuenta, para asegurarse que las
cosas estarán en su sitio.
Para definir una tabla se usan
las etiquetas:
<TABLE> y </TABLE> son las
etiquetas donde está contenida
la tabla
<TR> y </TR> son las etiquetas
que indican el comienzo y fin de
una fila (<th> y </th> si es una
fila de cabecera)
<TD> y </TD> señalan una
celda.

3. Las
etiquetas <tr> (del
inglés "table row")
definen cada fila de
la tabla y encierran
todas las columnas.

4. Por último, la
etiqueta <td>
(del inglés"table
data cell")
define cada una de
las columnas de
las filas, aunque
realmente HTML
no define
columnas
sino celdas de
datos.

5. Para insertar un borde tienes que insertar esta etiqueta. <table
border=1><td> Aqui va el contenido de la tabla, texto, imágenes,
etc.</td></table>
El número uno se refiere al tamaño del borde de la tabla. Si aumentas
el número el borde será mas grueso y si escribes 0 la tabla no mostrará
borde alguno.

6. Para crear una tabla invisible solo se ocupan las etiquetas:
<table>, <tr>,<td>

7. Esta etiqueta de HTML sirve para crear celdas que se extienden varias columnas.
Se indica el numero de columnas necesarias para una celda. Por lo general, para
una celda sólo se necesita una columna, y en ese caso no es necesario indicar
ningún valor, pero si una celda se ha de extender.
Los valores válidos para esta etiqueta son los números enteros. El
número debe contener al menos una cifra entre 0 y 9
Ejemplo:
<table border="1" bordercolor="#FF0000">
<tr>
<td>celda 1</td>
<td>celda 2</td>
</tr>
<tr>
<td colspan="2">celda 3</td>
</tr>
</table>
y el resultado es:

8. Este atributo de HTML se encarga de unir celdas repartidas por varias líneas. Con
ayuda de este atributo se pueden unir varias celdas de una tabla repartidas por
varias líneas. Esta opción es necesaria por ejemplo, cuando una de las celdas de la
tabla debe ser más alta que las demás. En lugar de definir varias celdas, indique
una sola celda y asígnele la etiqueta ROWSPAN. Como valor, transmítale al atributo
el número de líneas que desea unir. El uso de este atributo es opcional. Los valores
válidos para este atributo son todos los números enteros. El número debe contener
al menos una de las cifras entre 0 y 9 (="9").
Por Ejemplo:
<table border="1">
<tr>
<td rowspan="2" bordercolor="#FF0000" width="100">A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
<tr>
<td>E</td>
<td>D</td>
</tr>

10. Este atributo nos permite especificar la distancia entre
el margen interior de la celda y su contenido.

11. Este atributo permite determinar o especificar la distancia entre las celdas
y entre las celdas y el margen exterior de la tabla. El valor de este atributo
se mide en pixeles y es válido para todas las celdas.

12. Para ponerle color a una celda utilizamos el atributo bgcolor=" aquí
ponemos el nombre o número del color"
EJEMPLO
Vamos a realizar una tabla de dos filas y dos columnas, con borde de tamaño
"1" y de largo el 50% del ancho de página. Y le ponemos a una celda fondo
rojo con el atributo bgcolor="red" y a otra fondo azul
<table border="1" cellpadding="0" cellspacing="0" width="50%">
<tr>
<td width="50%" bgcolor="red"></td>
<td width="50%" bgcolor="blue"></td>
</tr>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
</table>

13. Solo hay que poner dentro de la etiqueta de la celda la etiqueta correspondiente a
una imagen.
Ejemplo con una imagen:
<TABLE BORDER=2>
<TR><TD><IMG SRC="imagenes/babe.gif"></TD></TR>
</TABLE>

14. Normalmente, el contenido de una celda está alineado a la izquierda. Pero
se puede cambiar esto añadiendo dentro de la etiqueta de la celda los
siguientes atributos:
<TD ALIGN=CENTER> Al centro </TD>
<TD ALIGN=RIGHT> A la derecha </TD>

15. Plantea. Tablas. Recuperado el Martes 26 de Mayo, 2015. De:
http://platea.pntic.mec.es/~abercian/guiahtml/tablas.htm
Librosweb. Tablas básicas. Recuperado el Martes 26 Mayo, 2015. De:
http://librosweb.es/libro/xhtml/capitulo_7/tablas_basicas.html
Blogspot. Tablas. Recuperado el Martes 26 de Mayo, 2015. De:
http://daleclick.blogspot.mx/2005/02/tablas.html
Tripod. Colspan. Recuperado el Martes 26 de Mayo, 2015. De:
http://jcarocota.tripod.com/Colspan.html
Tripod. Rowspand. Recuperado el Martes 26 de Mayo, 2015. De:
http://jcarocota.tripod.com/Rowspan.html
Blogspot. Atributos “cellspacing” y “cellpadding”. Recuperado el Martes 26 de
Mayo, 2015. De: http://bobuu.blogspot.com/2010/09/83-html-tablas-atributos-
cellspacing-y.html

16. Aulafacil. Color de tablas. Recuperado el Martes 26 de Mayo,
2015. De:
http://www.aulafacil.com/cursos/l19275/informatica/crear-
paginas-web/html/color-de-las-tablas
Todoele. Estructura de una tabla. Recuperado el Martes 26 de
Mayo, 2015. De:
http://www.todoele.net/DukeWorkshopHtml/html1/tablas.htm