Cómo hacer tablas en HTML

Las tablas HTML constituyen un elemento muy importante para tabular datos dentro de páginas web. Originalmente, se utilizaban para mostrar, de manera ordenada y accesible por medio de filas y columnas, los datos numéricos provenientes de las hojas de cálculo. Pero con el paso del tiempo, html las ha dotado con muchas más posibilidades, tanto para personalizar su aspecto, como en el uso que se hace de ellas.

En este pequeño tutorial introductorio al uso de tablas en html te indicaremos los pasos para que puedas agregar, de manera sencilla, tablas en tu página web.

Pasos para crear una tabla básica en HTML

1. Lo primero que se debe hacer para crear una tabla, es colocar la etiqueta <table> junto con su etiqueta de cierre </table> dentro del documento HTML. Con ello se estará definiendo una nueva tabla. 

   <table>
           </table>

    
2. Después, se podrán ir añadiendo cada una de las filas dentro de la tabla, haciendo uso de las etiquetas <tr> y </tr>. Al mismo tiempo, se podrán ir insertando las columnas dentro de cada fila empleando las etiquetas <td> y </td>. Es importante mencionar que los datos se colocarán dentro las columnas (<td> Dato </td>). 

   Por ejemplo, la siguiente es una tabla de 3 filas por 2 columnas: 

   <table>
                  <tr> <!--  Fila 1   -->
                         <td>Personas</td> <!--  Columna 1 de la Fila 1  -->
                         <td>Cantidad</td> <!--  Columna 2 de la Fila 1  -->
                  </tr>
                  <tr> <!--  Fila 2   -->
                         <td>Mujeres</td> <!--  Columna 1 de la Fila 2  -->
                         <td>18</td> <!--  Columna 2 de la Fila 2  -->
                   </tr>
                   <tr> <!--  Fila 3   -->
                 	  <td>Hombres</td> <!--  Columna 1 de la Fila 3  -->
                         <td>17</td> <!--  Columna 2 de la Fila 3  -->
                  </tr>
           </table>

   Cabe destacar que, cuando se crea una tabla, no es necesario definir desde el principio el número de filas y columnas que la integran, debido a que en cualquier momento se podrán eliminar o añadir a la tabla. 

3. Una vez que se tiene la estructura básica de la tabla, se pueden añadir una serie de atributos para mejorar su diseño. La etiqueta <table> dispone de numerosos atributos que permiten personalizar la tabla (Aunque en modos un poco más avanzados veremos que todos esos atributos se pueden sustituir con CSS). Algunos de ellos son: BORDER: Utilizado para añadir un borde en píxeles a la tabla. WIDTH: Se utiliza para darle un ancho a la tabla, ya sea como un tamaño fijo en píxeles, o bien como un porcentaje del tamaño de la ventana del navegador. CELLSPACING: Agrega un espacio de separación entre celdas, en pixeles.

   <table border="1" cellspacing=0 width="300">
                  <tr>
                        <td>Personas</td>
                        <td>Cantidad</td>
                 </tr>
                 <tr>
                        <td>Mujeres</td>
                        <td>18</td>
                  </tr>
                  <tr>
                         <td>Hombres</td>
                         <td>17</td>
                  </tr>
           </table>