Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Mi primera web

Aprender a hacer una sencilla web paso a paso partiendo de cero.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 32

Visitas el mes pasado: 49

logo

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




9. Tablas (I)

9.1. Contenido

Paso 22

logo miweb

El archivo tablas.html

Para crear la tercera página de nuestra web empezaremos de la misma manera que hicimos para la segunda. Abrimos por lo tanto el archivo plantilla.html con el editor de textos, y lo guardamos con otro nombre. (recuerda Archivo / Salvar Como ). Al guardarlo le damos el nombre de tablas.html. Debemos guardar este nuevo archivo en la carpeta raíz de nuestro sitio.

Con esto hemos creado un nuevo archivo llamado tablas.html que de momento es una copia del archivo plantilla.html. Ahora, modificaremos el nuevo archivo tablas.html para convertirlo en una página de nuestra web. Seguiremos para ello los mismos pasos que hemos dado para el archivo listas.html.

Cambios en la cabecera

Abrimos el archivo tablas.html con el editor de textos y cambiamos la etiqueta de cabecera, etiqueta head:

  <head>
    <link rel="stylesheet" type="text/css" href="general.css" />
    <link rel="stylesheet" type="text/css" href="tablas.css" />
    <title>Tablas en Mi Propia Web</title>
  </head>

Al igual que hicimos en la segunda página (listas.html) hemos añadido una etiqueta de enlace a un nuevo archivo CSS (tablas.css) que crearemos en el siguiente paso. Y además hemos cambiado el título de la página.

Cambios en la etiqueta body

Siguiendo el mismo procedimiento que hicimos para la página anterior (listas.html), modificaremos sólamente la sección div id="principal". En la cual pondremos el contenido de la página que se diferencia del resto de las páginas de nuestra web.

El resto de secciones, es decir, la cabecera, la barra de navegación, y el pie de página, los dejaremos tal y como están, ya que son iguales en todas las páginas.

Tablas con HTML

El lenguaje HTML dispone de una serie de etiquetas para crear tablas. Una tabla es una serie ordenada de datos que se disponen en filas y columnas. Esto crea una serie de recuadros llamados "celdas" en donde ponemos cada uno de los datos.

Para crear las tablas HTML tenemos las siguientes etiquetas:

<table> ... </table>

Es la etiqueta principal. Toda la tabla está englobada dentro de esta etiqueta. Las demás etiquetas que veremos a continuación van incluidas dentro de esta etiqueta.

<tr> ... </tr>

Dentro de la etiqueta table pondremos varias etiquetas <tr> </tr>. Cada una de estas etiquetas es una fila (horizontal) de la tabla. Pondremos por tanto tantas etiquetas tr como filas vaya a tener la tabla. Anidadas o incluidas dentro de las etiquetas tr, pondremos las etiquetas de celda. Estas pueden ser las siguientes:

<th> ... </th>

<td> ... </td>

Estas son las etiquetas de celda. Cada etiqueta crea una celda dentro de la fila. El contenido de la etiqueta de celda será el texto o elementos que queramos poner dentro de la celda.

La diferencia entre las etiquetas td y th es que las etiquetas td crean una celda de contenido normal, mientras que las etiquetas th crean una celda para la cabecera de la lista, la cual tiene por defecto un estilo distinto (texto en negrita y centrado). En la etiqueta th se suele indicar el tipo de elemento que ponemos en el resto de la fila o columna.

Cada etiqueta de fila (tr) debe incluir el mismo número de etiquetas de celda (td ó th), para que todas las filas tengan el mismo número de celdas. Si no es así la tabla no se verá bien. Si hace falta incluiremos etiquetas vacías (sin contenido) para completar el número.

Contenido de la página

Ahora que ya hemos visto cómo hacer una tabla, vamos a acabar de hacer nuestra página, para ello abrimos el archivo tablas.html con el editor de textos, y rellenamos la etiqueta div id=principal".

Pondremos primero un título y unos párrafos, y debajo el título de la tabla :

  <div id="principal">
  <h2>Tablas en las páginas web</h2>
  <p>Una de las estructuras más utilizadas dentro de las páginas web 
    son las tablas. En una tabla ordenamos una serie de elementos en filas 
    y columnas. Podemos poner una primera fila o columna indicando la clase 
    de elementos, y en las siguientes ponemos los propios elementos.</p>
  <p>Ponemos aquí una tabla en la que damos algunos datos sobre los 
    continentes de nuestro planeta.</p>
  <br/>
  <h3>Continentes de la tierra</h3>
	
  </div>

Hemos puesto aquí el título de la sección (etiqueta h2), seguido de unos párrafos (p), y el título de la tabla (etiqueta h3).

Como novedad vemos que hemos insertado también una etiqueta <br/> entre el último párrafo y el título de tabla. Esta etiqueta indica un salto de linea, es decir deja una línea de texto en blanco. De esta manera separamos el final de los párrafos del pricipio de la tabla.

A continuación vamos a empezar a hacer la tabla, de momento pondremos la fila de la cabecera. Para ello, inmediatamente después del título de tabla (etiqueta h3) , escribiremos lo siguiente:

  <table>
    <tr>
      <th>Continente</th>
      <th>Extensión: <br/>miles de km<sup>2</sup></th>
      <th>Población (2008): <br/>(millones de hab.)</th>
      <th>Densidad <br/>(hab/km<sup>2</sup>)</th>
    </tr>
  </table>

Hemos puesto la etiqueta de tabla table, que englota toda la tabla. Dentro de ella hemos puesto la etiqueta de fila (tr), la cual lleva dentro cuatro etiquetas de celdas de cabecera (th), con el título de las columnas de la tabla.

Observa que para poner el "2" de km2, hemos usado la etiqueta sup. Esta etiqueta crea un "superindice", que deja el texto incluido en ella un poco más elevado respecto al resto.

Cerramos y guardamos el archivo tablas.html, para comprobar lo que hemos hecho hasta ahora. Para ello abrimos luego el archivo con el navegador, el cual debe quedar como el del siguiente enlace:

Aunque en principio puede que esto no se parezca mucho a una tabla, ya veremos como poco a poco va tomando forma.

Abrimos de nuevo el archivo tablas.html con el editor de textos para acabar de hacer la tabla. Para ello, dentro de la etiqueta table añadiremos nuevas filas (tr), esta vez con los datos de la tabla en las etiquetas td. El código muestra aquí la tabla ya completa. En azul las nuevas filas que hemos añadido.

<table>
    <tr>
      <th>Continente</th>
      <th>Extensión: <br/>miles de km<sup>2</sup></th>
      <th>Población (2008): <br/>(millones de hab.)</th>
      <th>Densidad <br/>(hab/km<sup>2</sup>)</th>
    </tr>
    <tr>
      <td>Asia</td>
      <td>43.810</td>
      <td>3.879</td>
      <td>60,0</td>
    </tr>
    <tr>
      <td>América</td>
      <td>42.330</td>
      <td>910</td>
      <td>21,5</td>
    </tr>	
    <tr>
      <td>Africa</td>
      <td>30.370</td>
      <td>922</td>
      <td>30.4</td>
    </tr>	 
    <tr>
      <td>Europa</td>
      <td>10.180</td>
      <td>731</td>
      <td>71,8</td>
    </tr>
    <tr>
      <td>Oceanía</td>
      <td>9.008</td>
      <td>32</td>
      <td>4,2</td>
    </tr>
    <tr>
      <td>Antártida</td>
      <td>13.720</td>
      <td>0,001</td>
      <td>0,00007</td>
    </tr>	
  </table>

Hemos añadido 6 etiquetas tr a la tabla, que se corresponden con las filas de la tabla. Cada una de ellas contiene cuatro etiquetas td que se corresponden con las columnas que tiene la tabla. Hemos completado con esto la tabla.

Para completar la página pondremos debajo de la tabla una etiqueta de párrafo, en donde pondremos una referencia con un enlace a la página de donde hemos obtenido estos datos.

Debajo de la etiqueta de cierre de la tabla, escribiremos la siguiente etiqueta de párrafo:

  <p>Datos recogidos de Wikipedia. concretamente en la página 
  <a href="http://es.wikipedia.org/wiki/Continente">http://es.wikipedia.org/wiki/Continente</a>
  de la Wikipedia.</p>

Una vez que hemos acabado de insertar el código anterior en la página, cerramos y guardamos el archivo. Ahora comprobamos cómo queda la página una vez aue ya le hemos insertado todo el contenido. Para ello abrimos el archivo tablas.html con el navegador, el cual debe quedar como el del siguiente enlace.


Se muestra el contenido de la tabla, aunque sin ninguna separación entre las celdas. Corresponde al archivo CSS, el cual lo haremos en el siguiente paso, separar y dar un estilo a cada tipo de celda que hemos puesto en la tabla.




En el siguiente paso daremos un estilo a la tabla que hemos hecho aquí,

Tablas: estilo




Mi primera web

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com