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:

Ventas coches
1 trimestre 2 trimestre 3 trimestre
Nacionales Importados Nacionales Importados Nacionales Importados
Año 2014 341 561 234 129 340 261
Año 2015 341 561 234 129 340 261
Año 2016 341 561 234 129 340 261
Año 2017 741 263 721 841 590 251
Total 1082 824 955 970 930 512

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:

Marcas Seat Ford BMW
2016 23900 21500 11500
2017 24600 23500 13400

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:

Ventas coches
1 trimestre 2 trimestre 3 trimestre
Nacionales Importados Nacionales Importados Nacionales Importados
Año 2014 341 561 234 129 340 261
Año 2015 341 561 234 129 340 261
Año 2016 341 561 234 129 340 261
Año 2017 741 263 721 841 590 251
Total 1082 824 955 970 930 512

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">dia de la madre</time>.</p>

Resultado:

Nos vemos el a las en Valencia.

Ya sabes la fecha del .

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


Enero-2019 (V 2.0)
Pág. 18.18
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.