[2016-02-08]
CLASE 23:
TABLAS:
CONCEPTOS:
- Columnas: Divisiones en Dirección VERTICAL.
- Filas: Divisiones en Dirección HORIZONTAL.
- Celdas: Unión entre las columnas y las filas.
Estructura de la Creación de las Tablas en HTML:
<table>: Para abrir y crear la Tabla.
</table>:Cerrar la Tabla.
<tr>: Para abrir y crear Filas.
</tr>:Cerrar la Fila.
<td>: Para Celdas o Columnas.
</td>:Cerrar la Celda o Columna.
NOTA: SIEMPRE las tablas se basan en el ANCHO y hay que tener presente dependiendo de lo que desea el usuario el BORDE.Cuando el Borde es = 0 no se ve el Borde de la tabla.
<table width="100%"border="1">
Las tablas pueden estar FIJAS o AJUSTABLES:(Son muy deferentes)
Tabla Fija: Se maneja con px (pixeles).
Tabla Ajustable: Se maneja con % (Porcentaje).
EJEMPLO DE LA ESTRUCTURA:
<html><head><title>pagina</title></head>
<body>
<table width="100%"border="0">
<tr>
<td>hola</td>
</tr>
</body>
</html>
- <table width="100%"border="10"bgcolor="#ff0000"border color="#00ffaa">
UNIÓN DE CELDAS:
<td colspan="2">21<hr>22</td>
El número el cual se coloca después del = Depende de la cantidad de columnas que se van a unir.
COLSPAN: Agrupa COLUMNAS.
ROWSPAN: Agrupa FILAS.
= Espacio en Blanco y evita que el Espacio en Blanco se convierta en Error.
<tr style="visibility:hidden" : No se está visualizando la Información.
<tr style="visibility:visible" : Se visualiza la Información.
Atributos de Algunas viñetas:
- align: "center""left""right"
- valign: "middle""top""down"
INFORMACIÓN SOBRE TABLAS:
Las tablas son los elementos más importantes del
HTML. Entender como construirlas es la clave para dominar el lenguaje. Vamos a
trabajar con una tabla de 2x2 celdas que iremos modificando sobre la marcha.
El código para construirla es:
<TABLE border=1> <TR> <TD>fila1/celda1</TD> <TD>fila1/celda2</TD> </TR> <TR> <TD><img src="obras.gif" width=60 height=53 border=0></TD> <TD>fila2/celda2</TD> </TR> </TABLE>
Tenemos tres tags principales, <TABLE>(inicio y final de
tabla),<TR>(inicio y final de
fila),<TD>(inicio y final de
celda).
Cada uno de los tags admite varios parámetros, vamos a ver los básicos:
<TABLE>
border: Borde
de la tabla, se suele poner a cero o a uno.
width: Anchura de la
tabla.
cellpadding: Separación
entre el contenido de las celdas y el borde de la celda.Por defecto
es igual a 2 y si lo subimos es a 10.
cellspacing: Separación
entre las celdas. Por defecto es igual a 2 y si lo subimos es a 10.
bgcolor: Color
de fondo.
<TD>
width, height: Altura y
anchura de la celda. Vamos a dimensionar la celda superior izquierda.
<TABLE border=1>
<TR> <TD width=100 height=100>fila1/celda1</TD> <TD>fila1/celda2</TD> </TR> <TR> <TD><img src="obras.gif" width=60 height=53 border=0></TD> <TD>fila2/celda2</TD> </TR> </TABLE>
align, valign: Alineamiento
horizontal y vertical del contenido de la celda. Vamos a seguir modificando la
celda superior izquierda.
rowspan: Con este tag le decimos al navegador que esa celda es tan
alta como varias de las otras columnas, es decir, que la celda ocupa varias
filas.
colspan: Con este tag le decimos al navegador que esa celda es tan
ancha como varias de las otras filas, es decir, que la celda ocupa varias
columnas.
<TABLE border=1>
<TR> <TD colspan=2>fila1/celda1</TD> </TR> <TR> <TD><img src="obras.gif" width=60 height=53 border=0></TD> <TD>fila2/celda2</TD> </TR> </TABLE>. IMPORTANTE: El tipo de letra que estamos usando en la página no se respeta dentro de las celdas, lo que nos obliga a tener que fijar el tipo de letra celda por celda muy a menudo. TOMADO DE: http://www.redaragon.com/informatica/htmlb/cap8.asp |
No hay comentarios:
Publicar un comentario