Comience a hacer tablas simples en HTML

Las tablas HTML son, con mucho, una de las mejores declaraciones HTML jamás creadas. ¡La capacidad de formatear una página web con declaraciones de tabla es increíble! ¡Apréndelos, úsalos y ámalos!

Tablas Básicas:

Tomemos nuestra lista de compras que usamos en el tutorial de listas y convirtámosla en una tabla esta vez. Colocaremos los artículos en la primera columna y los precios en la segunda columna.

Este es el código que lo hizo posible. El código real está a la izquierda y la descripción en inglés está a la derecha. La descripción está sangrada para mostrar la "estructura" de la declaración de la tabla.

¿Confundido? Bien, echemos un vistazo a la tabla de arriba. Esta tabla es bastante simple. Construyes tablas de la misma manera que lees un libro; de izquierda a derecha y de arriba a abajo. La tabla comienza con una etiqueta <table> y termina con una etiqueta </table> . Cada fila comienza con una etiqueta <tr> y termina con una etiqueta </tr> . Cada parte de los datos de la tabla comienza con una etiqueta <td> y termina con una etiqueta </td> .

¡Pero eso no es una mesa, dices! ¡No tiene borde! En realidad, es una mesa. Es una tabla sin borde o BORDER=”0″ . Este concepto es muy importante cuando desea utilizar sentencias TABLE para dar formato a sus páginas web. No siempre quieres un borde grueso. Ok, entonces hagamos una tabla con un BORDE esta vez.

La única diferencia entre esta tabla y la anterior es la instrucción <table> que tiene el siguiente aspecto.

<borde de la tabla=”7″>

Bastante fácil, ¿eh? El tamaño del borde se representa en píxeles. Bien, ahora veamos un poco más de CELLSPACING . Ese es el espacio entre las celdas de nuestra tabla. También puede pensar en esto como el grosor de la pared entre las celdas de la tabla.

Eso se ve mucho mejor. ¿Puedes ver la diferencia? Nuevamente, el único cambio está en la instrucción <table> , que tiene el siguiente aspecto.

<borde de la tabla=”7″ espacio entre celdas=”7″>

El CELLSPACING , como el BORDER , también se mide en píxeles. ¡Pero el texto se ve demasiado cerca de las paredes de la mesa, dices! Ok, ok, podemos arreglar eso también. Se llama CELLPADDING . Es el espacio entre el contenido de la celda y los bordes de las paredes de la celda.

Ah, ¿así es como querías? ¿No? Bueno, tuve que exagerar un poco los números, pero eso fue solo para tratar de hacer un punto. Espero que puedas ver las diferencias. La tabla anterior se creó con la instrucción <table> que se muestra a continuación.

<borde de la tabla=”7″ espaciado de celdas=”7″ relleno de celdas=”7″>

Enmarcar imágenes:

Ahora queremos entrar en las cosas más divertidas. Enmarcar imágenes es una excelente manera de mejorar sus imágenes. Hace que parezcan saltar directamente de la página. Aquí está mi obra maestra de 5 segundos.

Obra de arte bastante genial, incluso hace que mi imagen desagradable se vea bien. Aquí está el código que lo hizo.

<borde de la tabla=”7″ alt=””>
<tr>
<td><img src=”imagen.gif”></td>
</tr>
</tabla>

La etiqueta <tr> y las etiquetas </tr> se pueden omitir si lo desea. Seguirá funcionando bien. Los puristas de HTML probablemente argumentarán que estas etiquetas deben estar allí. Si te sientes así, como suelo hacer, entonces úsalos.

O también puede enmarcar sus imágenes con texto como se muestra a continuación.

Netto, eh! El código se muestra a continuación.

<borde de la tabla=”7″ cellpadding=”10″>
<tr>
<td><img src=”imagen.gif” alt=””></td>
<td>¡Qué<br>obra maestra!</td>
</tr>
</tabla>

Tengo una nota más sobre el encuadre de imágenes. Si tiene problemas para centrar su imagen, intente lo siguiente.

<td align=”center”><img src=”image.gif”></td>

Enlaces de encuadre:

También puede poner enlaces dentro de una tabla. De hecho, puede poner toda su página dentro de un montón de comandos de tabla si lo desea y al usar BORDER=”0″ nadie podría decirlo realmente. ¿Por qué querrías hacer eso, te preguntarás? Para formatear imágenes y texto juntos en su página; Piénsalo. Ok, volvamos al encuadre del enlace.

Aquí está el código que lo hizo.

<borde de la tabla=”7″ cellpadding=”10″>
<tr>
<td><a href=”http://www.google.com/”>Google.com</a></td>
<td><a href=”http://www.yahoo.com/”>Yahoo!</a></td>
</tr>
<tr>
<td><a href=”http://www.jjwdesign.com/”>Diseño JJW</a></td>
<td><a href=”http://www.iproundup.com/”>Resumen de IP</a></td>
</tr>
</tabla>

Bueno, espero que haya disfrutado de esta pequeña sección sobre la sentencia <table> . Hay mucho más que puede hacer con la instrucción <table> de lo que es posible en este tutorial. Aún así, espero que esto haya ayudado.

¡Enlace a este tutorial!

¿Encontraste útil este tutorial? Si es así, ayúdame a compartirlo con otros enlazándolo. Simplemente coloque el código HTML a continuación en su propia página web para crear un enlace a este tutorial.