Tutorial de tablas
|
|
Contenido
<table border>
<tr>
<td>1</td>
<td>2</td>
<tr>
<td>3</td>
<td>4</td>
</table>
Contenido
| 1 |
2 |
| 3 |
La celda se expande
para ajustarse |
<table border>
<tr>
<td>1</td>
<td>2</td>
<tr>
<td>3</td>
<td>La celda se expande<br>
para ajustarse</td>
</table>
Contenido
| 1 |
2 |
3 |
| 4 |
Los atributos Rowspan y Colspan permiten que una celda
ocupe más de una fila o columna.
|
| 5 |
<table border>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<tr>
<td>4</td>
<td rowspan=2 colspan=2>
Los atributos Rowspan y Colspan permiten que una celda
ocupe más de una fila o columna.
</td>
<tr>
<td>5</td>
</table>
Contenido
|
Días de la semana |
|
Lunes |
Martes |
Miércoles |
Jueves |
Viernes |
| 1ª Semana |
1 |
2 |
3 |
4 |
5 |
| 2ª Semana |
6 |
7 |
8 |
9 |
10 |
<table border>
<tr>
<td></td>
<th colspan=5>Días de la semana</th>
<tr>
<td></td>
<th>Lunes</th>
<th>Martes</th>
<th>Miércoles</th>
<th>Jueves</th>
<th>Viernes</th>
<tr>
<th>1ª Semana</th>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<tr>
<th>2ª Semana</th>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</table>
|
Atributos de alineación, Align y VAlign |
Alineación
Vertical |
Top |
Middle |
Bottom |
Alineación
Horizontal |
Left |
Center |
Right |
<table border>
<tr>
<td></td>
<th colspan=3>Atributos de alineación, Align y VAlign</th>
<tr>
<th>Alineación<br>Vertical</th>
<td valign=top>Top</td>
<td valign=middle>Middle</td>
<td valign=bottom>Bottom</td>
<tr>
<th>Alineación<br>Horizontal</th>
<td align=left>Left</td>
<td align=center>Center</td>
<td align=right>Right</td>
</table>
Las celdas pueden contener casi cualquier cosa
<table border>
<tr align=center>
<td><img src="glass.gif"><br>
Imagenes</td>
<td><a href="#Contents">Contenidos</a><br>
Hipertexto</td>
<tr align=center>
<td>Algún<br>Texto</td>
<td><table border><caption>Otra tabla</caption>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<tr>
<td>4</td>
<td>5</td>
</table></td>
</table>
El ancho de una celda puede ser determinado en base a un porcentaje
del ancho de la tabla.
El ancho de una tabla puede ser fijado en base a un porcentaje del ancho
de la pantalla.
<table border width=75%>
<tr>
<td width=20%>20%</td>
<td width=50%>50%</td>
<td width=15%>15%</td>
<td width=15%>15%</td>
</table>
Las tablas podrán ser centradas y tener un título tanto en la parte
superior como en la inferior.
Figura 1: Tabla centrada con un ancho
del 75%
| 20% |
50% |
15% |
15% |
<center>
<table border width=75% >
<caption align=bottom><h5>Figura 1: Tabla centrada con un
ancho del 75% </h5>
</caption>
<tr>
<td width=20%>20%</td>
<td width=50%>50%</td>
<td width=15%>15%</td>
<td width=15%>15%</td>
</table>
</center>
|
|
CellSpacing de 10
| 1 |
2 |
| 3 |
4 |
|
<table border
CellSpacing=0>
<Caption>
CellSpacing de 0
</caption>
<tr><td>1</td>
<td>2</td>
<tr><td>3</td>
<td>4</td>
</table> |
<table border
CellSpacing=10>
<Caption>
CellSpacing de 10
</caption>
<tr><td>1</td>
<td>2</td>
<tr><td>3</td>
<td>4</td>
</table> |
Contenido
|
|
CellPadding de 10
| 1 |
2 |
| 3 |
4 |
|
<table border
CellPadding=0>
<Caption>
CellPadding de 0
</caption>
<tr><td>1</td>
<td>2</td>
<tr><td>3</td>
<td>4</td>
</table> |
<table border
CellPadding=10>
<Caption>
CellPadding de 10
</caption>
<tr><td>1</td>
<td>2</td>
<tr><td>3</td>
<td>4</td>
</table> |
Contenido
Las tablas sin bordes pueden ser muy útiles para la estructuración
de documentos. Las tablas son utilizadas en varios lugares de este
documento para situar elementos uno al lado de otro. De hecho, la
lista de contenidos está dividida en dos
columnas por medio de una tabla.
 |
Página en
construcción |
El texto puede ser situado a un lado de la imagen.
<center>
<table>
<tr><td><img src="uconstr3.gif"></td>
<td>Página en<br> construción</td>
</table>
</center>
Facultad de Informática de la Universidad de Las Palmas de Gran Canaria
Indice
