Ejemplos de cómo hacer o crear una tabla en HTML
¿Estas entrando al mundo del HTML? Una de las cosas que debes aprender es cómo crear una tabla en HTML, para ello os traemos una serie de consejos y ejemplos que te vendrán que ni pintados. Las tablas en HTML son muy útiles y sencillas de aprender.
Cómo hacer tablas en HTML
Antes de meternos en faena, recordaros que una tabla se basa de filas y columnas, las cuales en HTML se crean así:
Las tablas en HTML se detectan: <table>
Las filas completas de una tabla en HTML se detectan con la etiqueta: <tr>
Las celdas de cada fila de una tabla en HTML se detectan con la etiqueta: <td>
Ahora con estas nociones vamos a crear una tabla con dos filas y dos columnas:
<table>
<tr>
<td>Prueba 1</td>
<td>Resultado prueba 1</td>
</tr>
<tr>
<td>Prueba 2</td>
<td>Resultado prueba 2</td>
</tr>
</table>
Así es como quedaría al escribir el código:
| Prueba 1 | Resultado prueba 1 |
| Prueba 2 | Resultado prueba 2 |
Esta es una tabla muy sencilla sin bordes ni destacados, este tipo de tablas sirven para dar ideas básicas. Para añadir un borde y un encabezado destacado a una tabla se deben añadir las siguientes etiquetas:
Etiqueta para añadir borde a una tabla en HTML: Se debe añadir la palabra border=1 (el número sirve para poner el grosor del borde) en la etiqueta <table>. Ejemplo: <table border=2> </table>
Etiqueta para encabezado destacado para una tabla en HTML: En vez de usar la etiqueta <td> se debe usar la etiqueta para las celdas de las filas <th> </th>.
Con estas nociones vamos a crear una tabla de precios:
<table border=”2″>
<tr>
<th>Móvil</th>
<th>Precio</th>
</tr>
<tr>
<td>Samsung S7</td>
<td>950€</td>
</tr>
<tr>
<td>Iphone 7</td>
<td>972€</td>
</tr>
<tr>
<td>LG G5</td>
<td>760€</td>
</tr>
</table>
Así es como quedaría al escribir el código:
| Móvil | Precio |
|---|---|
| Samsung S7 | 950€ |
| Iphone 7 | 972€ |
| LG G5 | 760€ |
Os dejamos unas últimas etiquetas que sirven para combinar varias columnas o filas:
Etiqueta para combinar 2 o más columnas y convertirlas en 1: colspan= “(nº columnas a combinar)” Fila Celdas
Etiqueta para combinar 2 o más filas y convertirlas en 1: rowspan
Ejemplo de cómo quedaría el HTML:
<table border=”2″>
<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>
Así es como quedaría al escribir el código:
| 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 |
Para que la tabla no quede muy apretada, se puede establecer el ancho y el largo de la tabla en HTML que nosotros queramos, ¿de qué manera?
Muy sencillo usaremos las etiquetas: width y height en ese orden (especificándolo en píxeles o en porcentaje) Ejemplo:
<table border= “2” width= “300” height= “200”> </table>
Ahora que ya sabéis cómo crear tablas en HTML, es el momento de ponerse a ello y practicar, practicar y practicar.
