Hola muy buenas a tod@s.
Hoy hablaremos sobre como crear tablas básicas en html para nuestras webs.

La etiqueta que se usa para crearlas es table. <table></table>
Para la insercción de columnas usaremos tr <tr></tr> y para la insección de filas <td></td>

Osea que para crear una tabla basica podriamos hacer:

<table>

<tr>

<td>Primera fila, columna uno</td>

<td>Segunda fila, columna uno</td>

</tr>

<tr>

<td>Primera fila, columna dos</td>

<td>Segunda fila, columna dos</td>

</tr>

</table>

Y este seria el resultado:

 

Primera fila, columna uno Segunda fila, columna uno
Primera fila, columna dos Segunda fila, columna dos

Si lo que queremos es que dentro de una fila haya varias columnas o dentro de una columna varias filas, se puede indicar con el atributo colspan (columnas) o rowspan(filas).

Veamos un ejemplo:

<table>

<tr>

<td colspan=”2″> Esta fila tiene dos columnas unidas </td>

</tr>

<tr>

<td>Primera columna</td>

<td>Segunda columna</td>

</tr>

</table>

Y nos quedaría así:

 

Esta fila tiene dos columnas unidas
Primera columna Segunda columna

Como podemos ver, en la segunda las separamos pero en la primera fila las columnas estan unidas.

Para el mismo ejemplo con filas seria asi:

<table>
<tr>
<td rowspan=”2″>Filas unidas</td>
<td>Uno</td>
<td>Dos</td>
</tr>
<tr>
<td>Tres</td>
<td>Cuatro</td>
</tr>
</table>

El resultado seria este:

 

Filas unidas Uno Dos
Tres Cuatro

Como en el ejemplo anterior, se nos fusionarian las celdas indicadas

Y así es como le hacemos la estructura básica de una tabla. Espero que os haya servido de ayuda como siempre.

Un saludo

Quizás pueda interesarte

Suscríbete a nuestro boletín

 

 

Política de Privacidad

Revisa tu correo electrónico para finalizar el registro

Advertisment ad adsense adlogger