Los mejores cursos GRATIS © AulaFacil.com
  • [Entrada Profesores]
  • Certificaciones
  • [Mi AulaFácil]
lunes, 25 junio 2018 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
Acepto vuestra política de privacidad
Consentimiento Expreso para el tratamiento de datos de carácter personal recabados por vía electrónica (leer consentimiento)

¡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...
      [No me interesa] | [Me Interesa]



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

      Escribir la dirección de Email:

      Acepto vuestra política de privacidad
      Consentimiento Expreso para el tratamiento de datos de carácter personal recabados por vía electrónica (leer consentimiento)

      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)