Las tablas de HTML permiten presentar y organizar datos, tales como textos, números, imágenes, vínculos, y otros elementos complejos, distribuidos en filas y en columnas de celdas.
En las primeras versiones de HTML las tablas eran frecuentemente utilizados para maquetar o estructurar un sitio web en su totalidad, sin embargo, esta práctica no es recomendada debdido a que la única función de las tablas es la de presentar datos tabulares. Para estructurar el contenido de un sitio web debemos emplear los elementos semánticos tales como <section> o <article>, los cuáles fueron introducidos con la especificación HTML5.
Para definir una tabla básica debemos utilizar las siguientes etiquetas:<table> Etiqueta contenedora que tendrá en su interior toda la tabla. <tr> Table Row. define cada fila de la tabla. <td> Table Data. Define las celdas de la tabla. Las celdas son las casillas que se forman por la intersección entre una fila y una columna <th> Table Header. Se emplea para definir las celdas de cabecera de una tabla.
Para crear una tabla primero se debe definir la etiqueta <table> y su cierre </table>, y dentro de estas se crean las filas que la componen (<tr> y </tr>). Por último se crean las celdas encerrándolas dentro de cada fila. Si la tabla lleva encabezados (<th> y </th>) estos se deben definir dentro de la primera fila.
Vamos a ver un ejemplo sencillo.
<table>
<tr>
<th>Compañía</th>
<th>Contacto</th>
<th>Teléfono</th>
</tr>
<tr>
<td>ABC Inc.</td>
<td>Maria A.</td>
<td>1-000-000-0000</td>
</tr>
<tr>
<td>One Two Three Co.</td>
<td>Francisco C.</td>
<td>1-000-000-0001</td>
</tr>
<tr>
<td>XZ Group</td>
<td>Roland M.</td>
<td>1-000-000-0002</td>
</tr>
<tr>
<td>HD Trading</td>
<td>Helen B.</td>
<td>1-000-000-0003</td>
</tr>
<tr>
<td>Laughing Corp/</td>
<td>Yoshi T.</td>
<td>1-000-000-0004</td>
</tr>
<tr>
<td>Mountain Inc.</td>
<td>Giovanni R.</td>
<td>1-000-000-0005</td>
</tr>
</table>Elemento <caption>
Por último, de forma opcional podemos agregar un titulo a nuestra tabla, para esto debemos utilizar el elemento <caption> el cual debe ser colocado justamente después de la etiqueta de apertura <table>:
<table>
<caption>Directorio de ejecutivos de ventas</caption>
...
</table>Agreguemos algunos estilos CSS:
caption {
margin-bottom: 20px;
font-weight: bold;
font-size: 1.2rem
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}Este es el resultado:
See the Pen Cómo crear tablas con HTML by simplicitytree (@simplicitytree) on CodePen.
Inicialmente me formé como Técnico en Anális y Diseño de sistemas. Luego ingresé a la escuela de negocios, hice una licenciatura en Administración y obtuve una especialización (Post-grado) en Alta Dirección Empresarial. Desde el año 2007 me dedico a la creación de sitios web, lo cual combino con la consultoría y la capacitación de tecnologías de Internet.
- TypeScript vs. JavaScript: ¿Cuál es mejor para tus proyectos? - octubre 31, 2024
- Optimización de imágenes: clave para un diseño web eficiente - septiembre 28, 2024
- Objetos en JavaScript - septiembre 21, 2024
