Las tablas HTML permiten organizar y presentar información de manera ordenada en filas y columnas. Se definen con las etiquetas <table> y </table> y cada fila con <tr> y </tr>. Las celdas se definen con <td> o <th> y pueden unificarse vertical u horizontalmente con rowspan y colspan. Las tablas pueden formatearse usando atributos como border, align y bgcolor.

1. TABLAS EN HTMLTABLAS EN HTMLLas tablas nos permite representar y ordenar cualquier elemento de nuestra presentación en diferentes filas y columnas de modo que podamos resumir grandes cantidades de información de una manera que puede representarse rápida y fácilmente.Estas tablas pueden ser utilizadas principalmente para listar datos como agendas, resultados y otros datos de una forma organizada.En efecto, una tabla nos permite organizar y distribuir los espacios de la manera más optima. como los periódicos, prefijar los tamaños ocupados por distintas secciones de la página .

2. COMO HACER TABLAS EN HTMPara empezar, nada más sencillo que por el principio: las tablas son definidas por las etiquetas &lt;table&gt; y &lt;/table&gt;. dentro de estas dos etiquetas colocaremos todas las otras etiquetas, textos e imágenes que darán forma y contenido a la tabla. Cada fila de la tabla se indica mediante las tags &lt;tr&gt;.....&lt;/tr&gt;. Las tags &lt;th&gt; y &lt;td&gt; con sus correspondientes tags de cierre, indican las filas individuales dentro de cada fila. Las tags &lt;th&gt;.....&lt;/th&gt; indican que se trata de celdas que sirven como encabezado de tabla y suelen visualizarse en negrita. Las tags &lt;td&gt;.....&lt;/td&gt; indican que se trata de celdas comunes. Las tablas son descritas por líneas de izquierda a derecha. Cada una de estas líneas es definida por otra etiqueta y su cierre: &lt;tr&gt; y &lt;/tr&gt; Asimismo, dentro de cada línea, habrá diferentes celdas. Cada una de estas celdas será definida por otro par de etiquetas: &lt;td&gt; y &lt;/td&gt;. Dentro de estas etiquetas será donde coloquemos nuestro contenido.

3. TABLAS SIMPLESUna tabla HTML puede ser considerada de manera simple como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Las tablas, así como toda estructura en documentos HTML, son definidas usando tags. Una tabla simple puede ser insertada en un documento HTML usando tres tags: el tag HTML table (principal contenedor), el tag HTML tr (fila contenedora) y el tag HTML td (celda simple).Ten en cuenta que las celdas vacías igual deben ser declaradas utilizando sus respectivos tags para lograr correctitud en el código. Cuando el contenido de una celda debe ser vacío, deberías usar siempre un espacio en blanco (&nbsp;) en su lugar.

4. EJEMPLOCódigo Visualización &lt;table border=&quot;1&quot; summary=&quot;Ejemplo de tabla simple.“&lt;tr&gt;&lt;td&gt;Celda 1&lt;/td&gt;&lt;td&gt;Celda 2&lt;/td&gt; &lt;td&gt;Celda 3&lt;/td&gt; &lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Celda 4&lt;/td&gt;&lt;td&gt;Celda 5&lt;/td&gt;&lt;td&gt;Celda 6&lt;/td&gt;&lt;/tr&gt;EJEMPLO

5. TIPOS DE CELDASDos tipos de celda pueden ser definidos en una tabla HTML. Una de ellas es la celda simple (tag HTML td) anteriormente utilizada en el ejemplo de &quot;tabla simple&quot;, y la otra es un tipo de celda especial (tag HTML th) que contiene información de encabezado para todas las celdas en la columna (pertenecientes al mismo grupo horizontal). Los navegadores pueden graficar el contenido de las celdas de encabezado en una manera especial (usualmente, texto centrado y en negrita). Este tipo de celda es comúnmente encontrado en el encabezado de una tabla.

6. EJEMPLO Código Visualización &lt;table border=&quot;1&quot; summary=&quot;Ejemplo de tabla simple con celdas de encabezado.&quot;&gt;&lt;tr&gt;&lt;th&gt;Columna 1&lt;/th&gt;&lt;th&gt;Columna 2&lt;/th&gt;&lt;th&gt;Columna 3&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Celda 1&lt;/td&gt;&lt;td&gt;Celda 2&lt;/td&gt;&lt;td&gt;Celda 3&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Celda 4&lt;/td&gt;&lt;td&gt;Celda 5&lt;/td&gt;&lt;td&gt;Celda 6&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; EJEMPLO

7. UNIFICANDO CELDASPara algunas tablas puedes necesitar unificar dos o más celdas en una sola que tomará el lugar de aquellas afectadas. Estas unificaciones pueden lograrse mediante los atributos &quot;rowspan&quot; (para unificar verticalmente) y &quot;colspan&quot; (para unificar horizontalmente), ambos disponibles para celdas (tag HTML td y tag HTML th).

8. EJEMPLOEJEMPLOCódigo visualización &lt;table border=&quot;1&quot; summary=&quot;Ejemplo de tabla simple con unificaci&oacute;n de celdas de una fila.&quot;&gt;&lt;tr&gt;&lt;td&gt;Campo 1&lt;/td&gt;&lt;td&gt;Campo 2&lt;/td&gt;&lt;td&gt;Campo 3&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td colspan=&quot;2&quot;&gt;Campos 4 y 5&lt;/td&gt;&lt;td&gt;Campo 6&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Campo 7&lt;/td&gt;&lt;td&gt;Campo 8&lt;/td&gt;&lt;td&gt;Campo 9&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;

9. Observa en el ejemplo anterior como una definición de celda unificando dos celdas, es el equivalente unificado de dos definiciones de celda simple. Esto también funciona para unificar verticalmente con una pequeña diferencia debida a la naturaleza de las tablas HTML. Al unificar celdas verticalmente, las definiciones de celda en la columna afectada deberán ser omitidas. Observa el siguiente ejemplo, donde el campo 1, 4 y 7 son unificadas:Código Visualización &lt;table border=&quot;1&quot; summary=&quot;Ejemplo de tabla simple con uificaci&oacute;n de celdas de una columna.&quot;&gt;&lt;tr&gt;&lt;td rowspan=&quot;3&quot;&gt;Campo unificado&lt;/td&gt;&lt;td&gt;Campo 2&lt;/td&gt;&lt;td&gt;Campo 3&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Campo 5&lt;/td&gt;&lt;td&gt;Campo 6&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Campo 8&lt;/td&gt;&lt;td&gt;Campo 9&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;

10. ATRIBUTOSAdemás de los atributos específicos de cada celda o línea, las tablas pueden ser adicionalmente formateadas a partir de los atributos que nos ofrece la propia etiqueta &lt;table&gt;. Los atributos principales son: align Alinea horizontalmente la tabla con respecto a su entorno.background Nos permite colocar un fondo para la tabla a partir de un enlace a una imagen. bgcolor Da color de fondo a la tabla. border Define el número de pixels del borde principal. bordercolor Define el color del borde. cellpadding Define, en pixels, el espacio entre los bordes de la celda y el contenido de la misma. cellspacing Define el espacio entre los bordes (en pixels).height Define la altura de la tabla en pixels o porcentaje.width Define la anchura de la tabla en pixels o porcentaje.

11. EJEMPLOEjemplo de tabla centrada Este sería un texto cualquiera colocado al lado de una tabla centrada Ejemplo de tabla alineada a la derecha Para que se vea el efecto de alineado a la tabla debemos colocar un texto al lado y el texto rodeará la tabla, igual que ocurría con las imágenes alineadas a un lado. EJEMPLO

12. Ejemplo de tabla alineada a la izquierda Para que se vea el efecto de alineado a la tabla debemos colocar un texto al lado y el texto rodeará la tabla, igual que ocurría con las imágenes alineadas a un lado.