profesora laura patricia pinto prieto n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Tablas html PowerPoint Presentation
Download Presentation
Tablas html

Loading in 2 Seconds...

play fullscreen
1 / 18

Tablas html - PowerPoint PPT Presentation


  • 233 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Tablas html' - bono


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
profesora laura patricia pinto prieto
Profesora:

Laura Patricia Pinto Prieto

Tablas html

tablas table
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.
fila tr
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>

columna o celda td
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>
ejemplo formato de celdas
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>

encabezado de columna th
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.
ejemplo encabezados
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>

t tulo de tabla caption
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).
ejemplo1
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").

combinar celdas
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.
slide15

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

ejercicios
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.
ejercicios1
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.