Tablas en html

Una tabla básica

Las tablas se usan con profusión en las páginas Web, muchas veces debido a que son el único instrumento con el que se cuenta, para asegurarse que las cosas estarán en su sitio. Para definir una tabla se usan las etiquetas:
<TABLE> y </TABLE> son las etiquetas donde está contenida la tabla<TR> y </TR> son las etiquetas que indican el comienzo y fin de una fila (<th> y </th> si es una fila de cabecera)<TD> y </TD> señalan una celda.
La tabla se va definiendo declarando una fila y a continuación las celdas que contiene esa fila, luego otra fila y sus celadas, etc. No es necesario que todas las filas contengan el mismo número de celdas.
La tabla (2x2) más sencilla que podemos hacer es la siguiente

Escribimos:	Visualizamos
<TABLE >      <TR>           <TD>1 </TD> <TD> 2 </TD>      </TR> <TR>           <TD>3 </TD> <TD> 4</TD> </TR> </TABLE>	1 2 3 4

El resultado no es muy brillante, pero vamos a ir viendo las distintas posibilidades que tenemos para mejorarlo.

 Atributos de la etiqueta TABLE

Todos los atributos son opcionales
BORDER="4". Indica el tamaño del borde en píxels, en este caso 4. Si no se indica nada carece de borde
WIDTH="5" o WIDTH="50%". Es el ancho de la tabla, puede especificarse en valor absoluto (5 píxels) o como un porcentaje (50% del ancho disponible)CELLSPACING="2". Es el espacio entre las celdas, por defecto es 2CELLPADDING="5". Es el espacio entre el contenido de las celdas y el borde de las mismas, por defecto es 1
ALIGN=" left", "right", "center". Alinea la tabla a la izquierda , derecha o en el centro.
Otro ejemplo

Escribimos:	Visualizamos
<TABLE BORDER="3" CELLSPACING="5" WIDTH="150">      <TR>           <TD>1 </TD> <TD> 2 </TD>      </TR> <TR>           <TD>3 </TD> <TD> 4</TD> </TR> </TABLE>	1 2 3 4

 Atributos de las etiquetas de fila y celda

Las etiquetas que soportan las filas y las celdas son
WIDTH="30". Ancho de toda la fila o celda. También se puede dar en %ALIGN=" left", "right", "center". Alinea el contenido a la izquierda, derecha o centroVALIGN="top" , "middle" o "bottom". Alinea el contenido verticalmente arriba, en medio o abajoBGCOLOR="#AACCEE". Pone un fondo del color especificado a la celda o filaCOLSPAN=3. Especifica el número de columnas que abarca la filaROWSPAN=2. Especifica el número de filas que abarca la columna
Tercer ejemplo. Fijate en la etiqueta TH, que sustituye a TR, resalta su contenido con negrita, por eso se usa para los títulos

Escribimos:	Visualizamos
<TABLE BORDER="3" CELLSPACING="5" WIDTH="200"> <TH COLSPAN=2 BGCOLOR="#6D8FFF> Este es el título</TH> <TR align="center"> <TD>Esta es la celda de la 1ª fila y de la 1ª columna</TD> <TD> Esta es de la 1ª fila y de la 2ª columna</TD> </TR> <TR BGCOLOR="#6D8FFF> <TD>Esto está con un fondo azul</TD> <TD align="right" valign="bottom">Y esto también</TD> </TR> </TABLE>	Este es el título Esta es la celda de la 1ª fila y de la 1ª columna Esta es de la 1ª fila y de la 2ª columna Esto está con un fondo azul Y esto también

Como ves, se pueden ir modificando los comandos básicos para obtener la tabla que deseemos.
Es frecuente no escribir las etiquetas de cierre de fila y celda, los navegadores presentan la tabla igual y nos ahorramos unas cuantas pulsaciones de teclas.

 Otros usos de las tablas

Como dijimos, las tablas son a veces la mejor manera de asegurarnos que cada cosa esté en su sitio. En esos casos toda la página es una tabla invisible y los distintos elementos aparecen colocados en el sitio exacto mediante el uso de filas, columnas, sus dimensiones y alineamientos, el espacio entre las mismas, etc.
Normalmente el ancho de esas tablas es de alrededor de 600 píxels para que la presentación sea similar en todos los monitores. Hay muchos ejemplos de este uso, sobretodo en las páginas diseñadas por profesionales, observa sino la de El Pais o la de Microsoft
Como inconvenientes señalar que las tablas impiden el deslizamiento uniforme de la ventana, cuando se desplaza con la barra y el tamaño de la página aumenta considerablemente.

Ejemplo en codepen

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <TITLE>Psikoblogo</TITLE>
  </head>

    <BODY>
       <TABLE BORDER="3" CELLSPACING="5" WIDTH="200"> 
              <TH COLSPAN=2 BGCOLOR="#6D8FFF"> Este es el título</TH>
                  <TR align="center"> 
                  <TD>Esta es la celda de la 1ª fila y de la 1ª columna</TD>
                  <TD> Esta es de la 1ª fila y de la 2ª columna</TD>
               </TR>
            <TR BGCOLOR="#6D8FFF">
                  <TD>Esto está con un fondo azul</TD> 
                   <TD align="right" valign="bottom">Y esto también</TD> 
                  </TR>
             </TABLE>
    </BODY>
</HTML>

See the Pen LgtBo by vonbeitthia (@vonbeitthia) on CodePen.