• Home
• Listing of Notes
• About
• Add Notes

HTML. Tablas

0

By: profeinformatica 11
March 2, 2011 | Computer Science - Vicente Torregrosa

.doc

4714
views

TABLAS

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

Para empezar, hay que indicar que comienza (y termina) una tabla utilizando las etiquetas <table> </table>

Después hay que describir la tabla por filas, esto se hace con la etiqueta <tr> </tr> (comienzo y final de una fila de la tabla). Las letras tr vienen de table row, que traducido es fila de la tabla

Por último, para cada fila hay que indicar dónde empieza la celda y dónde termina con <td> y </td> (comienzo y final de una celda). Las letras td vienen de table data (datos de la tabla).

Así, para hacer una tabla como esta,

habría que poner el siguiente código HTML:

<table>
    <tr>
         <td>Celda 1</td>
         <td>Celda 2</td>
    </tr>
    <tr>
         <td>Celda 3</td>
         <td>Celda 4</td>
     </tr>
</table>

Algunos atributos que se pueden usar dentro de las etiquetas <tr> y <td> son:

• align: Igual que con la etiqueta <p>. Ejemplos: <td align="center">, <tr align="justify">

• valign: Es la alineación vertical. El texto dentro de la celda puede estar:
  • Arriba (top)
  • En el centro (middle)
  • Abajo (bottom)

        Ejemplos: <td valign="middle">, <tr valign="bottom">

• bgcolor: Es el color de fondo de la celda. Ejemplos: <td bgcolor="red">, <tr bgcolor="green">

Los atributos que se pueden usar dentro de la etiqueta <table> son:

• align:      Alinea la tabla entera con respecto a la página. Ejemplo: <table align="center"> (Centra la tabla en la página web)

• bgcolor: Pone un color de fondo en toda la tabla. Ejemplo: <table bgcolor="blue">

• border:   Indica el número de pixels del border de la tabla, por defecto es 0. Ejemplo: <table border="3">

Al igual que con otras etiquetas del HTML, se pueden combinar varios atributos dentro de las etiquetas de tabla. Ejemplo:

<table border="3" align="center">                                         ( La tabla tiene un borde de 3 pixels y está centrada en la página)

         <tr valign="middle" align="center" bgcolor="cyan">     (Toda la primera fila en verde y centrada en horizontal y vertical)

                       <td> <p>Celda 1</p><p> Celda 1</p> </td>

                       <td> C2 </td>

         </tr>

         <tr>

                       <td  align="right"> C3 </td>

                       <td  align="center" bgcolor="yellow"> Celda4 </td>

           </tr>

</table>

Mostraría la tabla así: