TABLAS

Una tabla es un conjunto de celdas organizadas dentro de las cuales podemos alojar distintos tipos de contenidos.

Para crearlas utilizamos la etiqueta principal <table> junto con su cierre correspondediente </table>. Dentro de esta etiqueta vamos creando las distintas filas por medio de la etiqueta <tr> y </tr>, y en cada fila las celdas a través de la etiqueta <td> y </td>. Las celdas de cada fila se ordenan automáticamente de izquierda a derecha. Dentro de estas etiquetas de celda es donde colocaremos nuestro contenido.

Se usaron los siguientes atributos:

  • border: Donde se establece el valor en pixels del borde de la tabla. Si le asignamos el valor cero no habrá borde.
  • colspan: expande una celda horizontalmente(con la celda de la derecha).
  • rowspan: expande una celda verticalmente(con la celda inferior).
  • width: anchura de la tabla en pixels o en porcentaje (el 100% es el máximo del que dispone el navegador).
  • height: altura de la tabla en pixels o en porcentaje.
    • <!-- table.html
      itaka666
      21-noviembre-2009
      Tabla. Uso de los atributos: border, colspan, rowspan, width, heigth-->
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <title></title>
  </head>
  <body>
    <table border="1">
    <caption>tabla de ejemplo</caption>
      <tr>
        <th>encabezado 1</th>
        <th>encabezado 2</th>
        <th>encabezado 3</th>
      <tr>
        <td colspan="2">celda 1</td>
        <td>celda 2</td>
      </tr>
      <tr>
        <td>celda 4</td>
        <td>celda 5</td>
        <td>celda 6</td>
      <tr>
        <td>celda 7</td>
        <td rowspan="2">celda 8</td>
        <td>celda 9</td>
      <tr>
        <td>celda 10</td>
        <td>celda 12</td>
      </tr>
      <tr>
        <td width="300" height="150">&nbsp;</td>
        <td width="150">&nbsp;</td>
        <td width="500">&nbsp;</td>
     </table>
  </body>
</html>

    INSERTAR (Imágenes)