¿Cómo insertar una imagen en una tabla en HTML?

Si eres un autodidacta de códigos HTML, y ya sabes lo más básico, entonces el siguiente paso es saber cómo insertar una imagen en una tabla en html. Con esta técnica tendrás diseños más interesantes, y podrás hacerte destacar entre los demás blog de la Internet.

Cómo insertar una imagen en una tabla en HTML

Como sabemos los códigos HTML forman la estructura y el diseño de todo sitio web, obviamente existen múltiples códigos que añaden un toque adicional como el lenguaje CSS y Javascript. Sin embargo, al saber html podrás elaborar una página desde cero, sin embargo es un trabajo difícil que requiere de conocimiento y experiencia.

Por ese motivo es que existen plantillas y temas, que fácilmente pueden ajustarse sin necesidad de saber un solo código. ¿Pero qué pasa si deseas aprender por cuenta propia? fácilmente puedes recurrir a tutoriales en línea, sin embargo si deseas aprender algo puntual, como por ejemplo cómo subir una página HTML a internet o cómo insertar una imagen en una tabla en html, entonces esta guía es para ti.

Vamos a aprender no solo a insertar imágenes en tablas, también otros formatos multimedia como vídeos o plugin. ¡Quédate con nosotros y averigualo a continuación!

Imágenes

Para aprender a colocar imágenes en una tabla html, primero necesitas tomar una lección básica sobre las imágenes en código html.

Teniendo eso en cuenta, lo primero que debes saber es que para insertar una imagen en código html necesitas de la etiqueta <img>. Sin embargo, necesitamos añadir un atributo para que el servidor ubique dónde está la imagen. Para ello, los códigos serían los siguientes:

<img src=»ubicación»

Cuando establecemos «src», en inglés significa Search, que en español sería la búsqueda que realiza el navegador para encontrar la imagen insertada.

Toma en cuenta que esta etiqueta no se cierra, como normalmente se hace cuando se realiza un atributo, por ese motivo no cierres el código </IMG>.

Ahora bien, aclarado ese punto vamos a enfocarnos en los distintos formatos gráficos que pueden utilizarse en los códigos HTML. Ellos son los Gifs, JPEG y PNG; y como dijimos vamos a mostrar los distintos atributos que pueden añadirse dentro de la etiqueta <IMG>:

Alt

El atributo alt se le considera un atributo en código HTML para texto, y se utiliza para detallar imágenes en el pie de página de la misma. Se recomienda que el atributo se coloque siempre, ya que no se sabe cuando un navegador no pueda mostrar la imagen y la etiqueta ALT refleja a cambio un texto alternativo como solución.

Este tipo de atributo es la opción perfecta si deseas optimizar el contenido de tu sitio web, con eso en mente, un ejemplo del uso correcto de este atributo sería el siguiente:

<IMG SRC=»immagine.gif» ALT=»Obra de R. Tolkien»>

Width y height

Seguramente debes estar familiarizado con esta etiqueta, o por lo menos saber de qué se trata. Como indica su nombre, los atributos width y height especifican las medidas exactas de una imagen, tanto su anchura como la altura, y se consideran importantes porque ellas establecen un límite del tamaño ante los navegadores.

Si esto último no se hace, se corre el riesgo de que la calidad de una imagen se vea alterada, ya que el navegador se encargaría de mostrar una imagen de acuerdo a sus ajustes.

Teniendo eso en cuenta, la etiqueta para especificar este atributo sería el siguiente:

<IMG SRC=»immagine.gif» WIDTH=178 HEIGHT=180 ALT=»Obra de R. Tolkien»>

Como se observa, estamos utilizando los comando WIDTH y HEIGHT con especificaciones en cada una de ellas, que significan el ancho expresado en píxel y el alto, respectivamente.

Border

Border en español significa borde, y en este caso particular el borde que se establece en una imagen. Obviamente los valores que se agregan junto a este comando, van establecidos en número pero expresados en píxel.

Píxel si recordamos bien es una unidad muy pequeña que representa la suma de un todo, es decir, un píxel determina una unidad de color que al unirlo en gran cantidad forma de una imagen digital completa.

Ahora bien, la etiqueta que generalmente se usa para este tipo de comando sería el siguiente:

<IMG SRC=»immagine.gif» WIDTH=178 HEIGHT=180 BORDER=2 ALT=»Obra de R. Tolkien»>

Si establecemos un valor cero para este comando, el navegador lo que hará es mostrar una imagen recuadrada. En el caso que no desees ningún borde, lo mejos es omitir el comando dentro de la etiqueta IMG.

Hspace y vspace

Ambos atributos representan la separación que tiene una imagen, con los objetos que tiene a su alrededor. Sus valores se establecen en píxel, y su definición sería la siguiente:

• Hspace: Es la distancia que existe en los lados derechos e izquierdo de la imagen insertada, con los objetos que tiene a su alrededor, como por ejemplo texto, imagen, etc. 
• Vspace: Es la distancia inferior y superior de una imagen, y lo separa de un texto, foto, etc.

Ahora bien, el contexto correcto para usar este comando sería el siguiente:

<IMG SRC=»immagine.gif» WIDTH=178 HEIGHT=180 BORDER=2 VSPACE=3 HSPACE=3 ALT=»Obra de R. Tolkien»>

Align

Este atributo establece la ubicación del imagen, pero con respecto al texto de un artículo, lo que significa que con ella puedes establecer si la quieres previo o posterior a un bloque de texto. No obstante, toma en cuenta que existen distintos tipos de comandos para esta etiqueta, que serían las siguientes:

• ALIGN=top: Es un atributo para alinear el texto por encima de una imagen.
• ALIGN=middle: Es una alineación central, lo que significa que el texto está a ambos lados de la imagen.
• ALIGN=bottom: Es la alineación inferior, lo que significa que la imagen está por encima del texto.
• ALIGN=left: Es cuando la imagen se alinea a la izquierdo de la pantalla, y por tanto el texto se ubica posterior a él.
• ALIGN=right: Es lo contrario al caso anterior, la imagen se establece en el lado derecho de la pantalla, y por tanto el texto se ubica en el lado izquierdo de la pantalla.

Uso de imágenes como enlaces

Las imágenes pueden ser usadas como puentes para conectar una página con otra, y es añadiendo la etiqueta <A HREF> a la siguiente estructura:

Imágenes como fondo de un documento

Existen efectos como BACKGROUND, usados para que las imágenes se integren como fondo de un documento en código HTML. Sin embargo cuando recurres a la etiqueta <BODY>, las imágenes no destacarán en demasía ya que ocupan en sí menos espacio que la propia área del documento.

Sin embargo, es fundamental elegir una imagen que no impida la lectura del documento, por ese motivo se debe seleccionar colores ligeros para impedir la legibilidad del texto. Un ejemplo de este tipo de estructura sería la siguiente:

• <html>
• <head>
• <title>ejemplo</title>
• <head>
• <body>
• <body background=»nubes11.jpg»>
• <center>
• </body>
• <body>
• <center>
• Título del texto
• </center>
• <p><i><b>Texto</p></b>
• <align=»left»>
• <p><b>Texto</p></b>
• <align=»left»>
• <center>
• <img src=»ejemplo.jpg»>
• </center>

Tablas

Otro recurso que puede ayudarte a mejorar el aspecto de tu web, son las tablas en HTML, una herramienta que organiza la información que piensas mostrar en tu blog.

Sin embargo las tablas no sirven con este único propósito, con la llegada de los archivos multimedia muchos empezaron a configurar sus diseños para permitir que contenidos gráficos se alinearan con el texto, para presentar de esta forma estructuras más complejas y dinámicas. En ese sentido, en este apartado vamos a enseñarles cómo insertar una imagen en una tabla en html, además de enlaces y otros formatos más.

Estructura

Para entender las tablas, primero debes conocer los aspecto básicos de él: Una tabla se conforma por filas, columnas y celdas.

Las filas son los espacios que vemos en posición horizontal, y las columnas en posición vertical, en cambio las celdas son los espacios creados por la intersección de ambas estructuras.

Ahora desde el punto de vista de un navegador, una tabla debe estar definida con las dimensiones y valores correctos, debe establecerse el inicio y el final de la misma, mediante la etiqueta <TABLE> y </TABLE> respectivamente.

Luego, es necesario especificar el número de filas que tendrá la tabla, y para ello recurrimos a la etiqueta <TR>. Recordemos, que las etiquetas deben cerrarse con el símbolo «/» cuando no se trate del cuerpo del contenido. Además, cada etiqueta representa una sola fila de tu tabla, por ese motivo se establece la misma cantidad de etiquetas como el número de filas.

En ese mismo sentido, también se debe especificar la cantidad de celdas que habrá en cada una de ellas, siempre tomando en cuenta que debe tener la misma cantidad de columnas como de celdas; para ello se usa las etiquetas <TD> y </TD>.

La estructura general en HTML sería la siguiente:

<TABLE>

<TR>
<TD> celda(1,1) </TD>
<TD> celda(1,2) </TD>
<TD> celda(1,3) </TD>
</TR>
<TR>
<TD> celda(2,1) </TD>
<TD> celda(2,2) </TD>
<TD> celda(2,3) </TD>
</TR>
<TR>
<TD> celda(3,1) </TD>
<TD> celda(3,2) </TD>
<TD> celda(3,3) </TD>
</TR>
</TABLE>

Es necesario destacar y afirmar, que el número de celdas debe ser parejo en cada fila que vayas a colocar, para que de esta forma se generen el mismo número de columnas.

Ahora, la creación de la tabla depende del establecimiento de las filas y las columnas, no obstante, cómo debe mostrarse depende de otro factor.

Para ello, lo primero que se necesita es que el diseño de la tabla en HTML debe estar completo, toma en cuenta que las tablas excesivamente grandes toman más tiempo de carga, y por ende aumenta la posibilidad de sufrir espacios no deseados en ella.

Para que esto no suceda, se necesita del atributo COLGROUP, sin embargo se puede implementar es a partir de la nueva versión HTML 4.0

Añadiendo enlaces a las tablas

Si deseas añadir enlaces a una tabla, entonces debes saber que existen dos tipos diferentes:

• A la propia celda: Cuando quieras añadir un enlace en la tabla como tal, entonces se debe establecer la etiqueta <a href=»URL_del_enlace»> antes del comando <td>. Luego, debes cerrar la etiqueta tanto de fin de enlace </a> como de celda </td>.

• Al contenido de la celda: Este es el caso contrario, aquí los enlaces se establecen en el contenido de la celda, y para ello ubicamos la etiqueta <a href=»URL_del_enlace»> después de <td>. Ahora, para cerrar la función debemos colocar primero la etiqueta </a> y luego </td>.

Dimensionando la tabla

Las tablas deben estar especificadas con dimensiones, porque así los navegadores sabrán el tamaño y la forma de la tabla. Por ese motivo, existen distintos comandos que podemos usar para establecer la separación entre el texto y los marcos, así como el tamaño de las celdas en sí.

Sin embargo, los comandos son iguales a los que mencionamos anteriormente, la diferencia es que aquí se estarían usando para una tabla y no para una imagen. Con eso en mente, las características para establecer las dimensiones de una tabla, serían las siguientes:

Primero tenemos la etiqueta Cellspacing, que es para poner distancia entre celdas, tanto arriba como abajo. Luego tenemos height, que se establece como <td> y que se usa para las celdas, aunque de igual forma afectará a las filas de la tabla.

Luego tenemos la anchura (Width), aunque estos valores son asumidos por los propios navegadores, sin embargo es necesario especificar de igual forma para evitar cualquier error de lectura.

Con ambos parámetros, libremente podemos ajustar la tabla para que tenga las dimensiones que deseas, pero toma en cuenta que por defecto el ancho de las celdas se adaptan al mismo ancho del texto.

Con eso claro, si deseas agregar separación agregamos la etiqueta Width, como en el siguiente ejemplo:

<table width=»60%» cellspacing=»5″ cellpadding=»0″>
<tr>
<td>Fila 1, celda 1</td>
<td>Fila 1, celda 2</td>
</tr>
<tr>
<td>Fila 2, celda 1</td>
<td>Fila 2, celda 2</td>
</tr>
</table>

En el caso que desees espacio tanto arriba como abajo de la celda, entonces aplicamos ambas de Cellspacing y cellpadding como indica el siguiente ejemplo:

<table width=»80%» cellspacing=»0″ cellpadding=»5″>
<tr>
<td width=»80%» height=»70″>Fila 1, celda 1</td>
<td width=»20%» height=»70″>Fila 1, celda 2</td>
</tr>
<tr>
<td width=»80%»>Fila 2, celda 1</td>
<td width=»20%»>Fila 2, celda 2</td>
</tr>
</table>

Posicionamiento del texto

A pesar de que ya tenemos los códigos necesarios para crear una tabla, necesitamos de otros parámetros como por ejemplo la posición del texto dentro de cada celda, para dar por finalizado este tema. Para ello, vas a añadir un nuevo comando de alineación a la etiqueta tag <td> del ejemplo anterior:

• Align: Significa alineación horizontal, y los valores que adquiere pueden ser left, center y right.
• Valign: Es alineación vertical, y sus valores representan la ubican del texto dentro de la celda. Ellos serían: top, middle, botton y baseline.

Ahora, para entender dónde se establecen estos comandos vamos a presentar el mismo ejemplo anterior, aunque estableciendo el texto ubicado en la parte de abajo de la celda, y con alineación right:

<table width=»80%» cellspacing=»0″ cellpadding=»5″>
<tr>
<td width=»80%» height=»70″ align=»right» valign=»bottom»>Fila 1, celda 1</td>
<td width=»20%» height=»70″>Fila 1, celda 2</td>
</tr>
<tr>
<td width=»80%»>Fila 2, celda 1</td>
<td width=»20%»>Fila 2, celda 2</td>
</tr>
</table>

Bordes y colores

Lo último que toca para aprender de las tablas, aunque recuerda que sólo estamos mencionando los aspectos básicos de ella, es el aspecto visual.

Para ello, lo primero es establecer la anchura de los marcos de la tabla, para esto usamos el comando «border» en la etiqueta <table>, como lo establecimos en un ejemplo anterior. Sin embargo, este comando aplica la anchura para todo el marco, y debe establecerse en un valor píxel, de lo contrario el marco no se verá.

Si deseas establecer colores en el borde, entonces debes usar el comando bordercolor en la etiqueta <td>. Toma en cuenta que los valores de este comando se establece por medio de códigos y los nombres de colores que ya estén establecidos por defecto en inglés.

Pero si deseas es establecer colores de fondo para cada celda de tu tabla, entonces necesitas usar el comando bgcolor en la etiqueta tag <td>.

Con todas estas directrices, y tomando los códigos html del ejemplo anterior, los códigos quedarían de la siguiente manera:

<table width=»80%» cellspacing=»0″ cellpadding=»5″ border=»4″>
<tr>
<td width=»80%» height=»70″ align=»right» valign=»bottom»>Fila 1, celda 1</td>
<td width=»20%» height=»70″>Fila 1, celda 2</td>
</tr>
<tr>
<td width=»80%» bgcolor=»#FFCCCC»>Fila 2, celda 1</td>
<td width=»20%» bordercolor=»red»>Fila 2, celda 2</td>
</tr>
</table>

Ahora, hasta ahora hemos mostrado texto y enlaces, pero ¿qué pasa con las imágenes? cualquier elemento puede ser posicionado dentro de una tabla, solo se debe añadir la etiqueta correcta en la ubicación indicada. En el caso de las imágenes, que es lo que nos interesa, lo único que se necesita es establecer el  comando IMG dentro de la propia etiqueta de celda, como por ejemplo:

<Table border=2>
<TR><TD><img src=»imagenes/babe.gif»></TD></TR>
</TABLE>

Multimedia

En este punto ya debes saber cómo crear códigos para añadir imágenes, enlaces y tablas en una página HTML, sin embargo no hemos mencionado los demás formatos multimedia, y en este apartado lo vamos a mencionar.

Para ello, comenzamos con la etiqueta <bgsound> que significa sonido de fondo. Con ella puedes establecer música si lo deseas, sin embargo hacerlo puede ser contraproducente ya que puede ralentizar la carga de la página, y por ende disminuir el tráfico web de la página.

Si bien es cierto que puede parecer un recurso tentador, realmente es poco práctico ya que estadísticamente se sabe que la mayoría de los usuarios navegan con su propia música personal, entonces establecer audios puede tener más un efecto negativo que positivo.

Ahora bien, esto no siempre es así, a veces los archivos multimedia son funcionales para blogs que quieran compartir información útil y educativa. Si ese es tu caso, entonces busca los formatos de audio menos pesados pero que entregue contenido de calidad.

Con eso aclarado, a la etiqueta de sonido se le debe añadir una ubicación y el nombre del archivo, y para ello usamos el atributo src. Además, si deseas reproducir el audio cierta cantidad de veces, entonces necesitas agregar un atributo loop, pero si quieres que se suene continuamente entonces debes establecer un valor de «infinite» o «-1».

Tomando en cuenta todo lo anterior, la estructura html quedaría de la siguiente manera:

<bgsound src=»varios/audio.mid» loop=»-1″>

Ahora en cuanto a la ubicación de la estructura, puede establecerse en cualquier lugar de tu preferencia, pero lo más aconsejable es luego de la etiqueta <body>.

Vídeo y audio <embed>

En ciertas oportunidades se quiere agregar un vídeo al blog, sin embargo ellos ocupan bastante espacio dentro del servidor, por ende es recomendable precisar el orden en cómo quieres que el navegador cargue tu blog. Si no sabes cómo, te aconsejamos investigar un poco sobre cómo se elimina los recursos que bloqueen el renderizado.

Ahora bien, los formatos que generalmente se usan son los siguientes: AVI, el MPEG y el MOV. En cuanto a la etiqueta, usamos <embed>, además también debemos establecer la ruta y el nombre, y para ello usamos el atributo src que definimos anteriormente.

Si deseas añadir la reproducción, y la constancia, solo necesitas agregar los atributos autostart y loop, respectivamente. Pero toma en cuenta que los valores para ambos atributos son: true o false.

En cuanto a las dimensiones, usamos los mismos atributos width y height. Y eso es todo, con estos atributos los códigos HTML quedarían de la siguiente manera:

<embed src=»varios/cotorra.avi» autostart=»false» loop=»true»>

Plug-in’s

Seguramente sabes lo qué es un plugin y lo que hace dentro de una web, sin embargo si deseas saber cómo añadirlo dentro de códigos HTML de tu web, debes saber los siguientes aspectos:

Como los plugins son archivos que no son estándar, es decir que no existe un modelo o etiqueta que pueda definirlo, ya que existen diversas aplicaciones con múltiples usos, se podría decir que es imposible agregar por código hmtl un plugin a tu web.

¿Entonces cómo se agregan a una web? descargándolo e instalándolo directamente en una web, obviamente si eres una persona experta y tienes el conocimiento, podrías aplicar las siguientes condiciones para lograrlo:

• Posees un navegador Netscape en su versión 2.0;
• Y tienes el plugin y tienes un fichero de sonido en formato .wav como referencia, y que se complemente con dicha extensión, entonces es posible.

Sin embargo, insertar plugins en una web son temas muy avanzados, y se necesita primero de experiencia y conocimiento para adecuarlo correctamente en tu blog. Con eso aclarado, si deseas saber más sobre códigos HTML te dejamos el siguiente artículo:

Prácticas HTML