Las tablas pueden parecer difíciles al principio, pero con un poco de paciencia y práctica veras que las cosas no son como parecen. La etiqueta <table> se usa para abrir una tabla. Dentro de esta etiqueta encontraremos otras dos etiquetas típicas, <tr> (lineas de la tabla) y <td> (columnas de la tabla). Pero la mejor explicación es siempre un ejemplo:
html<table border="1">
<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>| Fila 1 Celda 1 | Fila 1 Celda 2 |
| Fila 2 Celda 1 | Fila 2 Celda 2 |
El contenido será ubicado dentro de las filas de la tabla. Una fila representa lo que está entre <td> y </td>. El atributo border establece el ancho del borde la de tabla.
Para formar tablas asimétricas usaremos 'rospawn' para unir más de una linea y 'colspan' para unir más de una columna. Ademas, si queremos que la primera linea sirva como linea de título para las columnas usaremos la etiqueta <th>. Estas serán escritas con letras en negrilla como veremos en el siguiente ejemplo:
html<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan="2">Fila 1 Celda 1</td>
<td>Row 1 Cell 2</td>
<td>Fila 1 Celda 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Linea 2 Celda 3</td>
</tr>
<tr>
<td colspan="3">Linea 3 Celda 1</td>
</tr>
</table>| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Fila 1 Celda 1 | Row 1 Cell 2 | Fila 1 Celda 3 |
| Row 2 Cell 2 | Linea 2 Celda 3 | |
| Linea 3 Celda 1 | ||
Con la ayuda de los atributos 'cellpadding' y 'cellspacing' podemos establecer la distancia entre la celdas. cellspacing determina el tamaño del borde, y cellspadding la distancia entre el marco y el contenido. En el siguiente ejemplo hemos añadido también poco de color.
html<table border="1" cellspacing="10" bgcolor="rgb(0,255,0)">
<tr>
<th>Columna 1</th>
<th>Columna 2</th>
</tr>
<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>Para mostrar mejor la diferencia puedes borrar el borde del ejemplo anterior.
La distancia entre las celdas y el borde será interpretado en pixeles por el navegador. Sabiendo esto, un valor de 10 significa en realidad 10 pixeles. Este atributo no es el único que usa como unidad de medida los pixeles, pero aprenderemos sobre los demás a medida que avancemos en los siguientes tutoriales.