Creación de tablas

Comunmente mucha gente utiliza tablas para diseñar páginas web, esto no es correcto ya que las tablas son creadas con el fin de organizar datos como por ejemplo un calendario, el problema con las tablas es que son difíciles de entender cuando se utiliza un lector de pantalla puesto que no arroja la información suficiente, entonces necesitamos darle a dicha tabla ciertos atributos que la vuelvan más amigable.

Un ejemplo de tabla:

Códigos de color hexadecimal
COLOR	CÓDIGO
Negro	#000
Rojo	#ff0000
Amarillo	#ffff00

Conozcamos la estructura de la tabla en HTML:


<table width="248" border="1" bordercolor="#333333">
  <tr>
    <td colspan="2" align="center">Códigos de color hexadecimal</td>
  </tr>
  <tr>
    <td width="199">COLOR</td>
    <td width="235">CÓDIGO</td>
  </tr>
  <tr>
    <td>Negro</td>
    <td>#000</td>
  </tr>
  <tr>
    <td>Rojo</td>
    <td>#ff0000</td>
  </tr>
  <tr>
    <td>Amarillo</td>
    <td>#ffff00</td>
  </tr>
</table>

Las tablas se crean primero abriendo <table> luego creamos una fila <tr> y la dividimos en las columnas que necesitemos <td>

Pero resulta que el título de nuestra tabla no se interpreta como tal sino como un dato más así que lo primero será darle un título a la tabla con el parámetro CAPTION

En vez de crear una fila con el título ponemos este código:

<caption> Códigos de color hexadecimal </caption> 

Lo siguiente que debemos hacer es dar una breve explicación sobre los contenidos de la tabla para las personas que requieren lector de pantalla, por ejemplo, "resumen de los principales colores de acuerdo al código de color para HTML" vamos a usar el parámetro SUMMARY, nuestro código se verá así:

summary="resumen de los principales colores de acuerdo al código de color para HTML"

este código va dentro de la etiqueta <table>

Por último debemos hacer que el lector reconozca los encabezados de cada fila o columna, entonces en vez de etiquetarlos con <td> lo haremos con <th>

Vamos a ver como queda nuestra tabla después de estos 3 cambios:

Códigos de color hexadecimal

COLOR	CÓDIGO
Negro	#000
Rojo	#ff0000
Amarillo	#ffff00

La vemos igual a la anterior pero ahora los lectores de pantalla la entenderán mejor, aquí está el código completo:

<table width="248" border="1" bordercolor="#333333" summary="resumen de los principales colores de acuerdo al código de color para HTML">

  <caption> Códigos de color hexadecimal </caption>

  <tr>

    <th width="199">COLOR</th>

    <th width="235">CÓDIGO</th>

  </tr>

  <tr>

    <td>Negro</td>

    <td>#000</td>

  </tr>

  <tr>

    <td>Rojo</td>

    <td>#ff0000</td>

  </tr>

  <tr>

    <td>Amarillo</td>

    <td>#ffff00</td>

  </tr>

</table>