Cómo crear y hacer tablas en HTML (con ejemplos)

Cómo crear y hacer tablas en HTML (con ejemplos)

Siguiendo con las enseñanzas de HTML hoy vamos a aprender cómo crear tablas en HTML, junto con algunos ejemplos prácticos. Las tablas HTML permiten organizar datos como texto, imágenes, enlaces, otras tablas, etc. en filas y columnas de celdas. ¿Estás preparado para aprender? Pues sigue leyendo.

Cómo hacer tablas en HTML

Bueno, antes de nada unas nociones sobre tablas. ¿Cuáles son los elementos principales de una? Está claro, filas y columnas. Esto tiene su reflejo a la hora de crear una tabla en HTML.

Las tablas se definen con la etiqueta <table>.

Las tablas se dividen en filas de la tabla con la etiqueta <tr>.

Las tablas se dividen en filas con la etiqueta <td>.

Por ejemplo, esta es una tabla con dos filas y dos columnas (En todos los ejemplos pongo primero el código y luego cómo se vería en la web):

<table>

<tr>

<td>Fila 1, Columna 1</td>

<td> Fila 1, Columna 2</td>

</tr>

<tr>

<td>Fila 2, Columna 1</td>

<td>Fila 2, Columna 2</td>

</tr>

</table>

Fila 1, Columna 1 Fila 1, Columna 2
Fila 2, Columna 1 Fila 2, Columna 2

Puesta así como está en el ejemplo anterior la tabla tiene estructura de tabla, pero no tiene bordes, por lo que su visualización puede ser algo complicada. Para poner borde hay que añadir el atributo border en la etiqueta table. La primera fila de la tabla puede convertirse en el encabezado de la tabla con la etiqueta <th>. Veamos un ejemplo de esto con una tabla sencilla donde aparezcan los ganadores de una carrera:

<table border=”1″>

<tr>

<th>Puesto</th>

<th>Corredor</th>

</tr>

<tr>

<td>Usain Bolt</td>

<td>1</td>

</tr>

<tr>

<td>Chema Martinez</td>

<td>2</td>

</tr>

<tr>

<td>Shabbir Hussein</td>

<td>3</td>

</tr>

</table>

Puesto Corredor
Usain Bolt 1
Chema Martinez 2
Shabbir Hussein 3

Bien, ya tienes una tabla con bordes. El border=1 significa que el borde mide un solo pixel.

Otros atributos interesantes son colspan (para combinar dos o más columnas en una sola) y rowspan (para combinar dos o más filas en una sola).

<table border=”1″>

<tr>

<th>Columna 1</th>

<th>Columna 2</th>

<th>Columna 3</th>

</tr>

<tr><td rowspan=”2″>Fila 1 Celda 1</td><td>Fila 1 Celda 2</td><td>Fila 1 Celda 3</td></tr>

<tr><td>Fila 2 Celda 2</td><td>Fila 2 Celda 3</td></tr>

<tr><td colspan=”3″>Fila 3 Celda 1</td></tr>

</table>

Columna 1 Columna 2 Columna 3
Fila 1 Celda 1 Fila 1 Celda 2 Fila 1 Celda 3
Fila 2 Celda 2 Fila 2 Celda 3
Fila 3 Celda 1

Puede establecer una anchura y altura de la tabla usando los atributos width y heigght respectivamente. Puedes especificar la anchura o altura de la tabla en píxeles o en términos de porcentaje de área de pantalla disponible.

Ejemplos:

<table border=”1″ width=”400″ height=”150″>

<table border=”1″ width=”100%” height=”50%”>

Bueno, ya sabes cómo hacer tablas en HTML, espero que los ejemplos te hayan servido de utilidad.

Te deSEO un buen día,

William Penguin.

3 Comentarios

  • rosa 20/02/2019 18:36

    muy bien

  • Benny 06/03/2019 05:37

    Gracias a esto pude resolver mi error en algo tan sencillo, muchas gracias

  • Roberto 27/03/2019 22:08

    Que buena pagina la verdad me ayudo mucho

Deja tu respuesta