 |
Tutorial De HTML.
TABLAS
Es tal vez la propiedad de HTML que mas se usa en el desarrollo de las paginas Web. Existen muchos Webmasters que usan las tablas para dar forma a su pagina, ya que es muy bueno para poder colocar mini-ventanas dentro de otras ventanas y todo queda mas ordenado y el codigo queda mas "limpio". Hoy por hoy esta forma de "formatear" el aspecto esta en cada vez mas en desuso, esto se debe a la aparicion de otros metodos de programacion como lo son el CSS y el XML. Claro que nada te impide usar este sistema o uno mixto como el que nosotros usamos en la pagina principal del portal Veperu.
Ahora bien, como hago las benditas tablas?
Pues la respuesta se encuentra en 3 simples etiquetas del HTML. Ellas son <table>
que es la primera etiqueta que debes insertar seguida por estas dos <tr> que
crea las filas y <td> que crea las celdas. Las dos ultimas no necesitan
etiquetas de cierre, ya que al crear una nueva fila, el codigo entiende que
cerramos la anterior, lo mismo para las celdas, por fin HTML demuestra cierta
"inteligencia"....
BORDES
El codigo anterior te creara una tabla sin bordes, funcionara perfectamente pero como te digo, no mostrara ningun limite entre celdas. Si lo ququeremos es delimitarlas, lo unico que debemos agregar es lo siguiente: <table border="1"> con lo que la tabla "pintara" los bordes.
| <table border="1"> <tr><td>Fila 1, Celda 1<td>Fila 1, Celda 2 <tr><td>Fila 2, Celda 1<td>Fila 2, Celda 2 </table> |
| Fila 1, Celda 1 | Fila 1, Celda 2 |
| Fila 2, Celda 1 | Fila 2, Celda 2 |
Te recomiendo que seas ordenado para escribir los codigos de las tablas, ya que sino te podras marear y se te hara muy complicado.
COLOR DE FONDO:
Aca tienes 3 opciones, ponerle el mismo color de fondo a toda la tabla, fila por fila o celda por celda. Para ello usaremos la propiedad bgcolor=color en hexadecimal. Aca viene una aclaracion importante, en HTML deberas usar la combinacion de colores en Hexadecimal, es decir con 6 digitos entre 0 y F (es decir podras usar 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F) Para mas informacion puedes ir a la Wikipedia.
Entonces veamos:
| <table border="1" bgcolor=#FFFFFF> <tr><td>Fila 1, Celda 1<td>Fila 1, Celda 2 <tr><td>Fila 2, Celda 1<td>Fila 2, Celda 2 </table> |
Lo que nos da como resultado: Observa que #FFFFFF es el color blanco.
| Fila 1, Celda 1 | Fila 1, Celda 2 |
| Fila 2, Celda 1 | Fila 2, Celda 2 |
| <table border="1"> <tr bgcolor=#FFFFFF><td>Fila 1, Celda 1<td>Fila 1, Celda 2 <tr bgcolor=#FF0000><td>Fila 2, Celda 1<td>Fila 2, Celda 2 </table> |
Lo que nos como resultado:
| Fila 1, Celda 1 | Fila 1, Celda 2 |
| Fila 2, Celda 1 | Fila 2, Celda 2 |
Y Por ultimo:
| <table border="1"> <tr><td bgcolor=#FFFFFF>Fila 1, Celda 1<td bgcolor=#FF0000>Fila 1, Celda 2 <tr><td bgcolor=#FF0000>Fila 2, Celda 1<td bgcolor=#FFFFFF>Fila 2, Celda 2 </table> |
Lo que nos da como resultado
| Fila 1, Celda 1 | Fila 1, Celda 2 |
| Fila 2, Celda 1 | Fila 2, Celda 2 |
CON IMAGENES DE FONDO:
EL sistema es similar, la unica diferencia es que en lugar de lo anterior, usaremos este codigo: background="nombre de la imagen"
| <table border="1" background="grafico.gif"> <tr><td><b>Fila 1, Celda 1</b><td><b>Fila 1, Celda 2</b> <tr><td><b>Fila 2, Celda 1</b><td><b>Fila 2, Celda 2</b> </table> |
Lo que da este resultado: Se que la imagen no es la mejor, pero se entiende no? Puse el Texto en negritas para que se vea mejor
| Fila 1, Celda 1 | Fila 1, Celda 2
|
| Fila 2, Celda 1 | Fila 2, Celda 2
|
RESUMEN:
En este capitulo aprendimos:
- Insertar una Tabla
- Agregarle el borde a la tabla
- Color de fondo en celdas, filas y la tabla completa
- Ponerle una imagen de fondo
El tema de las tablas es muy amplio, aqui solo veras lo basico, pasate por el
Apendice que ire agregando nuevas cosas sobre las tablas y mas
|
<<Anterior |
Siguiente >> |
1- Estructura de un documento en HTML
2- Comandos Básicos
2.1- Formateando texto
2.2- Saltos de Línea
2.3- Formateando Párrafos
2.4- Líneas de separación
3- Listas
3.1 Listas ordenadas
3.2 Listas desordenadas
3.3- Listas de definición.
4- Imágenes
4.1- Texto Alternativo
4.2- Alineándolas
4.3- Enlaces
4.4- Mapas
5- Enlaces
5.1- Enlaces externos
5.2- Enlaces Internos (dentro de un mismo documento)
5.3- Enlaces directos para direcciones de mail
6- Tablas
6.1- Bordes
6.2- Color de fondo a las celdas
6.3- Imagen de fondo
7- Cosillas sueltas
9- Apendice
Este Tutorial esta pensado para gente sin conocimientos previos, si lo lees y te parece muy obvio o sencillo, puedes contactarnos y ampliar los temas.
Tutorial diseñado exclusivamente para el Portal Veperu, el Perú y mas, se prohíbe su reproducción total o parcial salvo que indiques la fuente.
