Tutorial de tablas


Contenido


Tabla simple 2 x 2

1 2
3 4

   <table border>
   <tr>
     <td>1</td>
     <td>2</td>
   <tr>
     <td>3</td>
     <td>4</td>
   </table>
Contenido

Otra tabla 2 x 2

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

Atributos Rowspan y Colspan

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

Cabeceras de filas y columnas

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>  
Contenido

Alineamiento de celdas

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> 
Contenido

Las celdas pueden contener casi cualquier cosa


Imagenes
Contenidos
Hipertexto
Algún
Texto
Otra tabla
1 2 3
4 5
<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>
Contenido

Fijando el ancho de las celdas y de la tabla

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.

20% 50% 15% 15%
<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> 
Contenido

Centrado de tablas y fijación de títulos

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>
Contenido

Espaciado entre celdas: CellSpacing

CellSpacing de 0
1 2
3 4
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

Márgenes de las celdas: CellPadding

CellPadding de 0
1 2
3 4
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

Tablas sin bordes

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>
Contenido

Indice

Facultad de Informática de la Universidad de Las Palmas de Gran Canaria