HTML - basic - Lección nº 5
Tablas
¿De qué trata esta lección?
En esta lección aprendemos a insertar una tabla en un documento HTML. Si no aplicamos formato a nuestras tablas, aparecerán sin bordes. El estilo de los bordes de la tabla, lo trataremos más adelante, en el capítulo CSS.
Nuevas etiquetas de esta lección:
<table> </table> - marcamos el principio y el final de la tabla con esta etiqueta.
<tr> </tr> - marcamos el principio y el final de una fila. Es la abreviatura de table row (fila de la tabla).
<td> </td> - incluimos en esta etiqueta el contenido de una celda. Es la abreviatura de table data (datos de la tabla).
<th> </th> - Incluye el contenido de las celdas de encabezado. Es la abreviatura de table header (encabezado de tabla.
<caption> </caption> - con estas etiquetas podemos añadir el título a nuestra tabla.
Ejemplo de tabla:
El uso de las etiquetas relacionadas con las tablas:
Combinando celdas
Los atributos / propiedades colspan y rowspan se utilizan para fusionar celdas. Estos atributos deben insertarse en las etiquetas <td> o <th> (como el atributo type en las listas).
Ej:
<td colspan=”3”> – esta celda se extiende a través de tres columnas (en una fila).
<td rowspan=”2”> – esta celda se extiende a través de dos filas (en una columna).
En esta lección aprendemos a insertar una tabla en un documento HTML. Si no aplicamos formato a nuestras tablas, aparecerán sin bordes. El estilo de los bordes de la tabla, lo trataremos más adelante, en el capítulo CSS.
Nuevas etiquetas de esta lección:
<table> </table> - marcamos el principio y el final de la tabla con esta etiqueta.
<tr> </tr> - marcamos el principio y el final de una fila. Es la abreviatura de table row (fila de la tabla).
<td> </td> - incluimos en esta etiqueta el contenido de una celda. Es la abreviatura de table data (datos de la tabla).
<th> </th> - Incluye el contenido de las celdas de encabezado. Es la abreviatura de table header (encabezado de tabla.
<caption> </caption> - con estas etiquetas podemos añadir el título a nuestra tabla.
Ejemplo de tabla:
El uso de las etiquetas relacionadas con las tablas:
- El contenido de las celdas está formado directamente por las etiquetas <td> y <th>. <table> y <tr> contienen otras etiquetas, no tienen "contacto" directo con el contenido.
- La etiqueta <caption> viene directamente después de la etiqueta <table>, pero puede omitirse.
- La etiqueta <th> tampoco es totalmente necesaria.
Combinando celdas
Los atributos / propiedades colspan y rowspan se utilizan para fusionar celdas. Estos atributos deben insertarse en las etiquetas <td> o <th> (como el atributo type en las listas).
Ej:
<td colspan=”3”> – esta celda se extiende a través de tres columnas (en una fila).
<td rowspan=”2”> – esta celda se extiende a través de dos filas (en una columna).
Ejercicios
1. Edita el archivo tips.html y después del primer encabezado h2 agrega otro encabezado h3 con el texto My timetable. Después de esto, crea una tabla con dos columnas y cuatro filas. En las celdas de la primera columna, escribe los siguientes intervalos de tiempo: 8-9, 9-14, 14-15 y 15-17. En las celdas de la segunda columna, escribe los siguientes textos: Meeting with the team, Working on projects, Lunch, Working on projects.
Ver el resultado
3. Edita el archivo aspects.html y formatea su contenido de acuerdo con los comentarios HTML que quedan en. Tienes que crear una tabla con 6 filas y 2 columnas.
Ver el resultado
4. Edita el archivo toplangs.html y agrega un encabezado h3 y una tabla con 8 filas y 3 columnas con los siguientes datos:
Título h3: Job postings containing top languages.
Primer encabezado de la mesa: Language
Título de la segunda mesa: 2017
Título de la tercera mesa: 2018
Primera columna: Java, Python, JavaScript, C++, C#, PHP, Perl
Segunda columna: 68k, 41k, 40k, 33k, 28k, 13k, 17k
Tercera columna: 62k, 46k, 38k, 31k, 27k, 14k, 14k
Ver el resultado
Título h3: Job postings containing top languages.
Primer encabezado de la mesa: Language
Título de la segunda mesa: 2017
Título de la tercera mesa: 2018
Primera columna: Java, Python, JavaScript, C++, C#, PHP, Perl
Segunda columna: 68k, 41k, 40k, 33k, 28k, 13k, 17k
Tercera columna: 62k, 46k, 38k, 31k, 27k, 14k, 14k
Cuestionario
1. ¿Qué significa <td>?
2. ¿Cuáles de las siguientes etiquetas son necesarias para una tabla?
3. ¿A qué etiqueta HTML se debe agregar el atributo llamado colspan?
4. ¿Cuántas celdas hay en la tabla de abajo?
<table>
<tr><th colspan="2">Colors</th></tr>
<tr><td>Red</td><td rowspan="2">Green</td></tr>
<tr><td>Blue</td></tr>
</table>
<table>
<tr><th colspan="2">Colors</th></tr>
<tr><td>Red</td><td rowspan="2">Green</td></tr>
<tr><td>Blue</td></tr>
</table>
Información suplementaria
Puedes leer más sobre esto en la página https://www.w3schools.com/html/html_tables.asp
