Este documento explica los diferentes códigos HTML utilizados para crear y formatear tablas. Define etiquetas como <TABLE>, <TR>, <TD>, así como atributos como "border", "width", "colspan", "rowspan", "cellpadding", "cellspacing", "bgcolor" y "align" y cómo se usan para agregar bordes, cambiar el ancho de las celdas, combinar celdas, agregar relleno y espaciado entre celdas, colores de fondo y alineación del texto. También proporciona ejemplos de código para ilustr
2. ¿Que es una tabla en código HTML?
Las tablas son un poderosa herramienta a la hora de
mostrar y relacionar cierto tipo de información. Aún
cuando muchos sitios son construidos (por su
naturaleza) sin usar una simple tabla, existen algunas
ocasiones en que el valor de las tablas se vuelve
escencial. El atributo <TABLE> genera la tabla,
3. ¿Que significa “tr”?
<TR> es una especie de "salto" de fila dentro de la
tabla. Indican el comienzo y fin de una fila. Ej:
4. ¿Que significa “td”?
<TD> sirve para definir los campos presentes dentro de la tabla.
He aquí cómo el diseño puede ser transformado en código y, por
tanto, en una tabla propiamente dicha:
<TABLE BORDER=1 WIDTH=300>
<TD WIDTH=100>
</TD>
<TD WIDTH=100>
</TD>
<TD WIDTH=100>
</TD>
</TABLE>
5. ¿Como insertas un simple borde en
tu tabla?
Para insertar un borde de un tabla en una página de
internet debes incluir el código que aparece a
continuación. Este puede ser modificado:
<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. Codigo para insertar una tabla
invisible
El valor se interpreta en pixeles y no admite
unidades. Si el valor es 0 o el atributo no esta
presente, los navegadores no dibujan los bordes
interiores o exteriores, haciéndolos invisibles.
Usamos unicamente la etiqueta <table>
7. ¿Que es “colspan”?
Indica el número de columnas que ocupará la celda.
Por defecto ocupa una sola columna.
10. ¿Que es “cell padding”?
Este atributo nos permite especificar la distancia entre el
margen interior de la celda y su contenido. En el caso de este
atributo, si su valor es en pixeles los cuatro bordes de la celda
deberían estar a la distancia indicada del contenido. En cambio
si el valor es un porcentaje, los bordes superior e inferior
estarán separados a una distancia porcentual del valor
disponible verticalmente y lo mismo para los bordes derecho e
izquierdo que estarán separados al porcentaje indicado del
espacio disponible horizontalmente.
11. ¿Que es “cell spacing”?
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. ¿Como insertas color de fondo en
una celda de una tabla?
Cada campo puede tener un color de fondo distinto de los
otros.Ej:
<TABLE WIDTH=300 HEIGHT=200>
<TD width=100 BGCOLOR="red">
prueba </TD>
<TD WIDTH=100 BGCOLOR="yellow">
prueba </TD>
<TD WIDTH=100 BGCOLOR="gray">
prueba </TD>
</TABLE
13. ¿Cómo insertas una imagen de fondo
en una tabla?
Cada campo puede tener un fondo distinto de los
otros.Ej:
<TABLE WIDTH=300 HEIGHT=230>
<TD BACKGROUND="fondo15.jpg">
prueba </TD>
<TD BACKGROUND="fondo26.jpg">
prueba </TD>
<TD BACKGROUND="fondo61.jpg">
prueba </TD>
</TABLE
14. ¿Cómo alineas el contenido de tu
tabla?
La colocación del texto dentro de los distintos campos <TD>
de la tabla puede ser modificada de varias maneras. Ej:
<TABLE WIDTH=300 HEIGHT=200>
<TD width=100 ALIGN=RIGHT>
prueba </TD>
<TD WIDTH=100 ALIGN=CENTER>
prueba </TD>
<TD WIDTH=100 ALIGN=LEFT>
prueba </TD>
</TABLE>