Los mejores cursos GRATIS © AulaFacil.com
sábado, 25 noviembre 2017 español
Síguenos
Publica tu curso
¿Cómo Funciona AulaFácil?

Las útiles tablas

Las páginas web necesitan tener los elementos que colocamos ordenados y que se mantengan ordenados en los distintos navegadores.

 

Para definir el orden o la estructura de una página web se utilizan tablas con bordes ocultos. La mayoría de las páginas importantes se estructuran utilizando tablas ocultas.

 

Vamos a realizar una tabla con los bordes visibles

 

A) Las tablas comienzan con <table> y terminan con </table>

 

B) Definimos el borde de la tabla. Las tablas que se utilizan para ordenar los elementos sulen tener bordes invisibles para los navegadores y empleamos border="0". Si queremos un borde visible asignamos otro número al atributo borde. Nosotros en el primer ejemplo vamos a utilizar un borde visible border="1"

 

C) Definimos el tamaño de la tabla. Podemos definirlo como porcentaje del ancho de la página utilizando width

 

WIDTH="100%" nos genera una tabla que ocupa todo el ancho de la página que estamos creando.

WIDTH="50%" genera una tabla con la mitad del ancho del documento que creamos.

Podemos igualmente definir el tamaño de la tabla en número de pixel

WITH="100" ahora al no poner el % serán 100 pixel de larga la tabla y no el 100% del documento

 

D) Tenemos que definir las filas que lleva la tabla

<TR> </TR>

E) Y definimos las columnas utilizando

<TD> </TD>

 

Estas instrucciones de columna las pondremos dentro de las de fila.

 

EJEMPLO

Vamos a construir una tabla con el borde visible de tamaño el 100 por 100 del ancho del documento con dos filas y tres columnas.

Por tanto utilizamos al principio el "tag" <table> y al final </table>.

Definimos el borde border="1" y el ancho witdh="100%"

Definimos la primera fila con <tr> y </tr> y dentro las tres columnas <td> </td>

<tr> <td></td><td></td><td></td> </tr>

Y hacemos lo mismo con la segunda fila y sus tres columnas

<tr> <td></td><td></td><td></td> </tr>

 

Las instrucciones para construir la tabla nos queda. Recuerda que da igual que las instrucciones se escriban en mayúsculas o minúsculas. Los espacios en blanco no afectan al resultado por tanto es lo mismo poner <tr> <td></td><td></td><td></td> </tr> en una columna como lo ponemos a continuación.

 

<table border="1" witdh="100%">
<TR>
<td></td>
<td></td>
<td></td>
</TR>
<TR>
<td></td>
<td></td>
<td></td>
</TR>
</Table>

Y el resultado.

html

Gracias por compartir y gracias por enlazar la página
Compartir en Facebook

¡Suscríbete GRATIS a nuestro boletín diario!:

Búsqueda personalizada
Existen nuevos mensajes en las siguientes salas de chat:

      Recibe gratis alertas en tu navegador, sin configuraciones ni registros. Más info...
      [Me Interesa] | [No me interesa]



      ¿Dudas? ¿Preguntas? Plantéalas en el foro
      Suscríbete Gratis al Boletín

      Escribir la dirección de Email:

      Delivered by FeedBurner

      Destacamos
      Cargando datos...
      Buenos Artículos Diarios

      Sigue a AulaFácil en:

      Ránking Mundial Certificados
      Banner AulaFácil

      Este es un producto de AulaFacil S.L. - © Copyright 2009
      B 82812322 Apartado de Correos 176. Las Rozas 28230. Madrid (ESPAÑA)