1 / 18

Tablas html

Profesora: Laura Patricia Pinto Prieto. Tablas html. Tablas <table>. Las tablas están formadas por celdas , que son los recuadros que se obtienen como resultado de la intersección entre una fila y una columna.

bono
Download Presentation

Tablas html

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Profesora: Laura Patricia Pinto Prieto Tablas html

  2. Tablas <table> • Las tablas están formadas por celdas, que son los recuadros que se obtienen como resultado de la intersección entre una fila y una columna. • Para crear una tabla hay que insertar las etiquetas <table> y </table>. Entre dichas etiquetas habrá que especificar las filas y columnas que formarán la tabla.

  3. Fila <tr> • Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la tabla. Estas etiquetas deberán insertarse entre las etiqetas <table> y </table>. <table>  <tr>...</tr>  <tr>...</tr>  <tr>...</tr>  <tr>...</tr>  <tr>...</tr></table>

  4. Columna o celda <td> • Una celda es el resultado de la intersección entre una fila y una columna. • Es necesario insertar las etiquetas <td> y </td> por cada una de las celdas que compongan cada una de las filas de la tabla. Por lo tanto, habrá que insertar esas etiquetas entre las etiquetas <tr> y </tr>. • <table border="1">  <tr>    <td>Sabado</td>    <td>Domingo</td>  </tr>  <tr>    <td>Curso HTML</td>    <td>Curso Dreamweaver</td>  </tr>  <tr>    <td>Curso Frontpage</td>    <td>Curso Flash</td>  </tr></table>

  5. Resultado

  6. Formato de la tabla

  7. Ejemplo

  8. Formato de las celdas

  9. Ejemplo formato de celdas <table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000" bgcolor="#FFCC99">  <tr align="center" bgcolor="#0099CC">    <td>Sabado</td>    <td bgcolor="#66CC99">Domingo</td>  </tr>  <tr>    <td>Curso HTML</td>    <td>Curso Dreamweaver</td>  </tr>  <tr>    <td>Curso Frontpage</td>    <td>Curso Flash</td>  </tr></table>

  10. Encabezado de columna <th> • Para la etiqueta <th> es posible especificar los mismos atributos que para la etiqueta <td>, pero esta nueva etiqueta hace que el texto de la celda aparezca centrado y en negrita, por lo que se utiliza para definir los encabezados o títulos de las columnas.

  11. Ejemplo encabezados <table width="50%" border="1" align="center">  <tr>    <th>Sabado</td>    <th>Domingo</td>  </tr>  <tr>    <td>Curso HTML</td>    <td>Curso Dreamweaver</td>  </tr>  <tr>    <td>Curso Frontpage</td>    <td>Curso Flash</td>  </tr></table>

  12. Título de tabla <caption> • No solamente es posible establecer títulos para las columnas, también es posible establecer un título para la tabla mediante las etiquetas <caption> y </caption>. • Estas etiquetas han de ir después de la etiqueta <table>, y puede especificarse el valor de los atributos align (con los valores bottom, center, left, right y top) y valign (con los valores bottom y top).

  13. Ejemplo • <table width="50%" border="1" align="center">  <caption align="right" valign="top">Titulo de la tabla<tr>  <tr>    <th>Sabado</td>    ...  </tr></table> El título aparece ajustado a la margen derecho de la tabla (align="right") y encima de la tabla (valign="top").

  14. Combinar celdas • Para las etiquetas <td> y <th> existen los atributos colspan y rowspan, que se utilizan para combinar celdas. • A través del atributo colspan se especifica el número de columnas por las que se extenderá la celda, y a través del atributo rowspan se especifica el número de filas por las que se extenderá la celda.

  15. <table width="575" border="2" cellspacing="2">  <tr align="center" valign="middle">     <th colspan="4">DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE</th>  </tr>  <tr align="center" valign="middle">     <th rowspan="2">DIFERENCIAS</th>    <th colspan="2">PERRO</th>    <th rowspan="2">HOMBRE</th>  </tr>  <tr align="center" valign="middle">     <th>PEQUE&Ntilde;O</th>    <th>GRANDE</th>  </tr>  <tr align="center" valign="middle">     <td>Duraci&oacute;n crecimiento</td>    <td>10 meses</td>    <td>18 a 24 meses</td>    <td>16 a&ntilde;os</td>  </tr>  <tr align="center" valign="middle">     <td>Tiempo de gestaci&oacute;n</td>    <td colspan="2">58 a 63 d&iacute;as</td>    <td>9 meses</td>  </tr>  <tr align="center" valign="middle">     <td>Duraci&oacute;n de vida del pelo/cabello</td>    <td colspan="2">1 a&ntilde;o</td>    <td>2 a 7 a&ntilde;os</td>  </tr></table>

  16. Resultado

  17. Ejercicios • Problema de HTML:Confeccionar una tabla que muestre en la primer columna los nombre de distintos empleados de una compañia y en la segunda el sueldo bruto (la compañía tiene 4 empleados). • Problema de HTML:Confeccionar una tabla que muestre en la primer columna los nombre de distintos empleados de una compañía y en la segunda el sueldo bruto (la compañía tiene 4 empleados) Mostrar los textos 'Nombre del Empleado' y 'Sueldo Bruto' como primer fila de la tabla.

  18. Ejercicios • Problema de HTML: Confeccionaruna tabla que muestre los nombres de periódicos y su nombre de dominio agrupados por países. En la primer columna disponer los nombre de países, expandir en fila de acuerdo a la cantidad de diarios de cada pais.

More Related