hola taringueros, vamos a seguir con el tutorial 2.
vamos a empezar con las tablas, y vamos ha hacerlo paso a paso.
empezamos con la estruptura de la tabla:
<table></table> = iniciamos tabla y indicamos el fin de la tabla cuando termine.
<tr></tr> = iniciamos fila y indicamos el fin de la fila cuando termine.
<td><td> = iniciamos celda y indicamos cuando termina.
ejemplo basico:
<table border= "1">
<tr>
<td>
esto es la celda de la tabla.
</td>
</tr>
</table>
el resultado seria:
estas son las etiquetas basicas para poder modificar una tabla.
propiedades que sirven para la etiqueta <table> :
border = "1" : con esto conseguimos un borde de 1 que es el borde mas pequeño.
bgcolor = "blue" : ponemos un color de fondo a la tabla.
cellspacing = "1" : con esto conseguimos que las celdas esten separadas, ha mayor numero, mas espacio entre celdas.
cellpadding = "1" : con esto conseguimos un margen entre las letras y la celda, por asi decirlo el espacio entre la celda y el texto o lo que contenga la celda.
width = "100" : con esto le damos un ancho a la tabla.
height = "100" : con esto le damos un alto a la tabla.
align = "center" : para centrar la tabla al centro, tambien se puede utilizar "left"(izquierda), "right"(derecha).
propiedades que sirven para la etiqueta <tr>:
bgcolor = "blue" : ponemos un color de fondo a la fila.
align = "center" : para centrar el texto al centro, tambien se puede utilizar "left"(izquierda), "right"(derecha), "top"(arriba), "bottom"(abajo).
con esto nos vale.
propiedades que nos sirven para la etiqueta <td> :
bgcolor = "blue" : ponemos un color de fondo a la fila.
align = "center" : para centrar el contenido al centro horizontal, tambien se puede utilizar "left"(izquierda), "right"(derecha), "top"(arriba), "bottom"(abajo).
valign = "top" : para centrar el contenido en la parte de arriva, tambien se puede utilizar "bottom"(abajo).
width = "100" : con esto le damos un ancho a la tabla.
height = "100" : con esto le damos un alto a la tabla.
rowspan = "2" : con esto unimos 2 celdas hacia abajo.
colspan = "2" : con esto unimos 2 celdas hacia la derecha.
antes seguir decir que el align, width y height del td tienen mas prioridad que el del tr, esto quiere decir que si en el <tr> decimos align = "center" va a ir todo el texto de las celdas alineado al centro pero aun asi si en algun <td> no queremos que este al centro podemos cambiarlo, esto quiere decir que por defecto iran todo el contenido de todos los <td> centrados, hasta que no definamos lo contrario en los <td>.
bueno, visto esto vamos con unos ejemplos, vamos ha hacerlo todo lo explicado para que lo veamos claro.
bamos ha hacerlo todo ha la vez para no hacer muchos ejemplos y hacerlo de forma facil para que todo se entienda. vamos con el codigo:
<table border= "1">
<tr bgcolor = "blue" align = "right">
<td>
esto es la primera celda fila 1 y el ancho y alto<br>
se forma solodependiendo del largo de la linea y<br>
de los saltos, tambien influye la resolucion de la<br>
pantalla, se producen saltos automaticos si no se<br>
puede ensanchar la celda, centrado a la derecha<br> porque se definio en el la fila y no definmos <br>
en la celda donde queremos situar el contenido<br>
y el fondo el de la fila ya que tampoco definimos<br>
en la celda que fondo queremos para la misma.
</td>
<td width = "500" align = "center">
esto es la segunda celda fila 1, y esta alineado al centro<br>
con un ancho de 500, el color de fondo es el de la fila.
</td>
<td height = "500" bgcolor = "green" valign = "bottom" align = "left">
esto es la tercera celda fila 1, el fondo es el definido,<br>
la altura es 500 la definida, y esta centrada verticalmente<br>
abajo y horizontalmente a la izquierdo que es lo definido.
</td>
</tr>
<tr>
<td>
celda 1 fila 2, la anchura se ajusta<br>
automaticamente a la de arriva a no<br>
ser que se defina que se quiere mas<br>
anchura, todas las celdas tienen <br>
verticalmente tienen que tener la<br>
misma anchura, y se establecera la<br>
que mas ancha sea.
</td>
<td>
celda 2 fila 2
</td>
<td>
celda 3 fila 2
</td>
</tr>
<tr>
<td colspan = "3">
esto es la la celda expandida horizontalmente a 2 celdas mas, se pone 3 porque tambien se<br>
cuenta la misma.
</td>
</tr>
<tr>
<td rowspan = "3">
celda expandida hacia abajo a 2 celdas mas.
</td>
<td>
celda 2 fila 4,se dice que es la celda 2 porque la celda 1 esta<br>
unida a otras 2 por el rowspan.
</td>
<td>
celda 3 fila 4
</td>
</tr>
<tr>
<td>
celda 2 fila 5, se dice que es la celda 2 porque la celda 1 esta<br>
unida a otras 2 por el rowspan.
</td>
<td>
celda 3 fila 5
</td>
</tr>
<tr>
<td>
celda 2 fila 6,se dice que es la celda 2 porque la celda 1 esta<br>
unida a otras 2 por el rowspan.
</td>
<td>
celda 3 fila 6
</td>
</tr>
</table>
peguenlo en el notepad++ y guardenlo y abranlo con un navegador y vean el resultado.
aqui unas imagenes:
una vez visto esto vamos a ver un poco mas, vamos ha meter dentro de una celda una foto, para ello utilizamos esta etiqueta:
<img>
y para ella tenemos que definir donde esta nuestra imagen y se hace de la siguiente manera:
<img src = "ruta_de_la_imagen">
si nuestra foto se encuentra en la misma carpeta se ara asi:
<img src = "foto.jpg">
siempre poniendo la extension de la imagen, y tambien podemos hacerlo con una direccion url:
<img src = "http://ruta_de_la_imagen/foto.jpg">
y podemos darle un tataño a la imagen con :
<img src = "foto.jpg" width = "100" height = "100">
veamos un ejemplo:
<table border= "1" align = "center">
<tr>
<td align = "center" width = "500" height = "500">
<img src = "foto.jpg" width "250" height = "300">
</td>
</tr>
</table>
bueno amigos creo que por hoy ya hemos aprendido un poco mas, hasta el proximo tutorial. espero aberos ayudado un poco.