Blog de Daiyiro

#BlogDeDaiyiro es sobre todo Bricolajes de Electrónica/Informática. ¡^-^¡

LO NUEVO:

12.10.13

9 - Edición En HTML - Tablas

TABLAS

Las tablas nos permiten representar cualquier elemento de nuestra página (texto, listas, imágenes, etc...) en diferentes filas y columnas separadas entre si.



Es una herramienta muy útil para "ordenar" contenidos de distintas partes de nuestra página. La tabla se define mediante la directiva <TABLE></TABLE>. 

Los parámetros opcionales de esta directiva son:


border = num.
Indica el ancho del borde de la tabla en puntos.
cellspacing = num
Indica el espacio en puntos que separa las celdas que están dentro de la tabla.
cellpadding = num
Indica el espacio en puntos que separa el borde de cada celda y el contenido de esta.
width = num ó %
Indica la anchura de la tabla en puntos o en porcentaje en función del ancho de la ventana del visor. Si no se indica este parámetro, el ancho se adecuará al tamaño de los contenidos de las celdas.
height = num ó %
Indica la altura de la tabla en puntos o en porcentaje en función del alto de la ventana del visor. Si no se indica este parámetro, la altura se adecuará a la altura de los contenidos de las celdas.
Para definir las celdas que componen la tabla se utilizan las directivas <TD> y <TH>. <TD> indica una celda normal, y <TH> indica una celda de "cabecera", es decir, el contenido será resaltado en negrita y en un tamaño ligeramente superior al normal.

Los parámetros opcionales de ambas directivas son :
align = LEFT / CENTER / RIGHT / JUSTIFY
Indica como se debe alinear el contenido de la celda, a la izquierda (LEFT), a la derecha (RIGHT), centrado (CENTER) o justificado (JUSTIFY).
valign = TOP / MIDDLE / BOTTOM
Indica la alineación vertical del contenido de la celda, en la parte superior (TOP), en la inferior (BOTTOM), o en el centro (MIDDLE).
rowspan = num/dt>
Indica el número de filas que ocupará la celda. Por defecto ocupa una sola fila.
colspan = num
Indica el número de columnas que ocupará la celda. Por defecto ocupa una sola columna.
width = num ó %
Indica la anchura de la columna en puntos o en porcentaje en función del ancho de la ventana del visor. Si no se indica este parámetro, el ancho se adecuará al tamaño de los contenidos.



Este parámetro solo funciona en los navegadores modernos.
Para indicar que acaba una fila de celdas se utiliza la directiva <TR>. A continuación mostraremos un ejemplo de una tabla que contiene solo texto. Como se indicó anteriormente el contenido de las celtas puede ser cualquier elemento de HTML, un texto, una imagen, un Hyperenlace, una Lista, etc...



Ejemplo
<TABLE border = 4 cellspacing = 4 cellpadding = 4 width =80%>
<TH align = center>Buscadores
<TH align = center colspan = 2>Otros Links
<TR>
<TD align = LEFT>Yahoo
<TD align = LEFT>Microsoft
<TD align = LEFT>IBM
<TR>
<TD align = LEFT>Infoseek
<TD align = LEFT>Apple
<TD align = LEFT>Digital
</TABLE>



Se veria como
Buscadores Otros Links
Yahoo Microsoft IBM
Bing Apple Digital


Las directivas <TD> y <TH> son cerradas según el estándar de HTML, es decir que un elemento de tabla <TD> debería cerrarse con un </TD> , sin embargo los visores asumen que un elemento de la tabla, queda automáticamente "cerrado" cuando se "abre" el siguiente.


1 comentario:

  1. El tema de las tablas siempre a sido mi punto débil, creo que con este articulo me a quedado mas claro, ya se donde fallaba, Gracias Daiyiro.

    ResponderEliminar