Curso de html. Tabla de html con el atributo summary.

Actualizado: 04/10/2014
Html5, no permite la utilización en las tablas del atributo summary, pero si de la etiqueta caption. Si se sigue creando páginas en xhtml, no está de más el aprender el significado de este atributo summary. En el caso de querer adaptarse a los nuevos tiempos y programar utilizando html5, leer esta página solo tendría sentido si se quiere tener cierta documentación histórica, a vuestra elección lo dejo.

Podemos hacer una tabla en html con un poco mas de clase y bastante mas acessible, si añadimos algunos atributos y tipos de etiquetas más.

El atributo summary se utiliza para dar una descripción lo mas precisa posible del contenido o tema tratado en nuestra tabla. Esto se hace de cara a los lectores de pantalla que utilizan las personas con minusvalia visual. Es importante que nos acostumbremos a hacer todas nuestras presentaciones web, pensando también en esas personas cuya visión es limitada, sin contar el hecho de que facilitamos también el trabajo a los motores de búsqueda, al incluir información adicional a nuestra tabla. El contenido de summary no aparece en la pantalla del navegador, solo es visible para lectores de pantalla.

Veamos el etiquetado de html de la tabla con atributo summary:

 

<table summary=»Tabla de html con el atributo summary que sirve para mejorar la accesibilidad a la misma»>

<caption>

Tabla mas acsesible y completa añadiendo el atributo summary.

</caption>

<tr>

<th>encabezado colum1</th><th>encabezado colum2</th>

</tr>

<tr>

<td>fila1 colum1</td><td>fila1colum2</td>

</tr>

<tr>

<td>fila2 colum1</td><td>fila2 colum2</td>

</tr>

</table>

La etiqueta <caption> se utiliza para poner un título a nuestra tabla. Esta información o contenido si aparecerá en la página web, podemos añadir etiquetas tipo <h1><h2>,etc para cambiar el formato que por defecto tiene el navegador para este tipo de etiqueta.

La etiqueta <tr> ya sabemos que delimita las filas de nuestra tabla.

La etiqueta <th> la utilizamos para poner encabezados a nuestras columnas. Esta etiqueta es tratada de forma semántica por el navegador, conviene ponerla también.

El resto de etiquetas que sigue ya las explicamos en la sección precedente a esta. crear una tabla

ejemplo de tabla semántica con el atributo summary:

<table summary=»Esta tabla muestra una clasificación de marcas de coche y su precio en el mercado» border =»1″>

<caption>

Marcas de coche-precios de mercado.

</caption>

<tr>

<th>MARCA</th><th>MODELO</th><th>PRECIO</th>

</tr>

<tr>

<td>MERCEDES</td><td>CLS350BE</td><td>68600€»</td>

</tr>

<tr>

<td> BMW</td><td> BMW Cabrio M3
420</td><td>
87100€»</td>

</tr>

</table>

Hemos añadido un atributo border para que nos cree un marco en la tabla y tenga más aspecto de tabla.

Actualizado: 04/10/2014
Html5, no permite la utilización en las tablas del atributo border=»» en el código html, el borde habrá que aplicarlo utilizando Css.

Es una tabla bastante sencilla pero servirá para que veais como funcionan estas etiquetas y el atributo summary. El navegador mostraría la tabla de esta manera:

Marcas de coche-precios de mercado.
MARCA MODELO PRECIO
MERCEDES CLS 350 BE 68600€
BMW BMW Cabrio M3 420 87100€

El borde de esta tabla lo he aplicado con css. el explicar como funciona css, no es competencia de este curso de html, sin embargo dada la extrecha relación, que tiene el curso de css, con el curso de html, cualquier duda o dudas que puedan surjir sobre cualquiera de estos dos lenguajes, podeis hacérmelas llegar.

¿Te ha gustado? Compártelo.