HTML: lenguaje básico para crear páginas web
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 101
Visitas el mes pasado: 326
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Si este sitio te parece interesante puedes contribuir con una pequeña aportació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.
Para crear una tabla sencilla en HTML deberemos seguir los siguientes pasos:
<table> ... </table>
<tr> ...</tr>
<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.<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:
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:
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:
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
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