9 - Tabla

El objetivo fundamental de las tablas es mostrar una serie de datos en forma ordenada y organizada en filas y columnas.

Algo importante es que no utilizaremos las tablas para organizar la página completa (esto se hace en la actualidad mediante CSS, es decir hojas de estilo. Una vez que avance en este curso puede visitar CSS)

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

<table> Es la marca de comienzo de la tabla.
<tr> Es la marca de comienzo de una fila. Esta marca debe estar dentro del elemento table.
<td> Es la marca de comienzo de una celda. Esta marca debe estar dentro del elemento tr.

Para recordar el nombre de estos elementos HTML:

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

La mejor forma de entender y dominar este concepto es implementar tablas y ver su resultado dentro del navegador. Crearemos una tabla que muestre los nombre de países en una columna y su cantidad de habitantes en otra:

<!DOCTYPE html>
<html>
    <head>
        <title>Título de la página</title>
        <meta charset="UTF-8">
    </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>

El resultado en el navegador es:

Lo primero que aparece es la apertura del elemento table, donde iniciamos la propiedad border con el valor 1, con esto el contorno de cada celda será visible (prueba asignar el valor cero y otros valores superiores a 1)