TABLAS
Anuncio
TABLAS Las tablas más sencillas de HTML se definen con tres etiquetas: Etiqueta <table> <tr> <td> Descripción Etiquetas que se utilizan para crear la tabla Se emplea para definir cada fila de las tablas de dato Etiqueta que se utiliza para crear cada columnas Es posible modificar los siguientes aatributos de una tabla: A continuación se muestra el código HTML de una tabla sencilla: Practica 1 <html> <head><title>Ejemplo de tabla sencilla</title></head> <body> <h1>Listado de cursos</h1> <table border=2 bgcolor="#66CC99"> <tr> <td><strong>Curso</strong></td> <td><strong>Responsable</strong></td> <td><strong>Cantidad de alumos</strong></td> </tr> <tr> <td>Ofimàtica</td> <td>David Landaverde</td> <td>100</td> </tr> <tr> <td>HTML</td> <td>Maria Cruz Pineda</td> <td>50</td> </tr> <tr> <td>Dreamweaver</td> <td>Adolfo Pineda</td> <td>80</td> </tr> </table> </body> </html> Si se visualiza el código anterior en cualquier navegador, se obtiene una tabla como la que muestra la siguiente imagen: FORMATO DE CELDAS Es posible modificar los siguientes atributos de una celda Practica 2 <html> <head><title>Ejemplo de tabla sencilla</title></head> <body> <h1>Listado de cursos</h1> <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> </body> </html> UNIFICACIÓN DE CELDAS Para algunas tablas puedes necesitar unificar dos o más celdas en una sola que pasará a ocupar el lugar de aquellas afectadas. Estas unificaciones pueden ser llevadas a cabo con los atributos "rowspan" (para unificación vertical) y "colspan" (para unificación horizontal), ambos disponibles para celdas (tag HTML td y tag HTML th) Practica 3 <html> <head><title> Vitaminas</title></head> <body> <h1> Alimentos ricos en vitamina A y B</h1> <table border=1 bgcolor="#66CC00"> <html> <tr> <td rowspan="4">Enero</td> <td>Vitamina A</td> <td>Vitamina B</td> </tr> <tr> <td> Zanahoria </td> <td> Hígado</td> </tr> <tr> <td> Espinaca</td> <td> Carne</td> </tr> <tr> <td> Melón </td> <td> Pescado</td> </tr> </table> </body> </html> Visualización de la página web EJERCICIOS: 1. Elaborar las páginas web siguientes: 2. Elabore la página web que contenga lo siguiente: Nota: Puedes elegir la combinación de colores que desees 3. Elabora la página siguiente: Codigos para más colores en HTML 4. Elabora una página web que contenga tablas e incorpora imágenes como en la figura
