Entendido.

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

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de HTML

HTML: lenguaje básico para crear páginas web

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

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Donativos

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

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

6. Tablas (I)

6.1 Tablas básicas.

Definición

Una tabla es una estructura que consta de una serie de casillas distribuidas en filas y columnas. El lenguaje HTML permite la introducción de tablas en las páginas web. Para ello tiene una serie de etiquetas especiales para construir las tablas. Sin embargo, antes de nada, y para evitar confusiones, vamos a definir los elementos básicos de una tabla:

• Tabla: Espacio rectangular dividido por líneas horizontales y verticales de manera que se forman diferentes compartimentos o casillas.
• Fila: cada una de las líneas horizontales de casillas de que consta la tabla.
• Columna: Cada una de las líneas verticales de casillas de que consta la tabla.
• Celda: Cada una de las casillas de la tabla

Estos términos serán los que usaremos para referirnos a los distintos espacios de la tabla.

Las tablas permiten representar y ordenar elementos en diferentes filas y columnas de modo que se pueden resumir grandes cantidades de información de una manera que puede representarse rápida y fácilmente.

Etiquetas básicas

Para crear una tabla sencilla en HTML deberemos seguir los siguientes pasos:

• El contenido de la tabla debe estar incluido entre las etiquetas <table> ... </table>
• Cada fila debe estar incluida entre las etiquetas <tr> ...</tr>
• Dentro de la etiqueta de fila (<tr> ...</tr>) incluiremos las etiquetas de celda: <td> (contenido de la celda)</td>. por cada celda que haya en la fila incluiremos una etiqueta <td> ...</td>, incluso si la celda esta vacía.
• Debemos poner en todas las filas (Etiquetas <tr>) el mismo número de celdas (etiquetas <td>) para que la tabla quede de forma homogénea.

Veamos un ejemplo de tabla muy sencillo. El código HTML será el siguiente:

<table>
   <tr>
      <td>Fila 1, columna 1</td>
      <td>Fila 1, columna 2</td>
      <td>Fila 1, columna 3</td>
   </tr>
   <tr>
      <td>F 2, C 1</td>
      <td>F 2, C 2</td>
      <td>F 2, C 3</td>
   </tr>
   <tr>
      <td>F 3, C 1</td>
      <td>F 3, C 2</td>
      <td>F 3, C 3</td>
   </tr>
</table>

El código anterior nos da la siguiente tabla:

Las tablas, por defecto tienen las celdas sin bordes (borde 0) y los elementos dentro de las celdas aparecen alineados a la derecha. Esto puede cambiarse mediante una serie de atributos que pueden llevar las etiquetas anteriores. Además también puede modificarse el aspecto de una tabla mediante el código CSS. Sin embargo antes de ver cuales son estos atributos es conveniente ver otras etiquetas que también se usan en las tablas:

Otras etiquetas

La etiqueta <th> ... <th> se emplea igual que la etiqueta <td> ... </td> y sustituye a ésta para indicar que una celda es cabecera de tabla (se usa al principio de la columna o de la fila). Aunque en principio el resultado es el mismo que si se usa la etiqueta <td>, (con la excepción de que la celda con etiqueta <th> aparece en negrita) es conveniente diferenciar los dos tipos de celda si se van a aplicar distintos estilos CSS en la cabecera y en el contenido de la tabla.

La etiqueta <caption>....</caption> se emplea para insertar un título a la tabla. Debe colocarse justo después de la etiqueta <table>, y antes de la primera etiqueta <tr>

Para ver un ejemplo de estas etiquetas transformamos la tabla anterior, con el siguiente código:

<table>
   <caption>TABLA DE EJEMPLO</caption>
   <tr>
      <td></td>
      <th>COLUMNA 1</th>
      <th>COLUMNA 2</th>
      <th>COLUMNA 3</th>
   </tr>
   <tr>
      <th>FILA 1</th>
      <td>F 1, C 1</td>
      <td>F 1, C 2</td>
      <td>F 1, C 3</td>
   </tr>
   <tr>
      <th>FILA 2</th>
      <td>F 2, C 1</td>
      <td>F 2, C 2</td>
      <td>F 2, C 3</td>
   </tr>
   <tr>
   <th>FILA 3</th>
      <td>F 3, C 1</td>
      <td>F 3, C 2</td>
      <td>F 3, C 3</td>
   </tr>
</table>

Y el código anterior nos da la siguiente tabla:

Como podemos observar al usar una etiqueta th el texto aparece por defecto centrado y en negrita, mientras que en las etiquetas td aparece con aspecto normal y a alineado a la derecha.

En la siguiente página veremos cómo modificar la tabla empleando atributos en las etiquetas HTML

Estilo en HTML

Página creada por ANYELGUTI.

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

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

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