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.

Manual de HTML

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


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: 338

Visitas el mes pasado: 680

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de HTML
Desarrollo Web, por Rubén Álvarez
Cómo crear tu Web: curso de HTML
ComoCrearTuWeb, Por Georgens
Libros Web: introducción a XHTML
Libros web, por Javier Eguíluz Pérez
Curso de HTML: AulaFácil
www.aulafacil.com
Curso de html: Programación Web
www.programacionweb.net
WebEstilo: manual de html
www.webestilo.com
W3 schools; HTML Tutorial
www.w3schools.com
Tutorial html
Juan José López García
Universidad de Murcia
Introducción al lenguaje html
wikilearning

Donativos

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




6. Tablas (I)

6.1 Tablas básicas.

html

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:

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:

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:

Fila 1, Columna 1 Fila 1, Columna 2 Fila 1, Columna 3
F 2, C 1 F 2, C 2 F 2, C 3
F 3, C 1 F 3, C 2 F 3, C 3

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:

TABLA DE EJEMPLO
COLUMNA 1 COLUMNA 2 COLUMNA 3
FILA 1 F 1, C 1 F 1, C 2 F 1, C 3
FILA 2 F 2, C 1 F 2, C 2 F 2, C 3
FILA 3 F 3, C 1 F 3, C 2 F 3, C 3

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



manual de HTML

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