Lenguaje HTML/Tablas

Tablas

Una tabla es un conjunto estructurado de datos compuesto por filas y columnas. Permite consultar de forma rápida y sencilla valores que indican algún tipo de relación entre diferentes clases de datos; por ejemplo, una persona y su edad, un día de la semana o el horario de una piscina local.

Elementos de una tabla

<table> (del inglés «table» en español «tabla»): es el contenedor que define y delimita la tabla.
<tr> (del inglés «row» en español «fila de tabla»): es el elemento que define y delimita las filas de la tabla.

<td> (del inglés «table data» en español «datos de tabla») es el contenedor más pequeño dentro de la tabla, cada td representa una celda de la tabla.
<th> (del inglés «table header» en español «encabezado de tabla») funciona exactamente igual que un <td>, excepto que denota un encabezado, no una celda normal.

Ejemplo

Una tabla escrita así:

<html>
<style>

/* Estilos de la tabla */
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

</style>
<body

<!-- Contenido de la tabla -->
<table>
  <tr>
    <th>Comida</th>
    <th>Precio</th>
  </tr>
  <tr>
    <td>Pan</td>
    <td>1€</td>
  </tr>
  <tr>
    <td>Manzanas</td>
    <td>2€</td>
  </tr>
</table>
</body>

</html>

Se verá así:

Comida	Precio
Pan	1€
Manzanas	2€

Fusionando celdas

Paras las etiquetas <td> y <th> existen atributos para la combinación de celdas, que son:

rowspan: especifica cuantas celdas dentro de una columna serán combinadas
colspan: especifica cuantas columnas dentro una fila serán combinadas

Para el atributo colspan:

Por ejemplo,

<table border=1>
  <tr>
    <td colspan="2">Combinación de columnas</td>
  </tr> 
  <tr>
    <td>Columna 1</td>
    <td>Columna 2</td>
  </tr>
</table>

Combinación de columnas
Columna 1	Columna 2

Tendrá como resultado que, en la primera fila, esten combinados las 2 primeras columnas. Tómese en cuenta que, al escribir este atributo(si sólo existen 2 columnas), no se debe de añadir más etiquetas de columnas, caso contrario, se deberá tomar en cuenta la cantidad de celdas de columnas combinadas y las que se quieran agregar.

Para el atributo rowspan:

<table border=1>
  <tr>
    <td rowspan="2">Combinación de celdas de filas</td>
    <td>Columna2, fila1</td>
  </tr> 
  <tr>
    <td>Columna2, fila2</td>
  </tr>
</table>

Combinación de celdas de filas	Columna2, fila1
	Columna2, fila2

Tendrá como resultado que, en la primera columna, estén combinados las 2 filas definidas. Tómese en cuenta que, al escribir este atributo(si sólo existen 2 filas), no se debe de añadir más etiquetas de columnas, caso contrario, se deberá tomar en cuenta la cantidad de celdas de filas combinadas y las que se quieran agregar. </marque>