16 – Tablas en HTML

12/Abr/2017 HTML Deja un comentario
Ejemplos código HTML

¿Qué son las tablas en HTML?

Las tablas es el elemento del lenguaje HTML que utilizaremos para mostrar información de forma agrupada. Ya sea texto, imágenes, vídeos,…

El elemento table será el que nos ayudará para crear las tablas en HTML.

Un mal uso de las tablas en HTML es el motivo de maquetación, uso que se dió a las tablas en los principios del lenguaje HTML. Algo que hoy en día es una mala práctica. Cambiando por un modelo de maquetación apoyado en capas.

Crear una tabla simple

Para crear una tabla vamos a necesitar conocer, al menos, tres elementos: table, tr y td. Si bien existen otros cuantos que nos permitirán ampliar la funcionalidad de las tablas.

El primer elemento es table. table es el elemento que representa las tablas y será el que agrupe al resto de elementos. Por lo tanto tiene sus etiquetas de inicio y cierre.

<table> … </table>

Siguiendo con la construcción de la tabla el siguiente elemento que necesitamos es tr. El elemento tr representa a una fila de la tabla. Por lo tanto tendremos tantos elementos tr como filas tenga la tabla.

Así, si queremos tener una tabla de tres filas tendremos un código como el que sigue:

<table>
  <tr> … </tr>
  <tr> … </tr>
  <tr> … </tr>
</table>

El último elemento que necesitamos conocer es td. El elemento td es el que representa de una forma unitaria a una celda. Por lo tanto los elementos tr tendrán tantos elementos td en su interior como celdas contenga la fila.

El contenido que haya entre los elementos td será el contenido de la celda.

Una tabla de tres filas por cuatro columnas quedaría de la siguiente forma:

<table>
  <tr>
    <td>Fila 1 Columna 1</td>
    <td>Fila 1 Columna 2</td>
    <td>Fila 1 Columna 3</td>
    <td>Fila 1 Columna 4</td>
  </tr>
  <tr>
    <td>Fila 2 Columna 1</td>
    <td>Fila 2 Columna 2</td>
    <td>Fila 2 Columna 3</td>
    <td>Fila 2 Columna 4</td>
  </tr>
  <tr>
    <td>Fila 3 Columna 1</td>
    <td>Fila 3 Columna 2</td>
    <td>Fila 3 Columna 3</td>
    <td>Fila 3 Columna 4</td>
  </tr>
</table>

Así con los tres elementos table, tr y td tenemos construida nuestra tabla.

Visualmente tendríamos algo así:

Fila 1 Columna 1Fila 1 Columna 2Fila 1 Columna 3Fila 1 Columna 4
Fila 2 Columna 1Fila 2 Columna 2Fila 2 Columna 3Fila 2 Columna 4
Fila 3 Columna 1Fila 3 Columna 2Fila 3 Columna 3Fila 3 Columna 4
15 – Listas en HTML
16.01 – Tablas Básicas en HTML

Ejemplos sobre HTML

Te adjuntamos algunos ejemplos sobre HTML relacionados con el tema tratado.

Vídeos sobre HTML


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

*

*