Sobre las tablas HTML en general

Las tablas se agregan al documento mediante la etiqueta <table>

El objetivo principal de las tablas es mostrar datos de forma ordenada, organizado en filas y columnas.

Casos de uso típicos serían un horario, un calendario, un listado de elementos de los que queramos mostrar diversa información y cosas similares, que sean susceptibles de expresarse en forma tabular.

Durante bastante tiempo se emplearon las tablas para organizar la estructura de las páginas al completo, debido a la capacidad que tenemos con ellas de asignar espacios específicos.

En la actualidad, con las nuevas incorporaciones de CSS, ya no es necesario emplear tablas con el propósito de estructurar las páginas e incluso podríamos decir que contraproducente, ya que las tablas no se adaptan fácilmente a los diversos tamaños de pantalla disponibles.

Aún se pueden ver diseños con tablas en emails publicitarios.

Sintaxis de tablas HTML

Para la creación de una tabla intervienen una serie de elementos:

<table>

Es la etiqueta de comienzo de la tabla y requiere la cláusula de cierre. El resto de etiquetas que veremos a continuación deben ir encerradas dentro de esta etiqueta.

<tr>

Es la etiqueta de comienzo de una fila, debe estar dentro de table. Este elemento requiere cláusula de cierre.

<td>

Es la etiqueta de comienzo de una celda, debe estar dentro de tr y requiere cláusula de cierre.

Para recordar los nombres de estos elementos HTML:

<table>
<tr> viene de table row que significa fila.
<td> viene de table data que significa dato.

Ejemplo:

<html>
<head>
</head>
<body>
<table border="1">
    <tr>
        <td>China</td>
        <td>1300 millones</td>
    </tr>
    <tr>
        <td>India</td>
        <td>1080 millones</td>
    </tr>
    <tr>
        <td>Estados Unidos</td>
        <td>295 millones</td>
    </tr>
</table>
</body>
</html>

Primero aparece la apertura de table, donde inicializamos el atributo border con el valor 1. Con ello, estamos haciendo visible un borde alrededor de cada celda y de toda la tabla.

Podemos ponerle a border el valor 0 y veremos que el borde desaparece.

<table border="0">

A continuació