Crear Tablas con HTML

Para crear las tablas será necesario usar una nueva etiqueta: TABLE, que significa, en inglés, tabla. Esta etiqueta consta de una etiqueta de inicio, <TABLE> , e etiqueta de fin, </TABLE> . Entre ambas debemos introducir otras tres etiquetas, que definirán la estructura de la tabla. Estas etiquetas son:

<TR> : La etiqueta Table Row nos permitirá insertar filas en la tabla. La tabla tendrá tantas filas como apariciones de esta etiqueta haya entre <TABLE> y </TABLE>.

<TH> : Este es el primero de los dos tipos de celdas existentes en el lenguaje HTML. El nombre de la etiqueta proviene del inglés Table Header, encabezado de tabla.

<TD> : Este es el segundo tipo de celda de las tablas HTML. El nombre de la etiqueta, Table Data(Datos de tabla), nos induce a pensar que su función será introducir todos los datos que queramos en las celdas definidas de esta forma.

Pasos para crear tablas

En primer lugar ponemos las etiquetas de inicio y fin dejando un espacio entre ellas para insertar posteriormente el resto de etiquetas:

   <TABLE>

    ...Otras etiquetas...

    </TABLE>

 

A continuación insertamos las filas. La tabla que nos hemos propuesto crear consta de dos filas. Por tanto debemos usar la etiqueta TR dos veces.

   <TABLE>

    

      <TR>   </TR>

      <TR>   </TR>

    

    </TABLE>

 

El tercer paso será definir el contenido de cada fila. Como nos habíamos propuesto que la tabla tuviese dos columnas en cada fila debemos insertar dos celdas en cada una. Como hemos explicado antes, para crear una celda debemos usar la etiqueta TD.

   <TR>

    

      <TD>

      Columna1

      </TD>

      <TD>

      Columna2

      </TD>

    

    </TR>

 

El cuarto paso es ponerlo todo junto, repitiendo el código anterior para cada fila. El código final de la tabla será:

   <TABLE>

    <TR>

        <TD>

    Fila1,Columna1

    </TD>

        <TD>

    Fila1,Columna2

    </TD>

    </TR>

    <TR>

        <TD>

    Fila2,Columna1

    </TD>

        <TD>

    Fila2,Columna2

    </TD>

    </TR>

    </TABLE>