lunes, 20 de octubre de 2014

adicional

Tablas html
Las tablas se definen con el <table> etiqueta.

Las tablas se dividen en filas de la tabla con el <tr> etiqueta.

Las filas se dividen en datos de la tabla con el <td> etiqueta.

Una fila de la tabla también puede dividirse en encabezados de la tabla con el <th> etiqueta.
  • colspan:  Esta atributo de HTML sirve para crear celdas que se extienden varias columnas.
  • rowspan : Es para tablas anidadas, determina cuantas filas ocupara una columna anidada
  • COLOR DEL FONDO DE LA TABLA
Para darle color a toda la tabla es suficiente con poner el atributo bgcolor”” dentro de la instruccin de tabla. Para poner fondo amarillo bgcolor=”yellow”
<table border=”1” cellpadding=”0” cellspacing=”0” width=”50%” bgcolor=”yellow”>

EJEMPLO
Una tabla de tres filas y dos columnas con un largo del 75%.
Y  fondo amarillo
<table border=”1” cellpadding=”0” cellspacing=”0” width=”75%” bgcolor=”yellow”>
<tr>
<td width=”50%”> </td>
<td width=”50%”> </td>
</tr>
<tr>
<td width=”50%”> </td>
<td width=”50%”> </td>
</tr>

<tr>
<td width=”50%”> </td>
<td width=”50%”> </td>
</tr>
</table>

  • Para insertar una imagen, simplemente usas la misma etiqueta que en cualquier otra parte
    <table>
    - <tr>
    - - <td><img alt=”Imagen” src=”imagenes/imagen.png” /></td>
    - </tr>
    </table>

    Si te refieres a una imagen de fondo, hazlo por CSS.
    <html>
    <head>
    <style>
    table { background: url(tabla.png) } /* toda la tabla */
    caption { background: url(titulo.png) } /* título de la tabla */
    thead { background: url(encabezado.png) } /* encabezado de la tabla */
    tr { background: url(fila.png) } /* una fila entera */
    th { background: url(celda_encabezado.png) } /* las celdas de encabezado */
    tbody { background: url(cuerpo.png) } /* cuerpo de la tabla */
    td { background: url(celda.png) } /* celda de contenido */
    tfoot { background: url(pie.png) } /* pie de la tabla */
    </style>
    </head>

    <body>
    - <table>
    - <caption>Mi tabla</caption>
    - <thead>
    - - <tr>
    - - - <th>Encabezado 1</th>
    - - - <th>Encabezado 2</th>
    - - </tr>
    - </thead>
    - <tbody>
    - - <tr>
    - - - <td>Celda 1</td>
    - - - <td>Celda 2</td>
    - - </tr>
    - </tbody>
    - <tfoot>
    - - - <td>Pie 1</td>
    - - - <td>Pie 2</td>
    - </tfoot>
    - </table>
    </body>

    </html> 
  • Tomado de: http://www.w3schools.com/html/html_tables.asp

No hay comentarios:

Publicar un comentario