Foros del Web » Creando para Internet » HTML »

Tablas - Diferencia de etiquetas

Estas en el tema de Tablas - Diferencia de etiquetas en el foro de HTML en Foros del Web. Bueno, la verdad no entiendo la diferencia entre <th sope="col"> vs <th sope="row">. Aquí tengo un ejemplo que saque de la pagina que tengo como ...
  #1 (permalink)  
Antiguo 04/02/2008, 19:32
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 18 años, 5 meses
Puntos: 12
Tablas - Diferencia de etiquetas

Bueno, la verdad no entiendo la diferencia entre <th sope="col"> vs <th sope="row">.
Aquí tengo un ejemplo que saque de la pagina que tengo como firma y no he podido observar diferencia cuando cambio de col a row y algo parecido me pasa con los td pero con la diferencia de que no me lo pone en negrita.
Código HTML:
<table>
  <tr>
    <th scope="col">Nombre producto</th>
    <th scope="col">Precio unitario</th>
    <th scope="col">Unidades</th>
    <th scope="col">Subtotal</th>
  </tr>
 
  <tr>
    <td>Reproductor MP3 (80 GB)</td>
    <td>192.02</td>
    <td>1</td>
    <td>192.02</td>
  </tr>
 
  <tr>
    <td>Fundas de colores</td>
    <td>2.50</td>
    <td>5</td>
    <td>12.50</td>
  </tr>
 
  <tr>
    <td>Reproductor de radio &amp; control remoto</td>
    <td>12.99</td>
    <td>1</td>
    <td>12.99</td>
  </tr>
 
  <tr>
    <th scope="row">TOTAL</th>
    <td>-</td>
    <td>7</td>
    <td><strong>207.51</strong></td>
  </tr>
</table> 
cuando cambio el sutotal no pasa nada

para ser mas especifico, quisiera saber de esto para las td y th
▪ scope = "col, row, colgroup, rowgroup"

con algunos ejemplos porfavor

gracias
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #2 (permalink)  
Antiguo 05/02/2008, 04:14
 
Fecha de Ingreso: septiembre-2007
Mensajes: 184
Antigüedad: 16 años, 7 meses
Puntos: 4
Re: Tablas - Diferencia de etiquetas

El atributo scope puede tener cuatro valores row o col y rowgroup o colgroup solo se usa con etiquetas <th> o <td>.

En realidad es solo un atributo para personas con discapacidades visuales (ciegas), que usan navegadores no visuales.
Cuando una persona ciega se encuentra una tabla mientras navega con los navegadores especiales de voz o traductores a braile se encuentra con un problema, es un autentico calvario que se enteren como esta la informacion estructurada y que tenga sentido algo.

Para ello existen una serie de atributos que les facilitan la tarea de comprender como esta estructurada la informacion.

Imaginate que tienes una tabla en la que se guarda informacion sobre las estadisticas de un partido de baloncesto.
http://www.nba.com/games/20080204/PHIATL/boxscore.html

Si te fijas en esa tabla hay un listado de nombres de jugadores con un monton de estadisticas individuales para cada uno de ellos.

Cuando un ciego con navegadores no visuales se posiciona en una celda no sabe en que direccion esta la informacion relacionada o cuales son los campos importantes y sus datos asociados.

¿Cuales serian los campos importantes en esa tabla? Pues los nombres de los jugadores y cada estadistica individual (rebotes, porcentaje de tiros) y los datos asociados serian las estadisticas individuales de cada jugador.

Por lo tanto en esa tabla habria que poner celdas de cabecera <th> a los campos importantes de nombres de jugadores y tambien a las de las estadisticas, las demas celdas serian <td> y recogerian los datos de cada estadistica de cada jugador.

Esta diferenciacion de th y td le indica a una persona ciega cuales son los campos importantes y cuales son datos asociados.

Entonces entra en juego el atributo scope que es a donde queriamos llegar.
La persona ciega ahora conoce mas o menos la estructura general de los datos, pero para facilitar aun mas esa lectura le proporcionamos el atributo scope que aunque se puede usar con td o th, tiene mucho mas sentido usarlo solo con th.

Vayamos a los th de los jugadores, cada jugador esta en una celda th y los datos estadisticos de cada jugador estan a su derecha formando una linea en diferentes celdad td.
Por lo tanto el scope para el th del jugador es ROW (linea), porque los datos asociados a ese th estan formando una linea a su derecha.

Ahora vamos a los th de los datos estadisticos, siguendo el ejemplo de la tabla el primero seria POS (ver link,que es la posicion en la que juega cada jugador ), como vemos los datos estan hacia abajo formando una columna, por lo tanto el scope seria COL (columna).

Todo esto ayuda a la persona ciega a saber que existe un jugador con unos datos asociados que estan en las celdas consecutivas hacia la derecha, en linea y estos datos pertenecen a un tipo de dato concreto (posicion, rebotes..) que estan asociados a su vez por columnas.

Por lo tanto scope marca una relacion entre cabeceras y sus datos para navagedores lectores y dispositivos de braile para personas con dificultad visual o ciegas. Estas personas leen las celdas de una en una siguiendo un proceso de linearizacion.
Para facilarles la tarea haremos buen uso de las cabeceras th, del atributo scope, y del atributo summary de table y del atributo abr.

Y para tablas que segun su estructura compleja sea dificil aplicar scope correctamente usaremos atributos id y headers, pero esta ultima tecnica es un poco liosa, asi que recomiendo mantener las tablas simples, claras y bien estructuradas, y por supuesto solo usarlas para presentar datos tabulares. Por lo tanto no hace falta decir que tablas usadas para la presentacion, generalmente anidadas y no linerializadas rompen la accesibilidad del sitio de una manera radical para toda persona con carencia visual a parte de ser una forma de tratar las tablas obsoleta y no estandar ya que el xhtml tiene que mantenerse ajeno a todo dato de presentacion (para eso esta el CSS).

Si no usas CSS y un marcado xhtml estandar, los navegadores formatean los th generalmente en negrita y centrandolos y obvian los scope, pero si buscas un codigo de calidad toda informacion de estilo tiene que ser tratada mediante CSS.

*Obviamente si se mira el codigo del ejemplo que te he puesto en el link rompe las reglas de accesibilidad por muy NBA que sean pero solo ha sido a modo de ejemplo para entender el proceso.

Espero que te haya servido la explicacion aunque quizas la he hecho algo engorrosa de entender.

Última edición por feral; 05/02/2008 a las 04:41
  #3 (permalink)  
Antiguo 05/02/2008, 10:51
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 18 años, 5 meses
Puntos: 12
Re: Tablas - Diferencia de etiquetas

Estoy mas claro ahora (no del todo, pero ahí vamos) ¿es mas recomendable usar th scope que td scop según veo.

y si, estoy haciendo las cosas con xhtml para ser accesible, ahora ¿esa tabla la del link no es accesible por la estructura o porque esta maquetada mal? visualmente hablando.
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #4 (permalink)  
Antiguo 07/02/2008, 06:33
 
Fecha de Ingreso: septiembre-2007
Mensajes: 184
Antigüedad: 16 años, 7 meses
Puntos: 4
Re: Tablas - Diferencia de etiquetas

Si, es mas recomendable usar th scope, porque las cabeceras (th) son las unicas que tienen asocidadas datos a lo horizontal (row) o vertical (col).
El codigo que has puesto de tu tabla seria una tabla accesible ya que indicas las cabeceras y sus scope. En cambio la tabla del link de mi mensaje anterior no seria una tabla accesible completa porque solo usa cabeceras th para los datos estadisticos y no para los nombres de jugadores ademas no usa el atributo scope por lo tanto es un autentico laberinto.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:13.