Cómo maquetar con CSS una tabla como esta

*con esto consigues que todas las celdas tengan el borde inferior como quieres:

table td{ border-bottom:1px solid #CCC;}

luego al td del centro le declaras una clase .columna_centro y pones este CSS

table td .columna_centro{
border-left:1px solid #CCC;
border-right:1px solid #CCC;
}

y asi todos los td de la columna del centro tendran el borde izq y derecho.

Temas paddin align y demas te lo dejo a ti ;-)

THX!
Creo que esa solución me la dijeron aquí, pero no quería echar mano de clases. Pero si quiero que se vea en ambos navegadores, parece que no hay otra.

Te mando un mail con el archivo .htm.

Probado en Explorer 7 y en FF. En el resto no se como se verá. En estos dos se ve clavadito a tu imagen, y sin clases.

Espero que te sirva

Joer, que majete, gracias!
Yo lo miré en IE6 y FF (claro, esta vez, increíblemente, IE hace lo que pretendía y FF no).

Ok, lo miro ahora. THX!!!

Acabo de ver tu ejemplo: ahora pasa exactamente al revés, Firefox lo muestra perfectamente... y el puto IE6 no :(
De todas maneras, gracias por la molestia de ponerte a picarlo y mandármelo.

Si, yo lo probé en IE7, que es el que tengo en en curro. Si consigo sacar algo más te lo paso.

Encima ahora todos estarán de vacaciones y nos han dejado solos en Domestika :(

mambrú ponte ahí un link al archivo y así le echamos un ojo toos ;)

Lo subo yo en un momentillo. Le he hecho unos cambios de márgenes de nada, así que don't worry, mambrú, todo sigue en su sitio.

EDITO: Aquí está

El selector de adyacencia (+) no es soportado por ie6

¿que teneis contra las clases si se puede saber?

viene a ser a ¿como maqueto tal texto pero no quiero utilizar la etiqueta <p>?

Mi no entender :-?

Si yo no tengo ninguna pega. De hecho, yo habría utilizado clases como tú bien decías. Lo he probado así ya que Josh no quería tirar de ellas.

Voy a probar con col y colgroup y os comento a ver qué me sale, pero me parece que no voy a tener éxito...

Nada, aparte de que no funciona igual "col" en FF que en IE7, mientras td sea el último elemento al que se le pueda dar formato a través de la css no se puede hacer nada.

La opción más correcta creo que es el uso de clases. Con una te quitas de tanta historia, además que es una tabla muy muy sencillita.

Por cierto, ten en cuenta los temas de accesibilidad : theader, tbody y tfoot (aunque este en tu caso no se si lo tendrías que poner).

¡¡Me voy a comer!!

alaaaa, basta con que se vayan unos cuantos de vacaciones pa que os pongais a maquetar con tablas!! xDDD

Prueba con algo asi a ver si va:
<code>td, th {
border: 1px #000 solid;
border-top: 0px;
border-right: 0px;
text-align: center;
}
.dhead {
border:0px;
border-bottom: 1px #000 solid;
text-align:left;
}</code>

<code>&lt;table&gt;
&lt;tr&gt;
&lt;th&gt;blahblah&lt;/th&gt;
&lt;th&gt;blahblah&lt;/th&gt;
&lt;th&gt;blahblah&lt;/th&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;blahblah&lt;/td&gt;
&lt;td&gt;blahblah&lt;/td&gt;
&lt;td&gt;blahblah&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;blahblah&lt;/td&gt;
&lt;td&gt;blahblah&lt;/td&gt;
&lt;td&gt;blahblah&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;</code>***aqui no se ve, pero si me quoteas o editas veras que el primer td o th de cada tr tiene un class="dhead" y el table tiene width="300" border="0" cellpadding="0" cellspacing="0"

Salutis...

Muchas gracias por la molestia que os tomais :)

El problema con las clases, perro, es que ese es un ejemplo de muy pocas filas, pero en una tabla tocha me volvería loco de meter clases a todos los tds. Si lo pudiera declarar en un estilo que cojan los trs o tds por herencia, sería perfecto.

Ventd'Aval

***aqui no se ve, pero si me quoteas o editas veras que el primer td o th.....................

Admins, (Klein?) porfa, si podeis arreglar esto... Ojo, no soy nadie para meteros prisas, pero aquí lo he necesitado y no he podido usarlo.

mirate bien el codigo anda, veras que hay un class por fila sólo... no me seas perro ;)

Tu código no se ve, de ahí mi post anterior invocando al gurú Klein...

Pero lo entiendo, claro.

Eso sí: Me niego a creer que no se pueda declarar en una sola etiqueta :P
Si es así, menuda mierda... Voy a volver a maquetar con tablas!

joshuatree

El problema con las clases, perro, es que ese es un ejemplo de muy pocas filas, pero en una tabla tocha me volvería loco de meter clases a todos los tds. Si lo pudiera declarar en un estilo que cojan los trs o tds por herencia, sería perfecto.

¿Me estas tomando el pelo verdad? ya se que los programadores solo escribimos una linea y luego repetimos todo mediante código, pero si a estas alturas me dices que primero haces la tabla y luego le pones los estilos, en lugar de hacer una sola fila y utilizar copy paste, para hacer copias de la fila entonces pido que me hagan admin solo para expulsarte del hilo de programación cliente, jajajajajajaja.

Es mas si estas vago, vago, vago, haces una sola linea te vas al dreamweaver y dices partir la celda en x filas, y te respeta los estilos.

No te pongas cabezon y hazlo con estilos anda, como dijo mi amigo Bruce "Se agua mi amig......" no esto no, fue esto: "La mejor forma para alcanzar la sabiduría es descubrir la causa de nuestra ignorancia"

:D:D:D

Vaaale, aceptamos clase como método eficiente :D

sI. Además, en lo que te curras la CSS para que con nosecuanto código te coja el estilo dichoso te has hecho ya una tabla para meter las páginas amarillas si hace falta.

Yo creo que no es vaguería. Lo que quieres es tener esa satisfacción personal de tener un código limpio limpio y una css reducida. A mí por lo menos me lo produce...

En este sitio yo aprendi mucho, eso si mirando el código, espero que te sirva:

http://icant.co.uk/csstablegallery/

Mag

Esa era la idea, mambrú. Pero, de lo poco que he podido ver, parece que hoy por hoy no es posible, por algún lado casca...

Mag, esa galería esta de PM!

Esque según lo entiendo yo, al último elemento que le vas a poder dar formato es a td y como no sea a base de clases no vas a poder hacer mas. Con colgroup y col consigo cambiar alguna cosilla, como la alineación (con diferentes resultados entre IE7 y FF) pero los bordes no me los coge. Y claro, los selectores adyacentes que sería lo mejor, como los que te puse, no los aceptan todos los navegadores.

Te diré lo que seguro que todos piensan y nadie te ha dicho.....Haz una imagen de la tabla y métela, jajaja :)

el uso de los estilos (más allá del simple background, etc) en las tablas es bastante complejo, sobretodo la resolucion de conflictos en los bordes (ver referencia). Lo más que me he podido acercar en IE (en FF funciona perfectamente) es a lo siguiente (deberas sustituir los [ por menor que, etc):

<code>[!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"]
[html]
[head]
[title]colgroup[/title]
[meta http-equiv="Content-Type" content="text/html;charset=utf-8" /]

[style]
table { border-collapse: collapse; }
td, th { padding: 5px; border-bottom: 1px solid black; }
*.cen { border-left: 1px solid black !important; border-right: 1px solid black !important; }
.cen { background: #f7f7f7; }
[/style]

[/head]
[body]
[table summary="resumen"]
[colgroup]
[col class="izq"]
[col class="cen"]
[col class="der"]
[/colgroup]
[thead]
[tr]
[th]col1[/th]
[th]col2[/th]
[th]col3[/th]
[/tr]
[tr]
[th]a[/th]
[th]b[/th]
[th]c[/th]
[/tr]
[/thead]
[tbody]
[tr]
[td]1[/td]
[td]2[/td]
[td]3[/td]
[/tr]
[/tbody]
[/table]

[/body]
[/html]</code>

de todos modos yo haría lo que decía hartum en la primera respuesta, usar un class en las celdas de la columna central

Josh, no reniegues de las clases. Probecitas. Con la de favores que nos han hecho.....:)