Introducción
Es común ver tablas en las paginas web, estas se usan para mostrar información al usuario de una manera ordenada y clara visualmente. Por ejemplo, por medio de una tabla podemos mostrar la información de personas, vehículos, ciudades y demás. HTML posee una serie de etiquetas que nos ayudan a crear tablas en nuestras paginas web, las cuales veremos como funcionan a continuación.
Etiquetas para crear una tabla
En concreto son 4 las etiquetas que se usan para poder crear tablas poder crear tablas con HTML, esas son:
Es con estas etiquetas que podemos crear tablas en nuestras paginas web utilizando HTML, cada una de estas tiene una función principal que al saber usarlas podemos construir tablas. Además es importante mencionar que las cuatro etiquetas deben llevar su respectiva etiqueta de cierre.
Etiqueta <table>
Se podría decir que es la etiqueta principal ya que engloba todas las demás, es decir, todas las demás etiquetas deben ir dentro de ellas y es por eso que su función es básicamente definir la tabla ya que es el elemento raíz de esta.
Etiqueta <tr>
Con esta etiqueta podemos definir las filas en una tabla, cada una estas etiquetas que agreguemos en la tabla representara una fila en ella, podemos tener cuantas filas queramos. Por ejemplo si tenemos una tabal en la que se muestra información sobre personas cada etiqueta <tr> que tengamos representará una fila/persona en la tabla.
Etiqueta <th>
Esta etiqueta se utiliza para definir la celda de encabezado, estos básicamente se usan para saber que información se mostrara en cada columna, es por eso que esta etiquetas deberían ir en la primera fila, es decir, es estén dentro de la primera fila. Siguiendo con el ejemplo anterior podríamos tener como encabezados “Nombre”, “Apellidos”, “Edad”, “Genero” y cuantas más se nos ocurran.
Etiqueta <td>
Y por ultimo la etiqueta <td> que se utiliza para definir cada celda de datos dentro de la tabla, cada etiqueta de estas representa una celda en la tabal. Estas etiquetas deben ir dentro de la etiqueta <th> que la que representa las filas y cada etiqueta <td> que este dentro representa un celda de esa fila.
Ejemplo de tabla con HTML
Un ejemplo de una tabla creada con HTmL seria la siguiente:
<tableborder="1"><tr><th>Nombre</th><th>Apellidos</th><th>Edad</th><th>Genero</th></tr><tr><td>Sofia</td><td>Madrigal Lopez</td><td>35</td><td>Femenino</td></tr><tr><td>Pedro</td><td>Pereira Aguilar</td><td>22</td><td>Masculino</td></tr><tr><td>Fernando</td><td>Morales Garcia</td><td>76</td><td>Masculino</td></tr></table>En este pedazo de código podemos ver como utilizamos la etiqueta <table> para englobar todo, además de que dentro de cada etiqueta <tr> que son las que representan las filas se colocan las etiquetas td que representan las celdas de cada dato que va dentro de la tabla. Pero hay una excepción que es en la primera fila donde usamos la etiqueta <th> en lugar de usar la etiqueta <td> ya que en esta estamos especificando los encabezado de cada columna para que estos se diferencien de las demás celdas y filas. Además se ve como en la etiqueta <table> se agregó el atributo border=“1” , estos para poder darle un borde a la tabla.
Conclusión
En conclusión podemos decir que gracias a HTML podemos crear infinidad de cosas, las tablas son solo una ellas, existen además muchísimas más etiquetas que nos permiten caer de todo y es por esos que debemos de seguir explorando sobre HTML.
