Etiquetas HTML para tablas
Chelsie Hernández
Saraí Mata
Julie Contreras
Hailey Ortega
Hugo Tejeda
INFORMATICA PARA LA
PUBLICIDAD EN LA WEB
Quetzabeth Gutiérrez Rentaría
Tablas
• Las tablas surgieron con la versión HTML 3.0. Las tablas nos
permiten representar y ordenar cualquier elemento de
nuestra presentación en diferentes filas y columnas de modo
que podamos resumir grandes cantidades de información
de una manera que puede representarse rápida y
fácilmente.
 <TABLE> y </TABLE> son las etiquetas donde está
contenida la tabla
 <TR> y </TR> son las etiquetas que indican el comienzo y
fin de una fila
 <TH> Y </TH> indican que se trata de celdas que sirven
como encabezado de tabla y suelen visualizarse en
negrita.
 <TD> y </TD> señala celdas comunes
• Todos los atributos son opcionales
 BORDER="4". Indica el tamaño del borde en píxels, en este caso 4.
Si no se indica nada carece de borde
 WIDTH="5" o WIDTH="50%". Es el ancho de la tabla, puede
especificarse en valor absoluto (5 píxels) o como un porcentaje
(50% del ancho disponible)
 CELLSPACING="2". Es el espacio entre las celdas, por defecto es 2
 CELLPADDING="5". Es el espacio entre el contenido de las celdas
y el borde de las mismas, por defecto es 1
 ALIGN=" left", "right", "center". Alinea la tabla a la izquierda ,
derecha o en el centro.
La tabla se va definiendo declarando una fila y a continuación
las celdas que contiene esa fila, luego otra fila y sus celadas, etc.
No es necesario que todas las filas contengan el mismo número
de celdas.
La tabla (2x2) más sencilla que podemos hacer es la siguiente
• Las etiquetas que soportan las filas y las celdas son
 WIDTH="30". Ancho de toda la fila o celda. También se
puede dar en %
 ALIGN=" left", "right", "center". Alinea el contenido a la
izquierda, derecha o centro
 VALIGN="top" , "middle" o "bottom". Alinea el contenido
verticalmente arriba, en medio o abajo
 BGCOLOR="#AACCEE". Pone un fondo del color
especificado a la celda o fila
 COLSPAN=3. Especifica el número de columnas que
abarca la fila
 ROWSPAN=2. Especifica el número de filas que abarca la
columna
• Ejemplo. Fíjate en la etiqueta TH, que sustituye a TR,
resalta su contenido con negrita, por eso se usa
para los títulos.
• Las tablas pueden ser consideradas como un grupo de
filas donde cada una de ellas contiene un grupo de
celdas. Una tabla puede ser insertada en un
documento HTML usando tres elementos básicos: el
elemento TABLE (estructura contenedora principal), el
elemento TR (contenedor de fila) y el elemento TD
(celda).
• Cuando el contenido de una celda debe ser vacío,
deberías usar una espacio en blanco (que en HTML se
escribe como ) como su contenido. Esto hará que tu
página se visualice correctamente, ya que algunos
navegadores tienen problemas representando celdas
vacías. Ejemplo: <td> </td>
<html>
<head>
<title>Ejemplo del uso de tablas </title>
</head>
<body>
<table border="2px“>
<caption>Título de la tabla</caption>
<tr>
<td>Contenido 1</td>
<td>Contenido 2</td>
<td>Contenido 3</td>
</tr>
<tr>
<td>Contenido 4</td>
<td>Contenido 5</td>
<td>Contenido 6</td>
</tr>
</table>
</body>
</html>
BIBLIOGRAFIA
• http://platea.pntic.mec.es/~abercian/
guiahtml/tablas.htm
• http://www.webestilo.com/html/cap5
a.phtml

EXPOSICIÓN TABKAS

  • 1.
    Etiquetas HTML paratablas Chelsie Hernández Saraí Mata Julie Contreras Hailey Ortega Hugo Tejeda INFORMATICA PARA LA PUBLICIDAD EN LA WEB Quetzabeth Gutiérrez Rentaría
  • 2.
    Tablas • Las tablassurgieron con la versión HTML 3.0. Las tablas nos permiten representar y ordenar cualquier elemento de nuestra presentación en diferentes filas y columnas de modo que podamos resumir grandes cantidades de información de una manera que puede representarse rápida y fácilmente.  <TABLE> y </TABLE> son las etiquetas donde está contenida la tabla  <TR> y </TR> son las etiquetas que indican el comienzo y fin de una fila  <TH> Y </TH> indican que se trata de celdas que sirven como encabezado de tabla y suelen visualizarse en negrita.  <TD> y </TD> señala celdas comunes
  • 3.
    • Todos losatributos son opcionales  BORDER="4". Indica el tamaño del borde en píxels, en este caso 4. Si no se indica nada carece de borde  WIDTH="5" o WIDTH="50%". Es el ancho de la tabla, puede especificarse en valor absoluto (5 píxels) o como un porcentaje (50% del ancho disponible)  CELLSPACING="2". Es el espacio entre las celdas, por defecto es 2  CELLPADDING="5". Es el espacio entre el contenido de las celdas y el borde de las mismas, por defecto es 1  ALIGN=" left", "right", "center". Alinea la tabla a la izquierda , derecha o en el centro.
  • 4.
    La tabla seva definiendo declarando una fila y a continuación las celdas que contiene esa fila, luego otra fila y sus celadas, etc. No es necesario que todas las filas contengan el mismo número de celdas. La tabla (2x2) más sencilla que podemos hacer es la siguiente
  • 5.
    • Las etiquetasque soportan las filas y las celdas son  WIDTH="30". Ancho de toda la fila o celda. También se puede dar en %  ALIGN=" left", "right", "center". Alinea el contenido a la izquierda, derecha o centro  VALIGN="top" , "middle" o "bottom". Alinea el contenido verticalmente arriba, en medio o abajo  BGCOLOR="#AACCEE". Pone un fondo del color especificado a la celda o fila  COLSPAN=3. Especifica el número de columnas que abarca la fila  ROWSPAN=2. Especifica el número de filas que abarca la columna
  • 6.
    • Ejemplo. Fíjateen la etiqueta TH, que sustituye a TR, resalta su contenido con negrita, por eso se usa para los títulos.
  • 7.
    • Las tablaspueden ser consideradas como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Una tabla puede ser insertada en un documento HTML usando tres elementos básicos: el elemento TABLE (estructura contenedora principal), el elemento TR (contenedor de fila) y el elemento TD (celda). • Cuando el contenido de una celda debe ser vacío, deberías usar una espacio en blanco (que en HTML se escribe como ) como su contenido. Esto hará que tu página se visualice correctamente, ya que algunos navegadores tienen problemas representando celdas vacías. Ejemplo: <td> </td>
  • 8.
    <html> <head> <title>Ejemplo del usode tablas </title> </head> <body> <table border="2px“> <caption>Título de la tabla</caption> <tr> <td>Contenido 1</td> <td>Contenido 2</td> <td>Contenido 3</td> </tr> <tr> <td>Contenido 4</td> <td>Contenido 5</td> <td>Contenido 6</td> </tr> </table> </body> </html>
  • 10.