Tablas básicas
Las tablas más sencillas de HTML se definen con tres
etiquetas: <table> para crear la tabla, <tr> para crear
cada fila y <td> para crear cada columna.
A continuación se muestra el código HTML de una tabla
sencilla:
<html>
<head></head>
<title>Ejemplo de tabla sencilla</title>
<body>
<h1>Listado de cursos</h1>
<table>
<tr>
<td><strong>Curso</strong></td>
<td><strong>Horas</strong></td>
<td><strong>Horario</strong></td>
</tr>
<tr>
<td>CSS</td>
<td>20</td>
<td>16:00 - 20:00</td>
</tr>
<tr>
<td>HTML</td>
<td>20</td>
<td>16:00 - 20:00</td>
</tr>
<tr>
<td>Dreamweaver</td>
<td>60</td>
<td>16:00 - 20:00</td>
</tr>
</table>
</body>
</html>
Si se visualiza el código anterior en cualquier navegador,
se obtiene una tabla como la que muestra la siguiente
imagen:
Figura 7.2 Ejemplo de tabla sencilla creada con las
etiquetas table, tr y td
La etiqueta <table> encierra todas las filas y columnas de
la tabla. Las etiquetas <tr> (del inglés "table row") definen
cada fila de la tabla y encierran todas las columnas. Por
último, la etiqueta <td> (del inglés "table data cell") define
cada una de las columnas de las filas, aunque realmente
HTML no define columnas sino celdas de datos.
Al definir una tabla, se debe pensar en primer lugar en las
filas que la forman y a continuación en las columnas. El
motivo es que HTML procesa primero las filas y por eso
las etiquetas <tr> aparecen antes que las etiquetas <td>.
Etiqueta <table>
Atributos
básicos, internacionalización y eventos
comunes
Etiqueta <table>
Atributos summary = "texto" - Permite describir el contenido de la tabla (lo u
propios personas discapacitadas)
Tipo de
Bloque
elemento
Descripción Se emplea para definir tablas de datos
Etiqueta <tr>
Atributos
básicos, internacionalización y eventos
comunes
Atributos
-
propios
Tipo de
Bloque
elemento
Descripción Se emplea para definir cada fila de las tablas de datos
Etiqueta <td>
Atributos
básicos, internacionalización y eventos
comunes
Atributos abbr = "texto" - Permite describir el contenido de la celda (empleado s
propios navegadores utilizados por personas discapacitadas)
headers = "lista_de_id" - Indica las celdas que actúan como cabe
títulos de las columnas y filas). Se indica como una lista de valores del atributo
scope = "col, row, colgroup, rowgroup" - Indica las celd
Etiqueta <td>
será su cabecera. Ej: scope="col" indica que esta celda es la cabecera de todas
en la misma columna
colspan = "numero" - Número de columnas que ocupa esta celda
rowspan = "numero" - Número de filas que ocupa esta celda
Tipo de
Bloque
elemento
Descripción Se emplea para definir cada una de las celdas que forman las filas de una tabla, es dec
De todos los atributos disponibles para las celdas, los más
utilizados son rowspan y colspan, que se emplean para
construir tablas complejas como las que se ven más
adelante. Entre los demás atributos, sólo se utiliza de
forma habitual el atributo scope, sobre todo con las celdas
de cabecera que se ven a continuación.
Normalmente, algunas de las celdas de la tabla se utilizan
como cabecera de las demás celdas de la fila o de la
columna. En este caso, HTML define la etiqueta <th> (del
inglés "table header cell") para indicar que una celda es
cabecera de otras celdas.
Etiqueta <th>
Atributos
básicos, internacionalización y eventos
comunes
Atributos abbr = "texto" - Permite describir el contenido de la celda (empleado s
propios navegadores utilizados por personas discapacitadas)
headers = "lista_de_id" - Indica las celdas que actúan como cabe
títulos de las columnas y filas). Se indica como una lista de ID de celdas
Etiqueta <th>
scope = "col, row, colgroup, rowgroup" - Indica las celd
será su cabecera. Ej: scope="col" indica que esta celda es la cabecera de todas
en la misma columna
colspan = "numero" - Número de columnas que ocupa esta celda
rowspan = "numero" - Número de filas que ocupa esta celda
Tipo de
Bloque
elemento
Descripción Se emplea para definir las celdas que son cabecera de una fila o de una columna de la
Los atributos de la etiqueta <th> son idénticos que los
atributos definidos para la etiqueta <td>. En este caso, el
atributo más utilizado es scope, que permite indicar si la
celda es cabecera de la fila o de la columna ( <th
scope="row"> y <th scope="col"> respectivamente).
Por otra parte, HTML define la etiqueta <caption> para
establecer la leyenda o título de una tabla. La etiqueta
debe colocarse inmediatamente después de la
etiqueta <table> y cada tabla sólo puede incluir una
etiqueta <caption>.
Etiqueta <caption>
Atributos comunes básicos, internacionalización y eventos
Atributos propios -
Tipo de elemento En línea
Etiqueta <caption>
Descripción Se emplea para definir la leyenda o título de una tabla
Ejercicio
Determinar el código HTML necesario para crear la tabla
que se muestra en la siguiente imagen:
Tabla sencilla con celdas de cabecera
Utilizar las celdas de cabecera donde sea necesario y
añadir todos los atributos posibles.
html>
<head></head>
<title>Ejemplo de tabla sencilla</title>
<body>
<h1>Su pedido</h1>
<table border="2">
<tr>
<th scope="col">Nombre producto</th>
<th scope="col">Precio unitario</th>
<th scope="col">Unidades</th>
<th scope="col">Subtotal</th>
</tr>
<tr>
<td>Reproductor MP3 (80 GB)</td>
<td>192.02</td>
<td>1</td>
<td>192.02</td>
</tr>
<tr>
<td>Fundas de colores</td>
<td>2.50</td>
<td>5</td>
<td>12.50</td>
</tr>
<tr>
<td>Reproductor de radio & control remoto</td>
<td>12.99</td>
<td>1</td>
<td>12.99</td>
</tr>
<tr>
<th scope="row">TOTAL</th>
<td>-</td>
<td>7</td>
<td><strong>207.51</strong></td>
</tr>
</table>
</body>
</html>
