Unidad 18. Referencia de etiquetas HTML (XVII)

18.77. Etiqueta <table>

Definición: la etiqueta <table> define una tabla en HTML. Las tablas permiten organizar la información en filas y columnas. Cada fila se divide en celdas. La información se introduce en las celdas. Dentro de la etiqueta <table> podemos utilizar varias etiquetas para definir las filas <tr>, las celdas, <td>, las cabeceras de filas <th>, etc.

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.78. Etiqueta <tbody>

Definición: la etiqueta <tbody> se utiliza para agrupar las filas del cuerpo 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 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.79. Etiqueta <td>

Definición: la etiqueta <td> define una celda de una tabla en HTML. Las tablas permiten organizar la información en filas y columnas. Cada fila se divide en celdas. La información se introduce en las celdas. Dentro de la etiqueta <table> podemos utilizar otras etiquetas para definir las filas <tr>, las cabeceras de filas <th>, etc.

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.80. Etiqueta <template>

Definición: la etiqueta <template> se utiliza para mantener oculto contenido en una página web. Normalmente, el contenido se hará visible mediante programación con Javascript cuando ocurra un evento o el usuario pulse un botón.

Ejemplo: <template> <p> este contenido permanecerá oculto inicialmente.</p></template>

Resultado:

Recomendación W3C

18.81. Etiqueta <textarea>

Definición: la etiqueta <textarea> crea un área de texto con varias líneas, de esta forma es más cómodo introducir un texto largo que con el tipo text de la etiqueta input que sólo permite una línea. Los atributos cols y rows permiten definir las dimensiones de la caja de texto, cols es el número de caracteres que tiene cada fila, y rows es el número de líneas que se visualizan, aunque el número de líneas que se introducen puede ser mayor. Dependiendo de los navegadores, por defecto, cols toma el valor 20 y rows el valor de 2. Podemos limitar la cantidad de caracteres permitidos con maxlength, y fijar un mínimo con minlength. No se permite el atributo value, pero podemos dar un valor escribiéndolo entre las etiquetas de apertura y de cierre.

Ejemplo:

<textarea name="area" cols="40" rows="4" minlength="5" maxlength="200" >Escribe tu opinión</textarea>

Explicación en este curso.

Recomendación W3C