Modelos de tablas

Tabla de una celda usando extensión en pixeles

<table border=1 width=700>
<tr>
<td>
celda 1
</td>
</tr>
</table>

celda 1

Tabla de una celda usando extensión en porcentaje

<table border=1 width=90%>
<tr>
<td>
celda 1
</td>
</tr>
</table>

celda 1

Tabla con una fila y dos columnas

<table border=1 width=700>
<tr>
<td>
celda 1
</td>
<td>
celda 2
</td>
</tr>
</table>

celda 1 celda 2

Tabla con dos filas y dos columnas

<table border=1 width=700>
<tr>
<td>
celda 1
</td>
<td>
celda 2
</td>
</tr>
<tr>
<td>
celda 3
</td>
<td>
celda 4
</td>
</tr>
</table>

celda 1 celda 2
celda 3 celda 4

Tabla con dos filas y tres columnas

<table border=1 width=700>
<tr>
<td>
celda 1
</td>
<td>
celda 2
</td>
<td>
celda 3
</td>
</tr>
<tr>
<td>
celda 4
</td>
<td>
celda 5
</td>
<td>
celda 6
</td>
</tr>
</table>

celda 1 celda 2 celda 3
celda 4 celda 5 celda 6

Tabla con tres filas y tres columnas

<table border=1 width=700>
<tr>
<td>
celda 1
</td>
<td>
celda 2
</td>
<td>
celda 3
</td>
</tr>
<tr>
<td>
celda 4
</td>
<td>
celda 5
</td>
<td>
celda 6
</td>
</tr>
<tr>
<td>
celda 7
</td>
<td>
celda 8
</td>
<td>
celda 9
</td>
</tr>
</table>

celda 1 celda 2 celda 3
celda 4 celda 5 celda 6
celda 7 celda 8 celda 9

Tabla con tres filas y tres columnas con diferente ancho (width en td)

<table border=1 width=700>
<tr>
<td width=20%>
celda 1
</td>
<td width=30%>
celda 2
</td>
<td width=50%>
celda 3
</td>
</tr>
<tr>
<td>
celda 4
</td>
<td>
celda 5
</td>
<td>
celda 6
</td>
</tr>
<tr>
<td>
celda 7
</td>
<td>
celda 8
</td>
<td>
celda 9
</td>
</tr>
</table>

celda 1 celda 2 celda 3
celda 4 celda 5 celda 6
celda 7 celda 8 celda 9

Tabla con dos filas, la primera con una columna y la segunda con dos columnas
Uso de COLSPAN para expandir la primera fila en dos columnas.
Uso del width para definir ancho de tabla y de las columnas de la segunda fila.
Uso de height para definir alto de la segunda fila.
Uso de valign para colocar texto o imagen en la parte superior de las columnas de la segunda fila.

<table border=1 width=700>
<tr>
<td COLSPAN=2>
Aquí puede ir el título principal
</td>
</tr>
<td width=150 height=500 valign="top">
Aquí puede ir el menú
</td>
<td width=550 valign=top>
Aquí puede ir el contenido
</td>
</table>

Aquí puede ir el título principal
Aquí puede ir el menú Aquí puede ir el contenido

Tabla para el menú vertical, usando color y separando celdas con CELLSPACING para dar apariencia de botones a cada celda.

<table border=0 CELLSPACING=3>
<tr>
<td bgcolor="0094FF">
Hiperenlace 1
</td>
</tr>
<tr>
<td bgcolor="0094FF">
Hiperenlace 2
</td>
</tr>
<tr>
<td bgcolor="0094FF">
Hiperenlace 3
</td>
</tr>
<tr>
<td bgcolor="0094FF">
Hiperenlace 4
</td>
</tr>
<tr>
<td bgcolor="0094FF">
Hiperenlace 5
</td>
</tr>
<tr>
<td bgcolor="0094FF">
Hiperenlace 6
</td>
</tr>
<tr>
<td bgcolor="0094FF">
Hiperenlace 7
</td>
</tr>
</table>

Hiperenlace 1
Hiperenlace 2
Hiperenlace 3
Hiperenlace 4
Hiperenlace 5
Hiperenlace 6
Hiperenlace 7

Tabla para el menú horizontal, usando color y separando celdas con CELLSPACING para dar apariencia de botones a cada celda.

<table border=0 CELLSPACING=3>
<tr>
<td bgcolor="0094FF">
Hiperenlace 1
</td>
<td bgcolor="0094FF">
Hiperenlace 2
</td>
<td bgcolor="0094FF">
Hiperenlace 3
</td>
<td bgcolor="0094FF">
Hiperenlace 4
</td>
<td bgcolor="0094FF">
Hiperenlace 5
</td>
<td bgcolor="0094FF">
Hiperenlace 6
</td>
<td bgcolor="0094FF">
Hiperenlace 7
</td>
</tr>
</table>

Hiperenlace 1 Hiperenlace 2 Hiperenlace 3 Hiperenlace 4 Hiperenlace 5 Hiperenlace 6 Hiperenlace 7

Prof. Roberto Silva Rodríguez