tablas estandares y accesibles
5 seguidores
De verdad, lo he intentado, pero no hay forma, es mas triste de robá que de pedí, asi que recurro al foro para ver si algun alma caritativa puede ponerme algun ejemplito de una tabla de tres columnas, su thead, su tfoot, etc y que cada columna lleve su ancho y demas... tal que asi:
http://www.slapstudio.com/dmstk/esmastristedepedi.gif
por favor, soy un pobre hombre que quiere dar de comer a sus hijos... :([/img]
PD: señor/es administrador/es, fijese usté en el detalle de usar colores corporativos pa no chafarle a usté el foro :P
cbp
jeje, es que tenía el código por ahí y andaba buscando el mejor post para ponerlo. he visto el tuyo y me he dicho "venga, aquí mismo" :P
no, en serio, lo he puesto porque con ese código se logra una tabla equivalente a una con cellspacing="1", usease, con bordecito rodeando cada celda. a mí me costo encontrar la manera de sacaa ese borde, así que he pensado que a lo mejor algún parámetro de la css te podía dar una pistilla.
pero vamos, que esperes a klein que es bastante más competente que yo :P
saludos.
hipster
buenas cbp, gracias pero tu codigo no me soluciona gran cosa ;)
la idea es darle solo los bordes laterales a las filas, ya que el head y foot llevan su imagen de background con las esquinas redondeadas, que es la pijada que ya hay en la web y se quiere mantener.
y eso es lo que no consigo hacer, el resto de la tabla esta construida sin problemas, aunque no se si correctamente, espero el visto bueno de Mr. Klein :)
cbp
prueba con esta declaración en el css. tienes que darle además un border-right a todas las celdas excepto a las que estén a la derecha del todo :)
<code>table {
margin: 0px;
padding: 0px;
border-collapse: collapse;
border-spacing: 0px;
border-top: 1px #d0d0d0 solid;
border-left: 1px #d0d0d0 solid;
border-right: 1px #d0d0d0 solid;
border-bottom: 0px;
width: 100%;
font-family: Tahoma;
}
table thead tr th {
border-bottom: 1px #d0d0d0 solid;
background-color: #f0f0f0;
padding: 3px 5px;
text-align: center;
font-size: 11px;
font-weight: bold;
color: #808080;
}
table tfoot tr th {
border-bottom: 1px #d0d0d0 solid;
background-color: #f0f0f0;
padding: 3px 5px;
text-align: center;
font-size: 11px;
font-weight: bold;
color: #808080;
}
table tbody tr td {
border-bottom: 1px #d0d0d0 solid;
padding: 3px 5px;
font-size: 11px;
font-weight: normal;
color: #808080;
}</code>
hipster
Bueno vamos alla, yo lo estaba hacieno, seguro que mal, tal que asi, la sintaxis html esta bien, por lo que he podido comprobar. El problema lo he tenido al declarar las secuencia de datos y aplicarle los estilos, que veo que lo he introducido en etiquetas equivocadas.
codigo css:
<code>table.mater
{
width: 546px;
/*border:1px solid #D5CFB4;*/
background-color: #fafafa;
background-image:url(images/barra_tab_top546x30.gif);
background-repeat:no-repeat;
border-collapse: collapse;
font-family:Arial, Helvetica, sans-serif;
font-size: .7em;
}
th#matermodulo, th#materhoras, th#materprofes {
height:31px;
font-weight: bold;
font-size: 12px;
color: #A1360A;
text-align:center;
}
td.tabfoot
{
height:15px;
background-image:url(images/barra_tab_bottom546x15.gif);
background-repeat:no-repeat;
}
td.row2
{
text-align: left;
font-weight: normal;
color: #404040;
background-color: #FDFCE6;
padding-top: 4px 0px 4px 5px;
}
td.row1
{
text-align: left;
font-weight: normal;
color: #404040;
background-color: #FDFBF3;
padding-top: 4px 0px 4px 5px;
}
</code>
y codigo html:
<code><table class="mater" summary="Relación de Materias, Profesores y número de horas">
<thead>
<tr>
<th id="matermodulo">Módulo</th>
<th id="materhoras">Horas</th>
<th id="materprofes">Profesores/as</th>
</tr>
</thead>
<tfoot>
<tr>
<td class="tabfoot" colspan="3"></td>
</tr>
</tfoot>
<tbody>
<tr>
<td class="row1">Lorem Ipsum</td>
<td class="row1">Lorem Ipsum</td>
<td class="row1">Lorem Ipsum</td>
</tr>
<tr>
<td class="row2">Lorem Ipsum</td>
<td class="row2">Lorem Ipsum</td>
<td class="row2">Lorem Ipsum</td>
</tr>
...........
</tbody>
</table>
a machacarme el codigo plis ;)</code>
como veis yo estaba definiendo las filas mediante class, pero intuyo que no es lo correcto. ¿cual seria la opcion adecuada?
En esta tabla simple haria falta declarar una "jerarquia de lectura"?
Otra cosa: ¿porque los td no me responden cuando le indico que quiero un borde especifico? no encuentro la forma de darle los border que necesito a la tabla en sus filas...
espero que me podais echar un cable con esto ;)
cbp
jo, menos mal que has corregido el código, porque empezaba a pensar que me había vuelto gili por no entender la organización de la tabla :D
ahora ya me queda más claro, para tablas simples el scope, para tablas más complejas el headers ¿no?
gracias por la información :)
klein
Exacto, habría que poner en el atributo headers, los ids separados por espacios.
Por ejemplo y utilizando las cabeceras que he puesto antes (he corregido el código de arriba porque había puesto un ejemplo que estaba mal, las típicas idas de pinza):
<code>
<tr>
<th colspan="4" id="do">Domestikos</th>
<th colspan="4"id="da">Domestikas</th>
</tr>
<tr>
<th colspan="2" id="do-men" >Menos de 18</th>
<th colspan="2" id="do-mas">Mas de 18</th>
<th colspan="2" id="da-men">Menos de 18</th>
<th colspan="2" id="da-mas">Mas de 18</th>
</tr>
<tr>
<th id="do-men-mad">Madrid</th>
<th id="do-men-bar">Barcelona</th>
<th id="do-mas-mad">Madrid</th>
<th id="do-mas-bar">Barcelona</th>
<th id="da-men-mad">Madrid</th>
<th id="da-men-bar">Barcelona</th>
<th id="da-mas-mad">Madrid</th>
<th id="da-mas-bar">Barcelon</th>
</tr>
</code>
Y los tds deberían ser:
<code>
<tr>
<td headers="do do-men do-men-mad">10%</td>
<td headers="do do-men do-men-bar">5%</td>
<td headers="do do-mas do-mas-mad">5%</td>
<td headers="do do-mas do-mas-bar">10%</td>
<td headers="da da-men do-men-mad">10%</td>
<td headers="da da-men do-men-bar">30%</td>
<td headers="da da-mas do-mas-mad">30%</td>
<td headers="da da-mas do-mas-bar">10%</td>
</tr>
</code>
cbp
aaaaaaaah ¿y entonces qué habría que poner en el headers de cada uno de los td's? ¿todas las cabeceras a las que pertenece cada celda?
klein
Uffff... por partes :)
Hipster
muchas gracias klein, veo para mi sorpresa y alegria que no era el unico que tenia atravesadas las tablas :D
unas preguntas sobre tu codigo:
1. ¿porque utilizas headers como su fueran id? cumplen la misma funcion o es para indicar de alguna forma que elemento pertenece a cada col?
2. ¿porque situas el tfoot antes que el tbody? da igual donde se situe?
3. si no es mucho pedir, ¿podrias ejempleficar un caso practico para construir una tabla similar al dibujo con css para saber si lo estoy haciendo de forma correcta? el codigo lo tengo en casa, esta tarde copiare lo que estoy haciendo yo para ver si lo estoy haciendo de forma correcta o no.
muchas gracias, se va encendiendo la bombilla ;)
1. Como bien dices, el atributo headers indica a qué columna pertenece. Fundamental para que las tablas se lean correctamente en un lector de pantalla o en un navegador de voz.
2. Lo que ha dicho cbp. Por la especificación.
3. Mejor lo vamos a hacer al revés. Pon tú el código y entre todos lo vamos revisando. Te parece?
cbp
¿por qué utilizar scope en lugar de headers sólo si la tabla es muy simple? yo utilizo scope="col" normalmente...
El atributo scope permite utilizarse con un nivel por vez (row, col, rowgroup, etc). ¿Cómo harías con una tabla con una cabecera en red como esta?
<code>
<tr>
<th colspan="4">Domestikos</th>
<th colspan="4">Domestikas</th>
</tr>
<tr>
<th colspan="2">Menos de 18</th>
<th colspan="2">Mas de 18</th>
<th colspan="2">Menos de 18</th>
<th colspan="2">Mas de 18</th>
</tr>
<tr>
<th>Madrid</th>
<th>Barcelona</th>
<th>Madrid</th>
<th>Barcelona</th>
<th>Madrid</th>
<th>Barcelona</th>
<th>Madrid</th>
<th>Barcelon</th>
</tr>
</code>
cbp
el tfoot va antes del tbody porque lo pone en las especificaciones :P
[...]
TFOOT must appear before TBODY within a TABLE definition so that user agents can render the foot before receiving all of the (potentially numerous) rows of data. The following summarizes which tags are required and which may be omitted:
* The TBODY start tag is always required except when the table contains only one table body and no table head or foot sections. The TBODY end tag may always be safely omitted.
* 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.
[...]
más información
:D
hipster
muchas gracias klein, veo para mi sorpresa y alegria que no era el unico que tenia atravesadas las tablas :D
unas preguntas sobre tu codigo:
1. ¿porque utilizas headers como su fueran id? cumplen la misma funcion o es para indicar de alguna forma que elemento pertenece a cada col?
2. ¿porque situas el tfoot antes que el tbody? da igual donde se situe?
3. si no es mucho pedir, ¿podrias ejempleficar un caso practico para construir una tabla similar al dibujo con css para saber si lo estoy haciendo de forma correcta? el codigo lo tengo en casa, esta tarde copiare lo que estoy haciendo yo para ver si lo estoy haciendo de forma correcta o no.
muchas gracias, se va encendiendo la bombilla ;)
cbp
¿por qué utilizar scope en lugar de headers sólo si la tabla es muy simple? yo utilizo scope="col" normalmente... :oops:
pedro_fm
id y headers que funcion cumplen exactamente en este caso?
klein
Aquí os dejo un ejemplo:
<code>
<table summary="Este es el resumen de la tabla">
<caption>Lorem Ipsum</caption>
<thead>
<tr>
<th id="cabecera1">Cabecera1</th>
<th id="cabecera2">Cabecera2</th>
<th id="cabecera3">Cabecera3</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">Este es el footer</td>
</tr>
</tfoot>
<tbody>
<tr>
<td headers="cabecera1">Lorem Ipsum</td>
<td headers="cabecera2">Lorem Ipsum</td>
<td headers="cabecera3">Lorem Ipsum</td>
</tr>
<tr>
<td headers="cabecera1">Lorem Ipsum</td>
<td headers="cabecera2">Lorem Ipsum</td>
<td headers="cabecera3">Lorem Ipsum</td>
</tr>
<tr>
<td headers="cabecera1">Lorem Ipsum</td>
<td headers="cabecera2">Lorem Ipsum</td>
<td headers="cabecera3">Lorem Ipsum</td>
</tr>
</tbody>
</table>
</code>
Si la tabla es muy simple, en lugar de headers utilizaría el atributo scope
nachogil
o unos parrafillos teoricos con "todo lo que siempre quise saber sobre tablas accesibles, y solo Klein me puede enseñar..."
P.D.: Y si no lo haces, sacare a la luz tu pasado de boludo javero :-P
nachogil
Klein,
peganos unos ejemplillos de tablas accesibles en condiciones anda... porfa...
:-)
klein
¿Qué necesitas exactamente? ¿Necesitas ver un ejemplo de tabla a 3 columnas y accesible? ¿Necesitas el css que llevaría la tabla?