T a b l a s.

Presentación del tema: "T a b l a s."— Transcripción de la presentación:

1 T a b l a s

2 Tabla básica. Las tablas son el mecanismo que nos proporciona XHTML para presentar información tabulada, El modelo de una tabla n HTML, sigue el estándar de cualquier tabla, esto es una tabla esta compuesta por filas y columnas. Por tanto para construir una tabla en HTML se deben implementar filas y columnas o en el ambiente de HTML renglones y celdas respectivamente. Las principales etiquetas que disponemos para crear una tabla son las siguientes: <table>…</table> crea la tabla <caption>…</caption>: pone título a la tabla <tr>…</tr>: crea una fila <td>…</td>: crea una celda <th>…</th>: crea una celda de encabezamiento

3 Código de una Tabla en HTML. Modelo de una Tabla en HTML.
Modelo de tabla en HTML. Código de una Tabla en HTML. Modelo de una Tabla en HTML. Renglón 1 Celdas del primer renglón Renglón 2 Única celda del segundo renglón

4 Creación de una tabla En este caso el borde se agrego para hacer mas claro el ejemplo Titulo de la tabla Filas con sus respectivas celdas.

5 Configuración de la tabla.
La etiqueta tablee nos ayuda a construir una tabla. Sintaxis. <table> filas y celdas </table> Atributo Operación valores width Determina el ancho de la tabla Valor entero en píxeles o en porcentaje referente a la pantalla. border Determina el espesor del borde Valor entero en píxeles, un valor cero implica no borde bgcolor Color de fondo de la tabla Nombre de color o código hexadecimal bordercolor Color del borde cellspacing Indica el espacio entre las celdas. Valor en píxeles Cellpadding Indica el espacio entre contenido de la celda y sus bordes Valor entero en píxeles Height Determina la altura de la tabla Valor entero en píxeles o en porcentaje.

6 Configurando borde de la tabla.
Para que el borde de la tabla sea visible, se debe de proporciona un valor mayor que cero al atributo border. Inserta un borde con un ancho de 3 píxeles.

7 Determinado el ancho de una tabla
Para determinar el ancho de una tabla se utiliza el atributo width, para los valores lo mas recomendado es proporcionarlos en porcentaje. En este caso se indica el ancho de la columna en porcentaje. (100%) Es recomendado proporcionar las dimensiones de ancho y alto en porcentajes, pues al redimensionar la ventana del navegador se ajusta automáticamente las dimensiones de la tabla

8 Configurar el color del borde
Para configurar el color del borde debemos agregar un valor al atributo bordercolor Coloca color al borde de la tabla. Este atributo no es muy recomendable usarlo, pues algunos navegadores no lo reconoces, como opción se usan clases CSS (hojas de estilo)

9 Color de fondo de la tabla.
El atributo bicolor configura un color de fondo para la tabla, en este caso amarillo (Yellow) Nuevamente la recomendación para este atributo de una tabla, es el uso de estilos.

10 Determinado el espacio entre las celdas
Podemos determinar el espacio entre las celdas, asignando un valor al atributo cellspacing, el valor asignado a este atributo se proporciona en píxeles.

11 Espacio entre borde de celda y contenido

12 Configurando renglones y celdas

13 Configurando renglones.
Para agregar renglones a nuestra tabla se utiliza la etiqueta <tr>. Atributos. Atributo Operación Valores align Alinea horizontalmente el contenido de la fila center, right, left valign Alinea verticalmente el contenido de la fila Top, center, bottom bgcolor Determina color de fondo Nombre del color o codigo hexadecimal.

14 Configurando celdas. Para agregar filas a nuestra tabla se utiliza la etiqueta <td> o filas de encabezado con la etiqueta <th> Atributo Operación Valores align y valign Alinean horizontal y verticalmente la celda Mismos que para las filas colspan Expande una celda de manera que ocupe el mismo ancho que varias columnas Numero entero que determina cuantas columnas se expande la celda. rowspan Expande una celda de manera que ocupe el mismo alto que varias filas Numero entero que determina cuantas filas se expande la celda. bgcolor Color de fondo para celda