TEMA 6. TABLAS

ÍNDICE

1. Crea tu primera tabla
2. Atributos de las tablas
- El atributo colspan
- El atributo rowspan
3. Estilo común a las columnas
4. Añadir estructura a una tabla

Una tabla es un elemento utilizado para organizar y mostrar datos en forma de filas y columnas. Las tablas son especialmente útiles cuando necesitas presentar información de manera estructurada y fácil de leer, ya que es fácil interpretar la información haciendo asociaciones visuales entre los encabezados de las filas y las columnas. Por ejemplo hojas de cálculo, datos comparativos o listas ordenadas.

Debemos tener claro que las tablas son un mecanismo para mostrar datos tabulares, es decir, para mostrar cierta información de forma más cómoda, pero NO ES UN MECANISMO DE MAQUETACIÓN PARA COLOCAR ELEMENTOS.

En este módulo no nos vamos a centrar en el CSS

Vídeo de ayuda:

1. Crea tu primera tabla

Para construir una tabla, utilizamos varios elementos clave, como <table> sería el elemento que contendría todos los elementos de la tabla, <tr> (filas), <th> (celdas de encabezado) y <td> (celdas de datos).

ETIQUETA	DESCRIPCIÓN
`<table>`	Etiqueta contenedora que tendrá en su interior toda la tabla.
`<tr>`	Table Row. Etiqueta contenedora de cada fila de la tabla.
`<td>`	Table Data. Cada una de las celdas de la tabla. (texto llano, párrafos, listas, imágenes, otra tabla…)
`<th>`	Table Header. Cada una de las celdas de cabecera de la tabla.

Ejemplo:

Columna 1	Columna 2
Fila 1, Columna 1	Fila 1, Columna 2
Fila 2, Columna 1	Fila 2, Columna 2

<table>
	<tr>
		<th>Columna 1</th>
		<th>Columna 2</th>
	</tr>
	<tr>
		<td>Fila 1, Columna 1</td>
		<td>Fila 1, Columna 2</td>
	</tr>
	<tr>
		<td>Fila 2, Columna 1</td>
		<td>Fila 2, Columna 2</td>
	</tr>
</table>

En este caso de ejemplo tendríamos una sencilla tabla de 3×3 celdas. Por defecto, en la tabla se crea de forma que se adapta al número de celdas que tiene la primera fila. Es decir, si en el primer elemento <tr> se indican 3 elementos <th>, la tabla esperará siempre 3 elementos en cada fila. Si indicaramos menos, las celdas correspondientes donde deberían estar aparecerían vacías (sin celda). Si añadiéramos una de más, se saldría de la tabla.

Aprendizaje activo: Realiza una tabla de 3×2 que contenga los números del 1 al 6 en cada celda

2. Atributos de las tablas

Las etiquetas que usamos para construir tablas (table, tr, td…) admiten una serie de atributos para añadir algunas propiedades. Muchos de estos atributos también pueden especificarse a través de estilos CSS.

Así, la etiqueta table admite los siguientes atributos:

ATRIBUTO	DESCRIPCIÓN
`Border`	Grosor del borde. Si no queremos tener borde, pondríamos `border="0"`.
`Width`	Anchura de la tabla (en píxeles o en porcentaje sobre la anchura máxima)
Cellspacing	Margen entre el interior del borde de cada casilla y el contenido
Summary	Resumen del contenido de la tabla, útil para lectores de pantalla.

El atributo summary también se puede usar en el elemento table para proporcionar una descripción; los lectores de pantalla también lo leen. Sin embargo, recomendamos usar el elemento caption, porque summary está obsoleto (HTML 5) y porque los usuarios sin discapacidad visual no pueden leerlo (no aparece en la página).

Aprendizaje activo: Modifica la tabla del ejercicio anterior y añade un borde de 1

Cada etiqueta <td> y <th> puede incluir una serie de atributos para modificar su comportamiento visual y combinar o unir celdas. Probablemente, los más interesantes son colspan y rowspan:

Atributo	Descripción
`colspan`	Número de columnas que la celda abarcará.
`rowspan`	Número de filas que la celda abarcará.

Con estos atributos podemos indicar que ciertas celdas abarquen más espacio y se combinen con el espacio que ocuparía otra celda adyacente y así crear estructuras de tabla más flexibles.

El atributo colspan

Veamos un ejemplo sencillo:

<TABLE BORDER>
      <TR>
        <TD>Item 1</TD>
        <TD COLSPAN=2>Item 2</TD>
      </TR>
      <TR>
        <TD>Item 3</TD> <TD>Item 4</TD> <TD>Item 5</TD>
      </TR>
    </TABLE>

Aprendizaje activo: Modifica la tabla anterior para que se combinen las celdas del ítem 3 e ítem 4

El atributo rowspan

El atributo rowspan actuaría exactamente igual que colspan, pero en lugar de afectar a columnas, afectaría a filas. Abarcaríamos las filas en vertical, en lugar de las columnas en horizontal.

<TABLE BORDER>
      <TR>
        <TD>Item 1</TD>
        <TD ROWSPAN=2>Item 2</TD>
        <TD>Item 3</TD>
      </TR>
      <TR>
        <TD>Item 4</TD> <TD>Item 5</TD>
      </TR>
</TABLE>

<TABLE BORDER>
      <TR>
        <TD ROWSPAN=2>Item 1</TD>
            <TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD>
      </TR>
      <TR>
        <TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD>
      </TR>
    </TABLE>

Si lo deseamos, también se puede combinar y aplicar el atributo rowspan junto a un atributo colspan, combinando en ambas direcciones. Los atributos colspan y rowspan podrán tener como máximo el número de columnas o filas de la tabla, en el caso de tener un número mayor, simplemente se utilizará el máximo de la tabla.

Aprendizaje activo: ¿Sabrías escribir en HTML la siguiente tabla?

3. Estilo común a las columnas

Vídeo de ayuda:

HTML tiene un método para definir información de estilo para una columna completa de datos en un solo lugar: los elementos <col> y <colgroup>. Estos atributos existen porque especificar el estilo de las columnas puede resultar enojoso e ineficiente.

Veamos un ejemplo:

<table>
      <tr>
        <th>Columna 1</th>
        <th style="background-color: yellow">Columna 2</th>
      </tr>
      <tr>
        <td>Fila 1, Columna 1</td>
        <td style="background-color: yellow">Fila 1, Columna 2</td>
      </tr>
      <tr>
        <td>Fila 2, Columna 1</td>
        <td style="background-color: yellow">Fila 2, Columna 2</td>
      </tr>
    </table>

Esto no es ideal, porque hay que repetir la información de estilo en las tres celdas de la columna (en un proyecto real probablemente habría definida una clase class en las tres celdas y el estilo se especificaría en una hoja de estilo por separado). En vez de hacer esto, podemos especificar la información una sola vez, con un elemento <col>.

Los elementos <col> se especifican dentro de un contenedor <colgroup> justo debajo de la etiqueta de apertura <table> . Vamos a aplicarlo en el ejemplo anterior:

<table>
      <colgroup>
        <col />
        <col style="background-color: yellow" />
      </colgroup>
      <tr>
        <th>Columna 1</th>
        <th>Columna 2</th>
      </tr>
      <tr>
        <td>Fila 1, Columna 1</td>
        <td>Fila 1, Columna 2</td>
      </tr>
      <tr>
        <td>Fila 2, Columna 1</td>
        <td>Fila 2, Columna 2</td>
      </tr>
    </table>

Fijaros que definimos dos tipos de «columnas de estilo», una que especifica la información para la aplicación de estilo en cada columna. No aplicamos estilo a la primera columna, por lo que incluimos un elemento <col> en blanco; de lo contrario, el estilo también se aplicaría a la primera columna.

Si quisiéramos aplicar la información de estilo a ambas columnas, podríamos incluir un elemento <col> con un atributo span, como este:

<colgroup>
  <col style="background-color: yellow" span="2" />
</colgroup>

Al igual que colspan y rowspan, span toma un valor numérico sin unidades que especifica el número de columnas a las que se desea aplicar el estilo.

Aprendizaje activo: ¿Sabrías escribir en HTML la siguiente tabla?

4. Añadir estructura a una tabla

Vídeo de ayuda:

Por defecto, al crear una tabla, el navegador se encarga de irla creando a medida que va leyendo las etiquetas, por lo que la tabla se crea en el orden que se han especificado sus elementos, desde arriba hacia abajo.

Sin embargo, podemos utilizar una serie de etiquetas contenedoras semánticas para tablas que nos permitirán incluso establecer la zona de la tabla donde deben aparecer, de forma que el navegador se encarga de reorganizarla a la hora de renderizar.

Etiqueta	Descripción
`<thead>`	Delimita la cabecera de la tabla. Generalmente, parte superior.
`<tbody>`	Delimita cuerpo de la tabla. Generalmente, parte central.
`<tfoot>`	Delimita pie de la tabla. Generalmente, parte inferior.
`<caption>`	Subtítulo de la tabla, independientemente de su posición.

Veamos un ejemplo:

<table border="">
      <tr>
        <th rowspan="2">Estudiante</th>
        <th colspan="3">Calificación</th>
      </tr>
      <tr>
        <th>1º ev.</th>
        <th>2º ev.</th>
        <th>3º ev.</th>
      </tr>
      <tr>
        <td>Pepa</td>
        <td>7.5</td>
        <td>3.3</td>
        <td>5.6</td>
      </tr>
      <tr>
        <td>Pepe</td>
        <td>6.1</td>
        <td>7.0</td>
        <td>5.9</td>
      </tr>
      <tr>
        <td>Pepita</td>
        <td>1.2</td>
        <td>4.3</td>
        <td>6.1</td>
      </tr>
    </table>

Vamos a añadir a este ejemplo las etiquetas <thead>, <tbody>, <tfoot> y <caption>

<table border="">
      <caption>Calificaciones</caption>
      <tfoot>
        <tr>
          <td>Final</td>
          <td>10</td>
          <td>10</td>
          <td>10</td>
        </tr>
      </tfoot>
      <thead>
      <tr>
        <th rowspan="2">Estudiante</th>
        <th colspan="3">Calificación</th>
      </tr>
      <tr>
        <th>1º ev.</th>
        <th>2º ev.</th>
        <th>3º ev.</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Pepa</td>
        <td>7.5</td>
        <td>3.3</td>
        <td>5.6</td>
      </tr>
      <tr>
        <td>Pepe</td>
        <td>6.1</td>
        <td>7.0</td>
        <td>5.9</td>
      </tr>
      <tr>
        <td>Pepita</td>
        <td>1.2</td>
        <td>4.3</td>
        <td>6.1</td>
      </tr>
    </tbody>
    </table>

Aprendizaje activo: Realiza tu horario de clase y aplica lo aprendido hasta ahora

Por ejemplo:

Aprendizaje activo: Realiza una tabla en la que resumas y apliques todos los elementos sobre tablas de HTML que he aprendido hasta el momento.

Por ejemplo:

Enlace a la página ejemplo: https://www.htmlquick.com/es/tutorials/tables/5.html#practice

Ver estilos en esta hoja: https://www.htmlquick.com/es/tutorials/tables/3.html

https://nachoiborraies.github.io/htmlcss/md/es/02d

ENLACE AL TEMA 4 ENLACES QUE YA LO HE PUBLICADO

ENLACE AL TEMA 5 IMÁGENES Y LISTAS QUE YA LO HE PUBLICADO

El elemento section

El uso del elemento section es la forma más genérica de dividir al contenido en diferentes secciones. A diferencia de otros elementos más específicos, section solamente expresa que el contenido delimitado por sus etiquetas ha sido agrupado (y separado del resto del contenido) debido a su temática. Esta disociación temática puede ser útil para dividir los capítulos en una novela o para separar los diferentes enfoques en un análisis.

En el ejemplo siguiente, un documento que resume la biografía de Mark Twain ha sido dividido en secciones genéricas de acuerdo con las etapas de su vida.

<section>
  <p>Samuel Langhorne Clemens nació el 30 de noviembre de 1835 en Florida, Missouri. Cuando tenía cuatro años de edad, la familia de Twain se mudó a Hannibal, Missouri, una población portuaria sobre el río Mississippi que inspiró al pueblo ficticio de St. Petersburg en Las aventuras de Tom Sawyer.</p>
</section>
<section>
  <p>Durante 1868, Twain y Olivia Langdon se correspondieron. A pesar de que ella rechazó su primera proposición de matrimonio, dos meses más tarde, estaban comprometidos. En Febrero de 1870, Twain y Langdon se casaron en Elmira, New York, donde la cortejó y consiguió superar la renuencia inicial de su padre.</p>
</section>

Samuel Langhorne Clemens nació el 30 de noviembre de 1835 en Florida, Missouri. Cuando tenía cuatro años de edad, la familia de Twain se mudó a Hannibal, Missouri, una población portuaria sobre el río Mississippi que inspiró al pueblo ficticio de St. Petersburg en Las aventuras de Tom Sawyer.

Durante 1868, Twain y Olivia Langdon se correspondieron. A pesar de que ella rechazó su primera proposición de matrimonio, dos meses más tarde, estaban comprometidos. En Febrero de 1870, Twain y Langdon se casaron en Elmira, New York, donde la cortejó y consiguió superar la renuencia inicial de su padre.

Aunque no es requerido, es una buena práctica preceder los contenidos de section con un encabezado. Esta práctica puede mejorar la legibilidad y permitir a usuarios y navegadores (y otros procesadores de documentos) escanear el documento en busca de partes de interés sin tener que procesar todo el texto con el fin de encontrar la información que están buscando.

Encabezados

En versiones previas del estándar, los encabezados eran usados en sí mismos para definir secciones. Los navegadores y procesadores de documentos usaban la información provista por los encabezados para crear un resumen del contenido del documento. Con la llegada de HTML5 y sus elementos de seccionamiento, esto ha cambiado.

En este nuevo escenario, los elementos de seccionamiento son los responsables de la división del contenido mientras que los encabezados proveen un título para los contenidos de cada sección. Cuando este enfoque es utilizado, el encabezado (habitualmente un h1) precede a todo el contenido en la sección y provee una descripción concisa acerca del mismo.

El siguiente ejemplo expande al anterior, agregando títulos a cada una de las secciones ya presentes.

<section>
  <h1>Vida temprana</h1>
  <p>Samuel Langhorne Clemens nació el 30 de noviembre de 1835 en Florida, Missouri. Cuando tenía cuatro años de edad, la familia de Twain se mudó a Hannibal, Missouri, una población portuaria sobre el río Mississippi que inspiró al pueblo ficticio de St. Petersburg en Las aventuras de Tom Sawyer.</p>
</section>
<section>
  <h1>Matrimonio e hijos</h1>
  <p>Durante 1868, Twain y Olivia Langdon se correspondieron. A pesar de que ella rechazó su primera proposición de matrimonio, dos meses más tarde, estaban comprometidos. En Febrero de 1870, Twain y Langdon se casaron en Elmira, New York, donde la cortejó y consiguió superar la renuencia inicial de su padre.</p>
</section>

Vida temprana

Matrimonio e hijos

Ahora agregaremos una sección alrededor de todo el contenido del ejemplo anterior, para ver qué pasa con los encabezados y sus niveles.

<section>
  <h1>Biografía de Mark Twain</h1>
  <section>
    <h2>Vida temprana</h2>
    <p>Samuel Langhorne Clemens nació el 30 de noviembre de 1835 en Florida, Missouri. Cuando tenía cuatro años de edad, la familia de Twain se mudó a Hannibal, Missouri, una población portuaria sobre el río Mississippi que inspiró al pueblo ficticio de St. Petersburg en Las aventuras de Tom Sawyer.</p>
  </section>
  <section>
    <h2>Matrimonio e hijos</h2>
    <p>Durante 1868, Twain y Olivia Langdon se correspondieron. A pesar de que ella rechazó su primera proposición de matrimonio, dos meses más tarde, estaban comprometidos. En Febrero de 1870, Twain y Langdon se casaron en Elmira, New York, donde la cortejó y consiguió superar la renuencia inicial de su padre.</p>
  </section>
</section>

Biografía de Mark Twain

Vida temprana

Matrimonio e hijos

Como ves, los encabezados de las secciones contenidas por la sección exterior («Vida temprana» y «Matrimonio e hijos») son ahora de nivel dos. Esto tiene sentido ya que ambos son sub-títulos del primer encabezado. Pero HTML5 no requiere que las cosas sean así. Un encabezado h1 es el principal título de la sección en la que se ecnuentra, y no del documento entero, de modo que los autores son libres de usar una u otra configuración.

Los elementos main, header y footer

De entre la variedad de elementos que HTML5 provee para seccionar el contenido, main, header y footer sobresalen por su conveniencia semántica en la creación de documentos típicos. Estos elementos representan, cada uno, una parte del documento o sección en la que son declarados, siendo estas partes, respectivamente: los contenidos centrales o principales, el encabezado (títulos, tablas de contenidos, introducciones, etc.) y el pie (firmas, información de contacto, declaraciones de copyright, etc.)

El ejemplo siguiente muestra una sección de un documento con sus tres partes: un encabezado con un título y una introducción; el contenido central; y un pie con información acerca del autor.

<section>
  <header>
    <h1>Regreso a francia</h1>
    <p>El 1 de Marzo de 1815, Napoleon llega a las costas de Francia a bordo del bergatín Inconstant con unos 1.000 hombres, donde fue recibido calurosamente. Sin realizar disparo alguno en su defensa, el número de tropas a su mando se engrosó hasta convertirse en un ejército.</p>
  </header>
  <main>
    <p>...Una vieja anécdota ilustra el carisma de Napoleon. Cuando las tropas reales fueron desplegadas para detener el avance de las fuerzas de Napoleon's en Grenoble, Napoleon se colocó en frente de éstas, abrió su chaqueta de un tirón y dijo "Si alguno de ustedes le disparará a su Emperador, aquí estoy". Los hombres que se suponía debían detener su avance, se unieron a su causa inmediatamente...</p>
  </main>
  <footer>
    <address>John Doe<br>
    jhondoe@servidoraquienleimporta.com</address>
  </footer>
</section>

Regreso a francia

El 1 de Marzo de 1815, Napoleon llega a las costas de Francia a bordo del bergatín Inconstant con unos 1.000 hombres, donde fue recibido calurosamente. Sin realizar disparo alguno en su defensa, el número de tropas a su mando se engrosó hasta convertirse en un ejército.

…Una vieja anécdota ilustra el carisma de Napoleon. Cuando las tropas reales fueron desplegadas para detener el avance de las fuerzas de Napoleon’s en Grenoble, Napoleon se colocó en frente de éstas, abrió su chaqueta de un tirón y dijo «Si alguno de ustedes le disparará a su Emperador, aquí estoy». Los hombres que se suponía debían detener su avance, se unieron a su causa inmediatamente… John Doe
jhondoe@servidoraquienleimporta.com

Los cuatro elementos de seccionamiento tratados en este documento son parte de un grupo más grande y rico. Para tener una visión más amplia del tema, visita la lista de elementos de HTML.

Práctica: Realiza una práctica parecida a esta pero con el último contenido que hemos visto ( listas, enlaces, imágenes, secciones, encabezados, Los elementos main, header y footer (ver la práctica de ejemplo https://www.htmlquick.com/es/tutorials/content-grouping-and-structure/3.html)

https://www.htmlquick.com/es/tutorials/content-grouping-and-structure.html#lists

https://nachoiborraies.github.io/htmlcss/md/es/02d