| 2002 a 2006 |
Ángel
R. Puente Pérez |
 |
 |
 |
Empezamos con un tema algo complejo.
Una tabla se define entre las etiquetas <table> y </table>
A partir de este momento hay que definir las filas de la tabla que se definen con <tr> y </tr> (table row). Un par de etiquetas para cada una de las filas.
Dentro de cada fila se definen las celdas que forman esa fila con las etiquetas <td> y </td> (table data).
Vamos a empezar definiendo una tabla de 3 filas y 3 columnas (para nuestro lenguaje serán tres filas, cada una de ellas con tres celdas):
<html>
<head>
<title>
Tablas 1
</title>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
|
¿Qué ha pasado? No se ve nada. Esto ocurre porque:
- Dentro de las celdas no hemos puesto nada.
- La tabla no tiene bordes.
13.1.- Tablas con borde y con casillas vacías.
Vamos a arreglar estos dos temas: Por un lado vamos a indicar que queremos una tabla con borde. Esto se hace dentro de la etiqueta <table> con el atributo border. Así: <table border>.
Por otro lado, vamos a poner algo dentro de cada celda. Pero, en lugar de poner algo concreto y visible, vamos a utilizar una cadena de caracteres que ya hemos visto que se utilizaba para añadir un espacio a la separación entre palabras:
<html>
<head>
<title>
Tablas 2
</title>
</head>
<body>
<table border>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
|
13.2.- Otros atributos de la tabla.
Podemos hacer que nuestra tabla esté centrada en la página con el atributo align="center". O "left" o "right"
Que ocupe una determinada proporción del espacio en horizontal con el atributo width="50%". O "30%" o "70%" o...
Que el borde sea mayor que el establecido por defecto (que es 1): border="3". O ...
Que tenga un color de fondo con el atributo bgcolor="#6699FF" . O cualquier otro (ver colores html).
<html>
<head>
<title>
Tablas 3
</title>
</head>
<body>
<table border="3" align="center" width="50%"
bgcolor="#ffcccc">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
|
13.3.- Atributos de las filas y las celdas.
De manera similar a los atributos de la tabla, podemos definir todos esos parámetros a las filas o a las celdas.
Por ejemplo podemos empezar asignando a las celdas de la primera fila un ancho diferente. Si a este respecto no hago nada más en las otras celdas, lo que haga afectará a todas las columnas.
Puedo definir colores diferenciados. En este caso, el color de la fila o de la celda prevalecerá sobre el definido en el conjunto de la tabla
<html>
<head>
<title>
Tablas 4
</title>
</head>
<body>
<table border="3" align="center" width="50%"
bgcolor="#ffcccc">
<tr>
<td width="10%"> </td>
<td width="30%"> </td>
<td width="60%"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td bgcolor="#ff00cc"> </td>
<td bgcolor="#ffcc00"> </td>
<td bgcolor="#00cccc"> </td>
</tr>
</table>
</body>
</html>
|
|
|
|
| 2002 a 2006 |
Ángel
R. Puente Pérez |
