Act 03 - Tablas HTML Y CSS PARA PREGRADO.pdf
- 1. HTML: Tablas Una tabla es un conjunto estructurado de datos distribuidos en filas y columnas (datos tabulados).
- 2. HTML: Tablas Prerrequisitos: Conceptos básicos de HTML Objetivo: Adquirir conocimientos básicos de las tablas HTML.
- 3. Definición de Tabla Una tabla en un conjunto de celdas donde podemos alojar distintos contenidos. Características de las tablas: 1. Definimos las tablas con la etiqueta <table>. 2. La tabla está dividida en filas definidas con la etiqueta <tr>. 3. Cada fila dividida en celdas definidas con la etiqueta <td>. 4. Las celdas pueden contener texto, imágenes, formularios, listas, otras tablas, etc. <table> <td> <td> <td> <tr> Contenido Contenido Contenido <tr> Contenido Contenido Contenido
- 4. Ejemplo:
- 5. Elementos de una Tabla Inicio y fin de tabla 01 <table>….</table> Define una cabecera de la tabla, también tiene tres atributo: align=“left/center/right" valign=“top/middle/bottom" bgcolor="#ffcc99"s: 02 <thead>…</thead> Define una celda de tipo cabecera en la tabla. Por defecto centra el texto vertical y horizontalmente y lo muestra en negrita. Tiene los mismos atributos que td 03 <th>...</th> Define el contenido de la tabla, puede emplear los atributos globales de HTML, como id, class, style, etc. 04 <tbody>…</tbody> Define un pie para la tabla 05 <tfoot>…</tfoot> Podemos colocar un Titulo o Nombre a una tabla. align="top/ bottom“ Atributo que alinea el título respectivamente arriba o abajo de la tabla 05 <caption>...</caption>
- 6. Atributos <table>….</table> 1. border: Especifica el tamaño del borde de la tabla en pixels. Por ejemplo, border=“1″ mostraría un borde de 1 pixel de ancho alrededor de la tabla.
- 7. Atributos <table>….</table> bordercolor: Especifica el color del borde de la tabla. Por ejemplo, bordercolor=“blue″ mostraría un borde de color azul alrededor de la tabla.
- 8. Atributos <table>….</table> width: Especifica el ancho de la tabla en pixels o porcentaje. Por ejemplo, width=»100%» haría que la tabla ocupe el ancho completo de la pantalla.
- 9. Atributos <table>….</table> align: Especifica la alineación de la tabla en relación con el contenido que la rodea. Puede ser “left”, “center” o “right”..
- 10. Atributos <table>….</table> cellpadding: Especifica el espacio en pixels entre el contenido de las celdas y los bordes de las celdas. cellspacing: Especifica el espacio en pixels entre las celdas de la tabla.
- 11. Atributos <table>….</table> Bgcolor / Background: Especifica el color de fondo de la tabla. Puede ser un valor hexadecimal o un nombre de color.
- 12. Atributos <table>….</table> frame: Especifica qué partes de los bordes de la tabla deben ser dibujadas. Puede ser “void”, “above”, “below”, “hsides”, “vsides” o “lhs”.
- 13. Atributos <table>….</table> rules: Especifica qué líneas de la tabla deben ser dibujadas. Puede ser none, rows, cols, all.
- 14. Atributos <td>…</td> y <th>…</th> colspan: permite especificar el número de columnas que debe ocupar la celda. Por ejemplo, si se quiere que una celda ocupe dos columnas, se puede usar <td colspan=“2″> rowspan: permite especificar el número de filas que debe ocupar la celda. Por ejemplo, si se quiere que una celda ocupe dos filas, se puede usar <td rowspan=“2″>
- 15. Atributos <td>…</td> y <th>…</th> align: Si quieres que el texto esté alineado a la izquierda, no tienes que hacer nada, es la alineación que se establece por defecto <td align="left"> Para alinear el texto en el centro: <td align="center"> Para alinear el texto a la derecha: <td align="right"> valign: sirve para alinear el texto en arriba, medio y debajo. Sintaxis: por defecto alinea texto en el medio <td valign =“middle"> Para alinear el texto en el parte superior: <td align=“top"> Para alinear el texto a la parte inferior: <td align=“bottom">
- 16. Atributos <col> La etiqueta <col> en HTML se utiliza para definir las características de una o varias columnas en una tabla. Es utilizada dentro de un <colgroup> y se utiliza para especificar atributos como el ancho, el alineamiento, el color de fondo y el estilo de la fuente.
- 17. HTML: Ejercicios
- 18. Ejercicio 01: Realizar la siguiente tabla en código HTML.
- 19. Ejercicio 02: Realizar la siguiente tabla en código HTML.
- 20. Ejercicio 03: Realizar la siguiente tabla en código HTML.
- 21. Ejercicio 04: Realizar la siguiente tabla en código HTML.
- 22. Ejercicio 05: Realizar la siguiente tabla en código HTML.