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:

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

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:

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.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:

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

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 permacerá 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 cierrre.

Ejemplo:

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

Área de texto:

Explicación en este curso.

Recomendación W3C


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






Página inicial  Cursos Informática Gratuitos

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


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