Your SlideShare is downloading. ×
0
Unidad #3
Unidad #3
Unidad #3
Unidad #3
Unidad #3
Unidad #3
Unidad #3
Unidad #3
Unidad #3
Unidad #3
Unidad #3
Unidad #3
Unidad #3
Unidad #3
Unidad #3
Unidad #3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Unidad #3

132

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
132
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Tablas en HTMLUna tabla en html viene marcada por las etiquetas <table> </table>. Entre esasdos etiquetas definiremos la tabla, las celdas que queremos, las columnas y lascaracterísticas de cada uno de estos parámetros. Pero vamos a empezarexplicándote la etiqueta <table>.. <table> </tableYa hemos dicho que esta etiqueta nos indica que empieza una tabla,pero… ¿podemos predefinir características de esa tabla? Por supuestoque sí. Una tabla admite muchos parámetros. Nosotros vamos a explicartelos principales
  • 2. Las filas: <tr>Como hemos visto en el encabezado las filas se escriben gracias a lasetiquetas <tr> con su correspondiente cierre </tr>. El contenido de lascolumnas que están dentro de la fila lo podemos alínear tanto horizontal comoverticalmente.Para alinearlo verticalmente utilizaremos el atributo "valign" para poderalinearlo arriba de la celda ("top"), en el centro ("middle") o debajo ("bottom").Para alinearlo horizontalmente utilizaremos el atributo "align". Con este atributopodremos alinear el contenido de las celdas en el centro ("center"), a laizquierda ("left"), a la derecha ("right") o justificado ("justify").Por supuesto a las filas también les podemos definir el color de fondo("bgcolor") y el color del borde ("bordercolor").
  • 3. Las celdas <td>Las celdas que van dentro de cada fila las tenemos que escribirlas con laetiqueta <td> y su correspondiente cierre </td>.Al igual que en las filas, en las celdas podemos definir el la alineación delcontenido que está dentro con los atributos "valign" y "align".Las celdas poseen unos atributos que nos ayudan a poder agrupar tantas celdaso tantas columnas como indiquemos en él. Para agrupar celdas utilizaríamos elatributo "colspan" y para agrupar celdas el atributo "rowspan".Por ejemplo, para agrupar en una celda 2 columnas tenemos que escribir: <tdcolspan="2"></td>. Y para agrupar dos filas, la indicación sería la siguiente: <tdrowspan= "2"></td>.
  • 4. Las celdas <th>Las celdas escritas con la etiqueta <th> y su correspondiente cierre, admitenlos mismos atributos que las etiquetas <td> y funcionan de la mismaforma, salvo que el contenido que esté dentro de una etiqueta <th> estáconsiderado como el encabezado de la tabla, por lo que se creará en negritay centrado sin que nosotros se lo indiquemos.A continuación vamos a ponerte un pequeño ejemplo de una tabla quecombina todas las cosas que hemos ido viendo en el artículo. Estúdiateprimero el código, visualiza cómo quedaría la tabla y luego míra.
  • 5. El parámetro "width" indircará la anchura de la tabla. Esta anchura lapodemos poner en píxeles (width= "300") o con porcentaje (width="100%").Dos parámetros más son cellspacing (que define el espacio entre lasceldas de la tabla) y cellpadding (que le marca a la tabla el espacioque debe dejar alrededor del texto dentro de una celda).Como ejemplo, escribiremos el hipotético supuesto de querer unatabla que sea ancha al 100%, con un borde azul de un píxel de grosory con un cellpadding de 10 y con un cellspacing de 10. El códigoquedaría de la siguiente forma.<table width="100%" border="1"bordercolor="#0000FF" cellspacing="10" cellpadding="10"></table>
  • 6. ejemplo
  • 7. Mira en el ejemplo anterior cómo una definición de celda que unifica a dos, es elequivalente a dos definiciones de celdas simples. Esto también funciona parauificación vertical, con una pequeña diferencia debido a la naturaleza de las tablesen HTML. Cuando se unifican celdas verticalmente, las definiciones de celdas en lasfilas afectadas por la unificación deben ser omitidas. Mira el ejemplo, donde loscampos 1, 4 y 7 son unificados:
  • 8. El atributo "scope"Las celdas afectadas por una celda de encabezado pueden ser definidas dediferentes maneras, pero la más común de todas es hacerlo a través del atributo"scope". Utilizado en ambos, el tag HTML td y el tag HTML th, este atributo puedetomar cuatro valores: "row" y "col" afectando respectivamente a la fila o columnacontenedora, y "rowgroup" y "colgroup" afectando respectivamente al grupo de filaso columnas contenedora (descriptos más adelante en este tutorial).En el ejemplo siguiente la misma "tabla simple" es definida pero esta vez con celdasde encabezado que utilizan el atributo "scope"
  • 9. El atributo "headers"Otra forma de asociar celdas de encabezado a celdas normales es a través del atributo"headers". Este atributo es definido en celdas normales (tag HTML td) y enuncia unconjunto de celdas (usando sus atributos "id", separados por espacios) que proveeninformación de encabezado para la misma.
  • 10. Existe un escaso número de casos (y son muy raros) en queeste atributo no puede ser reemplazado por el atributo "scope".El próximo ejemplo muestra una tabla superpuesta, dondeexiste una línea oblícua de celdas que va desde la esquinasuperior izquierda a la esquina inferior derecha y sirve comolímite para definir qué celdas reciben los encabezadossuperiores y de la derecha, y cuáles los inferiores y de laizquierda.La información en esta tabla no es completamente visible, perosemánticamente provee un muy bien definido conjunto deencabezados para cada celda. Por ejemplo, la celda "C1" (en eleje oblícuo) con cuatro encabezados (H1, H4, H7 y H10), y lacelda T1 (por encima del eje) con dos (H2 y H7).Este tipo de tablas es uno de los pocos usos donde el atributo"scope" (la forma simple) no funcionaría, y es mayormenteutilizado para mostrar información científica.
  • 11. El atributo "axis"
  • 12. Este ejemplo establece dos tipos de ejes o categorías: una categoría deregión (Europa y América) y una categoría de ingresos/egresos. En losnavegadores hablados esta información no visual tiene mucho sentido yayuda a mejorar la comprensión de tablas con estructuras complicadas.
  • 13. Agrupación horizontalUna tabla HTML puede serorganizada horizontalmente en tresgrupos: el encabezado (elemento HTML thead), el cuerpo o cuerpos(elemento HTML tbody) y el pie (elemento HTML tfoot). Cada unode estos elementos encierra un grupo de filas. Estas divisiones puedenayudar a hacer las tablas másfáciles de leer, especialmentecuando la tabla se debe mostraren más de una página (por ejemplo,cuando una tabla grande debe serimpresa). Es estos casos, elencabezado y el pie son mostrados en cada página para mejorar lacomprensión.
  • 14. Agrupación verticalLa otra forma de agrupar celdas en una tabla es mediante la agrupación vertical. Estono solo es útil para agrupar columnas temáticamente, sino también para asignaratributos a columas enteras de una tabla. La agrupación puede lograrse usando dostags: el tag HTML colgroup y el tag HTML col. Estos dos tags pueden ser usados porseparado o conjuntamente.En el ejemplo siguiente insertaremos una tabla muy simple que definirá atributos a lacolumna usando el tag HTML col:
  • 15. SumariosTambién puedes agregar unformación acerca del contenido y la naturaleza de la tablausando el atributo "summary", el cual debe ser definido en el tag HTML table. El valorde este atributo está pensado para describir la tabla en una forma más larga que eltítulo, ayudando a mejor el entendimiento del contenido de la misma
  • 16. La tabla: <table>Como ya ocurre con la etiqueta body, a una tabla también lo podemos definir elfondo de la misma. Esto lo podemos conseguir con el parámetro "bgcolor", que nospondrá un color de fondo, o "background" para poner una imagen de fondo.Recuerda que si la imagen es más pequeña que la tabla, ésta se repetirá tanto a loancho como a lo largo.Otro aspecto que podemos definir de la tabla es el borde. Esto lo haremos con elparámetro "border". Como en todas los parámetros que ya hemos vistoescribiremos: border= "x" siendo la x un número. Ese número indicará el grosor delborde. Si no ponemos borde o lo escribimos "0", la tabla no mostrará bordeninguno. Por supuesto, también podemos darle color al borde, escribiendo laetiqueta "bordercolor" e indicando el color que queramos para nuestro borde.

×