¿Usar tabla o divs?

[LoBo2024]

Veamos necesito mostrar la información de una ficha, osea:

Nombre: XXXXX
Apellidos: XXXXX
Estado emotivo: XXXXXX

No se si sería mejor mostrarlo en tablas o en capas ahi estoy perdido.

[frijolerou]

¿Y por qué no una lista de definición?

Código HTML:

<dl>
    <dt>Nombre:</dt>
    <dd>XXXXXX</dd>
    <dt>Apellidos:</dt>
    <dd>XXXXXX</dd>
    <dt>Estado emotivo:</dt>
    <dd>XXXXXX</dd>
</dl> 

[LoBo2024]

Mmm pues no es mala idea no.. vamos la cosa es para una ficha pero eso deberia ser correcto totalmente, no? y muy accesible, no?

Es q claro la cosa era q la ficha iba por bloques tb en plan

Datos generales
Nombre: blababla
Apellidos: blablaa

Datos de contacto
Direccion: blablabla
telefono: xxxxx

Por eso pensaba q datos generales, datos de contacto serían el caption... pero ya te digo ahi ando algo perdido no se q opción coger pq todas me parecen correctas :/

[Daniel Ulczyk]

Semánticamente no es correcto el uso de una lista de definición, lo que se pretende aquí es mostrar datos tabulados; y al respecto no hay inconvenientes en utilizar tablas.
Ahora bien, a mi entender la correcta definición de la estructura de una tabla, debe ser como sigue:

Código HTML:

<table>
  <caption>
  tabla de datos
  </caption>
  <thead>
    <tr>
      <th>datos personales </th>
      <th>descripción</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>fecha</th>
      <td>11/10/07</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <th>nombre</th>
      <td>alfa</td>
    </tr>
    <tr>
      <th>apellido</th>
      <td>beta</td>
    </tr>
    <tr>
      <th>estado emotivo </th>
      <td>gamma</td>
    </tr>
  </tbody>
</table> 

Saludos!

[LoBo2024]

Y una pregunta el thead y el tbody son obligatorios totalmente? o sino tengo nada pongo las etiquetas esas vacias? o mejor no las pongo?

Muchisimas gracias por las contestaciones ;)

[Daniel Ulczyk]

El ejemplo que te puse está en línea con tus requerimientos:
Estructurado de una forma correcta y accesible.
Entiendo que es una buena práctica utilizar thead y tbody

Ejemplo: si construís una pared y dejás el hueco para la ventana, lo esperado es que pongas la ventana. Y no dejes el hueco

[lucasan]

100% cierto.

Hace un tiempo lei algo en un blog, y decía el tipo este "las tablas son del diablo".

Y no es cierto, las tablas tienen un uso específico y es mostrar datos tabulados, lo cual es lo que necesitas.

[Daniel Ulczyk]

No confundamos, las "tablas son del diablo" si hoy día se te ocurre llevar a cabo cualquier suerte de diseño, basándose precisamente en ese estilo de maquetación.
Por otro lado para mostrar datos tabulados, como bien dije, es el mejor elemento al cual se le puede echar mano.
En mi blog, precisamente hago referencia a la versión traducida de "Por qué diseñar con tablas es estúpido".
La versión, la cual cito, puede leerse en http://www.effectivetranslations.com...ything_es.html

[LoBo2024]

Entonces a ver si no tengo nada que poner en el thead pq la estructura yo no peudo cambiarla me la han dado así que hago... le pongo un thead vacio o mejor no le pongo? seguirá siendo valido? 0_o

[Daniel Ulczyk]

No entiendo por qué decís que no podés cambiar la estructura.
En tu primer post podías elegir entre un <table> o un <div> ¿no es cierto?
Además, claramente en tu ejemplo, puede inferirse el <thead>; ahora bien, si no disponés de la data, no tiene sentido armar la estructura con un &nbsp; podés elegir entre una tabla con markup correcto o sin ella, aunque válido.
Si elegís lo segundo, entonces comienza a estar fuera de los alcances de este foro.
Saludos!

[LoBo2024]

A ver... me refiero a q no puedo tocar la estructura de datos, q los datos a visualizar y la forma de mostrarlos son exigidos por el cliente.

Segundo que la forma que yo he mostrado los datos al principio no puedo poner thead ya que cada cada bloque sería una tabla con su caption y su summary, por eso yo me pregunto que si no hay thead no cumple lo que es una tabla? es obligadisimo ponerselo? 0_o ¿hay algún sitio que pueda leer más información sobre este tema de lo que es obligatorio/recomendable para hacer tablas accesibles?

Muchísimas gracias!

[Daniel Ulczyk]

Acá existen dos puntos de vista:

1. Cumplir a ciegas la exigencia del cliente.
2. Mostrarle al mismo cómo deben hacerse las cosas.

Si tu post, originalmente, hubiera sido publicado en el foro de Web General, por ejemplo, posiblemente (aunque en forma poco probable) quien hubiese contestado podría haberse pasado por alto el nombrarte <thead>, <tbody>, etc. y haberte dicho, simplemete:

datos tabulados = tabla

Con la pertinencia de mostrar esos datos en forma accesible, te he mostrado una estructura básica, accesible y de acuerdo a las consideraciones establecidas por la World Wide Web Consortium.
Al respecto, podés sentirte libre de consultar el documento Tables in HTML documents.
Que tengas mucha suerte!

[LoBo2024]

Cito de la web que me has pasado.

The start tags for THEAD and TFOOT are required when the table head and foot sections are present respectively, but the corresponding end tags may always be safely omitted.

Osea como bien dice cuando sean presentes... osea en ningún caso no pone q sean obligatorios 100%. Almenos eso es lo que yo llego a entender que basicamente el THEAD y el TFOOT te sirve para:

Table rows may be grouped into a table head, table foot, and one or more table body sections, using the THEAD, TFOOT and TBODY elements, respectively. This division enables user agents to support scrolling of table bodies independently of the table head and foot. When long tables are printed, the table head and foot information may be repeated on each page that contains table data.

Y dice puede ser agrupado... osea no dice que debe ser que es muy diferente por eso yo pienso que puede llegar a ser opcional pq no siempre los datos tabulados tienen que ser todos iguales, vamos creo yo...

Que conste que yo si puedo lo hago accesible al 100% pero vamos q sino es del todo necesario para que pelear con el cliente cuando no se tiene razón?

[Daniel Ulczyk]

Claro que no es obligatorio, nada es obligatorio entonces...!
Pero acá estamos hablando de accesibilidad (repito).
No es una opinión particular, pero defino accesibilidad cuando se accede al
contenido con independencia del dispositivo.
Si querés armar tu tabla prescindiendo de los marcadores recomendados, si no podés utilizar <thead> porque vas mostrar contenido tabulado mezclando naranjas con zapallos, entonces mi amigo; este thread será de nunca acabar.
Si vas a llevar a cabo contenido accesible, acá no hay grises. O es accesible o no lo es.

[LoBo2024]

A ver... ains... creo que no nos hemos entendido a ver entiendo que si que si eso estuviera ahí sería mejor y tal, igual que si pusieramos un longdesc a todas las imagenes para no decirle a un ciego simplemente Logo de Telefónica sino poner logo de telefonica con fondo azul y letras blancas, con una fuente cursiva que blabalbalbala... pero verdad que no siempre se usa el longdesc para todas las imagenes y verdad que sigue siendo accesible?

Una cosa es que si ponemos un javascript que solo si tienes javascript o un flash q solo si tienes flash puedas acceder a tal sitio, que eso es inaccesible y otra es que podría ser más accesible pero igualmente es accesible, digamos por ejemplo una rampa para entrar en un edificio o si alguien cojiera y pusiera una rampa electrica y asi la persona en cuestión no se cansaría.

No se si me he explicado bien la verdad... pero basicamente me refiero a que la tabla puede seguir siendo accesible sin thead y tfoot, no? Aunque ya se que sería mejor con ello, pero tp es algo q o lo lleva o no es accesible... vamos creo yo...