Unidad 18. Referencia de etiquetas HTML (XVIII)

18.82. Etiqueta <tfoot>

Definición: la etiqueta <tfoot> se utiliza para agrupar las filas del pie de una tabla, normalmente para darles un formato específico. También se pueden agrupar las filas de la cabecera con <thead>, y las filas del cuerpo con <tbody>. Puede haber una o varias etiquetas tbody en una tabla, pero sólo una <thead> y una <tfoot>. Estas etiquetas no tienen ningún formato definido por defecto, por lo cual, debemos crearlo nosotros con hojas de estilo.

Ejemplo:

En el siguiente ejemplo hemos creado esta tabla con etiquetas <tbody>, <thead> y <tfoot>:

<table>
<thead>
  <tr>
    <td rowspan="3"></td>
    <td colspan="6"> Ventas coches </td>
  </tr>
  <tr>
    <td colspan="2">1 trimestre</td>
    <td colspan="2">2 trimestre</td>
    <td colspan="2">3 trimestre</td>
  </tr>
  <tr>
    <td>Nacionales</td>
    <td>Importados</td>
    <td>Nacionales</td>
    <td>Importados</td>
    <td>Nacionales</td>
    <td>Importados</td>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Año 2014</td>
    <td >341</td>
    <td>561</td>
    <td>234</td>
    <td>129</td>
    <td>340</td>
    <td>261</td>
  </tr>
  <tr>
    <td>Año 2015</td>
    <td >341</td>
    <td>561</td>
    <td>234</td>
    <td>129</td>
    <td>340</td>
    <td>261</td>
  </tr>
  <tr>
    <td>Año 2016</td>
    <td >341</td>
    <td>561</td>
    <td>234</td>
    <td>129</td>
    <td>340</td>
    <td>261</td>
  </tr>
  <tr>
    <td>Año 2017</td>
    <td>741</td>
    <td>263</td>
    <td>721</td>
    <td>841</td>
    <td>590</td>
    <td>251</td>
  </tr>
</tbody>
<tfoot>
  <tr>
    <td>Total</td>
    <td>1082</td>
    <td>824</td>
    <td>955</td>
    <td>970</td>
    <td>930</td>
    <td>512</td>
  </tr>
</tfoot>
</table>

Y le hemos asignado los siguientes formatos mediante esta hoja de estilo:

table  {
    padding: 20px;
    border: 1px solid black;
    border-collapse: collapse;
    text-align: center;
    margin-left: 20px
    }
 td {
    border: 1px solid black;
    border-collapse: collapse;
    text-align: center;
    padding: 3px;
    }
 thead {
    font-weight: bold;
    }
 tbody tr {
    background-color: #fadddd;
    }
 tfoot {
    background-color:#f4fdcb;
    }

Y el resultado es el siguiente:

Explicación en este curso.

Recomendación W3C

18.83. Etiqueta <th>

Definición: la etiqueta <th> dado que es muy común que las tablas tengan una primera fila de cabecera se creó la etiqueta <th>. Esta etiqueta se aplica a las celdas de cabecera en lugar de la etiqueta <td>. La etiqueta <th> por defecto tiene un formato diferente, normalmente letra negrita y alineación centrada. Como ya sabemos, este formato se puede cambiar con las hojas de estilo. La etiqueta <th> se puede colocar tanto en las filas como en las columnas, por ejemplo:

Ejemplo:

<table>
 <tr>
  <th>Marcas</th>
  <th>Seat</th>
  <th>Ford</th>
  <th>BMW</th>
 </tr>
 <tr>
 <th>2016</th>
  <td>23900</td>
  <td>21500</td>
  <td>11500</td>
 </tr>
 <tr>
  <th>2017</th>
  <td>24600</td>
  <td>23500</td>
  <td>13400</td>
 </tr>
</table>

Produce este resultado:

Explicación en este curso.

Recomendación W3C

18.84. Etiqueta <thead>

Definición: la etiqueta <thead> se utiliza para agrupar las filas de la cabecera de una tabla, normalmente para darles un formato específico. También se pueden agrupar las filas del cuerpo con <tbody>, y las filas del pie con <tfoot>. Puede haber una o varias etiquetas tbody en una tabla, pero sólo una <thead> y una <tfoot>. Estas etiquetas no tienen ningún formato definido por defecto, por lo cual, debemos crearlo nosotros con hojas de estilo.

Ejemplo:

En el siguiente ejemplo hemos creado esta tabla con etiquetas <tbody>, <thead> y <tfoot>:

<table>
<thead>
  <tr>
    <td rowspan="3"></td>
    <td colspan="6"> Ventas coches </td>
  </tr>
  <tr>
    <td colspan="2">1 trimestre</td>
    <td colspan="2">2 trimestre</td>
    <td colspan="2">3 trimestre</td>
  </tr>
  <tr>
    <td>Nacionales</td>
    <td>Importados</td>
    <td>Nacionales</td>
    <td>Importados</td>
    <td>Nacionales</td>
    <td>Importados</td>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Año 2014</td>
    <td >341</td>
    <td>561</td>
    <td>234</td>
    <td>129</td>
    <td>340</td>
    <td>261</td>
  </tr>
  <tr>
    <td>Año 2015</td>
    <td >341</td>
    <td>561</td>
    <td>234</td>
    <td>129</td>
    <td>340</td>
    <td>261</td>
  </tr>
  <tr>
    <td>Año 2016</td>
    <td >341</td>
    <td>561</td>
    <td>234</td>
    <td>129</td>
    <td>340</td>
    <td>261</td>
  </tr>
  <tr>
    <td>Año 2017</td>
    <td>741</td>
    <td>263</td>
    <td>721</td>
    <td>841</td>
    <td>590</td>
    <td>251</td>
  </tr>
</tbody>
<tfoot>
  <tr>
    <td>Total</td>
    <td>1082</td>
    <td>824</td>
    <td>955</td>
    <td>970</td>
    <td>930</td>
    <td>512</td>
  </tr>
</tfoot>
</table>

Y le hemos asignado los siguientes formatos mediante esta hoja de estilo:

table  {
    padding: 20px;
    border: 1px solid black;
    border-collapse: collapse;
    text-align: center;
    margin-left: 20px
    }
 td {
    border: 1px solid black;
    border-collapse: collapse;
    text-align: center;
    padding: 3px;
    }
 thead {
    font-weight: bold;
    }
 tbody tr {
    background-color: #fadddd;
    }
 tfoot {
    background-color:#f4fdcb;
    }

Y el resultado es el siguiente:

Explicación en este curso.

Recomendación W3C

18.85. Etiqueta <time>

Definición: la etiqueta <time> define una fecha/hora de forma legible para los usuarios. Admite una amplia variedad de formatos de fecha y hora, por ejemplo "2019-11-28" o "09:56". También puede definir fecha/hora de forma legible para los motores de búsqueda usando el atributo datatime.

Ejemplo: <p>Nos vemos el <time>2019-01-23</time> a las <time>10:54</time> en Valencia.</p>

<p>Ya sabes la fecha del <time datetime="2019-05-01">día de la madre</time>.</p>

Resultado:

Nos vemos el 2019-01-23 a las 10:54 en Valencia.

Ya sabes la fecha del día de la madre.

Recomendación W3C

18.86. Etiqueta <title>

Definición: la etiqueta <title> es obligatoria y muestra el título de la página en la pestaña del navegador y en los "favoritos". Se coloca dentro de la etiqueta <head> y por lo tanto no forma parte del cuerpo de la página y no se muestra en el contenido de la página. Sólo se puede escribir texto. Es importante para que los buscadores conozcan el tema de la página. Los resultados de las búsquedas muestran como primera línea lo que pongamos en esta etiqueta title, por lo tanto es muy importante elegir bien este texto ya que puede hacer que los usuarios opten por visitar o no nuestra página.

Ejemplo: <title> aulaClic. Curso de informática gratis</title>

Explicación en este curso.

Recomendación W3C