Tablas y bordes Profesor: Jose Luis Avalos P. Área de Educación para el Trabajo
Lo que un programador ve en una tabla
Lo que la gente normal entiende por tabla
Etiquetas para tablas:
<table> </table>
<tr> se usan a単adir filas <td> se usan para las columnas
EJEMPLO: <html> <head> <title> sesión 5</title></head> <body> <TABLE BORDER="1" WIDTH="95%“ align=“center” > <TR> <TD align=“center” >Nombre con A</TD> <TD align=“center” >Nombre con B</TD> </TR>
Desarrollo:
Nombre con A
Nombre con B
Alberto
Beny
<TR> <TD >ALBERTO</TD> <TD >BENY</TD> </TR> </TABLE>
</body> </html>
5 columnas 3 filas
Practica: elabora la siguiente tabla. Ejercicio N°1 Países
nombres
mascotas
Icono o imagen (colocar una imagen pequeña)
Hiperenlace de a otra página
Francia
Dulce
Perro
Imagen1.jpg
Perú
Fresia
Gato
Imagen2.jpg
Imagen <img src=“url de la imagen” width=“#” heigth=“#”> enlace <a href=“url de la página”> texto de enlace </a> texto al centro <center> texto a centrar </center>
Atributos para table: align
Alinea horizontalmente la tabla con respecto a su entorno.
background
Nos permite colocar un fondo para la tabla a partir de un enlace a una imagen. ejemplo: background= “url de la imagen”
bgcolor border bordercolor
Da color de fondo a la tabla. ejemplo: bgcolor=“#FFFF01”
cellpadding
Define, en pixels, el espacio entre los bordes de la celda y el contenido de la misma. ejemplo: cellpadding=“80%” o cellpadding=“100”
cellspacing
Define el espacio entre los bordes (en pixels). Define la altura de la tabla en pixels o porcentaje. ejemplo: heigth=“20%” Define la anchura de la tabla en pixels o porcentaje. Width=“20%”
height
width
Define el número de pixels del borde principal. ejemplo: border=“1” Define el color del borde. ejemplo: bordercolor=“blue”
<align="left"> <align="center"> <align="right"> <align="justify">
Atributos para td: WIDTH= “medida en pixels o porcentaje" BGCOLOR= “#ffff00“ o “blue” ALIGN= “#”
El atributo “align” se usa en tablas y textos
<Font color=“blue”> texto </Font>
<align="left"> <align="center"> <align="right"> <align="justify">
Tabla combinadas: se usa la atributo â&#x20AC;&#x153;colspanâ&#x20AC;? en este ejemplo se expande en 3 columnas
<table border=“1”> Ejemplo <tr> <td> Números de Teléfono</td> </tr> <tr> <td>Nombre </td> <td>Apellido </td> <td>Teléfono</td> </tr> <tr> <td>Pablo</td> <td>García</td> <td>123456789</td> </tr>
celda combinada <tr> <td>Pedro</td> <td>Sánchez</td> <td>234567890</td> </tr> <tr> <td>Antonio</td> <td>Fernández</td> <td>345678901</td> </tr> </table>
Resultado:
El codigo Html que hay que añadirle a la etiqueta <td> para indicar que equivale a tres celdas es el siguiente: <td colspan="3">Números de Teléfono</td>
Practica 2: elabora la siguiente pagina Ejercicio N째2
https://db.tt/GIEwisQ7