Tablas en

HTML 5
Índice 1 Estructura
Básica

2 Spans

3 Estructura
Semántica
Estructura
Básica
Estructura Básica
Una tabla en HTML5 está formada, inicialmente, por tres elementos:

<table> Representa a toda a la tabla y engloba a todos los demás elementos

<tr> Representa a las filas de la tabla (table row)

Representan a las celdas de la tabla. <th> para las

celdas de la primera fila (table header) y <td> para
<th> o <td> las demás celdas (table data)
Estructura Básica
La etiqueta table debe ser elemento padre que contenga a los demás
elementos. Luego se deben ingresar las filas con la etiqueta tr y dentro de ellas las
celdas con las etiquetas th y td. Todas las filas de la tabla deben tener la misma
cantidad de celdas.

<table>
<tr>
<th>Precio</th>
<th>Cantidad</th>
<th>Total</th>
</tr>
<tr>
<td>100</td>
<td>5</td>
<td>500</td>
</tr>
</table>
 Spans <table>
<tr>
<th rowspan="2">Precio</th>
Para que una celda se extienda hacia otra celda u otra fila se deben <th rowspan="2">Cantidad</th>
utilizar los atributos colspan y rowspan respectivamente, indicando <th rowspan="2">Descuento</th>
la cantidad de celdas o filas a expandir.
<th colspan="2">Total</th>
</tr>
<tr>
<th>Bruto</th>
<th>Neto</th>
</tr>
<tr>
<td>100</td>
<td>5</td>
<td>10%</td>
<td>500</td>
<td>450</td>
</tr>
</table>
Estructura Semántica
Podemos establecer bloques en la tabla utilizando
las etiquetas semánticas de tabla. Estas etiquetas no se
utilizan para darle estilo a la tabla, sino para dar sentido a <table>
cada parte de la estructura. <caption> Inventario </caption>
<thead>
<tr>
...
</tr>
</thead>
<tbody>
<tr>
...
</tr>
<tr>
...
</tr>
</tbody>
<tfoot>
<tr>
...
</tr>
</tfoot>
</table>
¡Muchas gracias!