Ejemplo práctico: Estructura avanzada completa

Código HTML completo

                    <table border="1" width="80%">

                      <caption>Ventas del Primer Trimestre</caption>

                      <colgroup>

                        <col class="col1">

                        <col class="col2">

                        <col class="col3">

                      </colgroup>

                      <thead>

                        <tr>

                          <th>Producto</th>

                          <th>Cantidad</th>

                          <th>Total</th>

                        </tr>

                      </thead>

                      <tbody>

                        <tr>

                          <td>Laptop</td>

                          <td>15</td>

                          <td>$14,985</td>

                        </tr>

                        <tr>

                          <td>Monitor</td>

                          <td>23</td>

                          <td>$6,877</td>

                        </tr>

                      </tbody>

                      <tfoot>

                        <tr>

                          <td>Total</td>

                          <td>38</td>

                          <td>$21,862</td>

                        </tr>

                      </tfoot>

                    </table>

Resultado visual

Ventas del Primer Trimestre
Producto	Cantidad	Total
Laptop	15	$14,985
Monitor	23	$6,877
Total	38	$21,862

Elementos utilizados

<caption> - Título descriptivo

<colgroup> y <col> - Estilos por columna

<thead> - Encabezado de tabla

<tbody> - Cuerpo con datos principales

<tfoot> - Pie con totales