Tablas

 

Tablas

HTML nos va a permitir la inclusión de cualquiera de los elementos de nuestra página (texto, imágenes, hiperenlaces, listas, etc.), dentro de una tabla. Gracias a lo cual conseguiremos dar una mayor y mejor estructuración a los contenidos de nuestros documentos. Además, la definición de las tablas en HTML es muy abierta, pudiendo en cualquier momento redimensionar la tabla, es decir, cambiar su número de filas o de columnas, cambiar el tamaño de alguna de sus celdas, etc. La etiqueta que nos va a permitir la definición de tablas es <TABLE> </TABLE>.

El formato general de la etiqueta sin ningún argumento, es el siguiente:

<TABLE>

  <TR >

    <TH>Contenido de la celda </TH>

    <TD>Contenido de la celda </TD>

  </TR>

</TABLE>

{TR: Table Row} {TH: Table Header} {TD: Table Data}

Vamos ahora a analizar lo distintos argumentos que componen las etiquetas de la tabla, analizándolos desde lo general (la definición de la tabla), hasta lo específico (la definición de las celdas):

1. Definición de la tabla: <TABLE>.

 

<TABLE border="n" width="n ó %"height="n ó %" >

...... Contenido ......

</TABLE>

 

·         width="n ó %". Indica la anchura de la tabla en puntos o en % en función del acho de la ventana del visualizador. Si no indicamos este argumento, el ancho de la tabla se ajustará al tamaño del contenido de las celdas.




 

 

1.       Definición de las filas de la tabla: <TR>

 

<TR >

 

Ejemplo

 


 

 

2.        Definición de las celdas de la tabla: <TH> ó <TD>

 

<TH ó TD width="n" rowspan="n" colspan="n">

 

la etiqueta <TH> la usaremos para crear celdas de tipo cabecera y la etiqueta <TD> para la creación de celdas de datos. Ejemplo

 




·         width="n ó %". Indica el ancho de la celda en puntos o en % en función del tamaño de la tabla.

·         rowspan="n". Con este argumento podemos lograr que una celda concreta abarque más de una fila, en el ejemplo siguiente la celda abarca 2 filas



·         colspan="n". Con este argumento podemos lograr que una celda se expanda a más

de una columna.



El siguiente es un ejemplo más completo sobre el tema



Comentarios

Entradas populares de este blog

CSS

Repaso de etiquetas HTML

Actividad 11