Tablas en HTML.Colegio Bucerias.

Frida Leyva Terán.Ing. Azucena

Cervantes Ponce.Jueves 28 de Mayo,

2015.1°A

¿Qué es una tabla en código HTML?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.

¿Qué significa TR?

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

¿Qué significa TD?

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.

¿Cómo insertas un simple borde en tu tabla?

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.

Código para colocar una tabla invisible.

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

¿Qué es “Colspand”?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: 

¿Qué es “Rowspand”?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>

Escribe un código usando las dos etiquetas

¿Qué es “cellpadding”?Este atributo nos permite especificar la distancia entre el margen interior de la celda y su contenido. 

¿Qué es “cellspacing”?

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.

¿Cómo insertas color de fondo en una celda de una tabla?Para ponerle color a una celda utilizamos el atributo bgcolor=" aquí ponemos el nombre o número del color"

EJEMPLOVamos 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> 

¿Cómo insertas una imagen de fondo en una tabla?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>

¿Cómo alineas es contenido de tu tabla?

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>

APAPlantea. 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

APAAulafacil. 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