Las tablas en HTML utilizan varias etiquetas las cuales se describen a continuación
- <table>
- Crea una nueva tabla. Se utiliza el atributo border para indicar el ancho de los bordes.
- <caption>
- Asigna un título a la tabla
- <thead>
- Genera una espacio para indicar el encabezado de la tabla. Aquí dentro se deberán crear las filas y celdas requeridas
- <tbody>
- Genera una espacio para indicar el cuerpo de la tabla. Aquí dentro se deberán crear las filas y celdas requeridas. Pueden existir varios body para poder separar por bloques la tabla.
- <tfoot>
- Genera una espacio para indicar el pie de la tabla. Actua de la misma manera que el thead
- <tr>
- Crea una fila
- <th>
- Crea una celda de encabezamiento
- <td>
- Crea una celda
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<table> <caption>Tabla</caption> <thead> <tr> <th>Nombre</th> <th>Celular</th> <th>Correo</th> </tr> </thead> <tbody> <tr> <td>Juan</td> <td>bla</td> <td>bla</td> </tr> <tr> <td>Pedro</td> <td>ble</td> <td>ble</td> </tr> </tbody> <tbody> <tr> <td>Maria</td> <td>abc</td> <td>abc</td> </tr> </tbody> </table> |
Grupos de columnas
Para motivos de formato, se pueden formar grupos de columnas, la etiqueta es <colgroup> y dentro de esta se utiliza la etiqueta <col> por cada columna. Si se desean juntar varias columnas con una misma caracteristica se utiliza el atributo span.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<table> <colgroup> <col span="2" style="background-color:red" /> <col style="background-color:yellow" /> </colgroup> <colgroup> <col span="3"> <col id="dame-un-formato-especial"> </colgroup> ... </table> |
Fusionar celdas
Podemos fusionar celdas tanto de forma horizontal, como de forma vertical con los atributos colspan y rowspan
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<table border="1"> <tr> <th colspan="3">Mi dinero</th> </tr> <tr> <th>Mes</th> <th>Gastos</th> <th>Ahorros</th> </tr> <tr> <td>Enero</td> <td>$100</td> <td rowspan="2">$50</td> </tr> <tr> <td>Febrero</td> <td>$80</td> </tr> </table> |
¿Te gustó este artículo?
Si te gustó este artículo, te ha servido o aprendiste algo nuevo; compártelo en tus redes sociales o invítame un cafe.
