[HTML] Tabella con alcune celle di dimensione fissata

[ale83_webmaster]

Aiutatemi, perché non ci sto capendo più niente...

Voglio realizzare una tabella come questa che ho abbozzato in figura:


La dimensione di quelle due celle deve essere quella (non un pixel in più, né uno in meno), mentre le altre celle devono adattarsi alla larghezza della tabella, a prescindere da quale risoluzione dello schermo usa chi visita la pagina web.

Con colspan ho unito le prime due colonne nella seconda e terza riga e le ultime due colonne nell'ultima riga (e fin qui ci siamo).
Ho dato le dimensioni alle due celle di cui voglio una dimensione fissa, ma queste vengono più larghe del previsto (anche aumentando la larghezza, in percentuale, delle celle che gli stanno accanto) oppure, addirittura, si allineano come se nella tabella ci fossero solo due colonne e non tre.

Questo è il codice che ho usato:

Codice: Seleziona tutto

<table width="93%" border="1" align="center">
 
<tr>
<td colspan="3">&nbsp;</td>
</tr>
 
<tr>
<td colspan="2" width="80%">&nbsp;</td>
<td bgcolor="green" rowspan="2" width="246" height="80" style="padding: 0px">&nbsp;</td>
</tr>

<tr>
<td colspan="2" width="80%">&nbsp;</td>
</tr>
 
<tr>
<td colspan="3">&nbsp;</td>
</tr>
 
<tr>
<td colspan="2" width="60%">&nbsp;</td>
<td bgcolor="green" width="468" height="60" style="padding: 0px">&nbsp;</td>
</tr>
 
</table>

Dove sbaglio?

[archimede]

Intanto mischiare misure in percentuale e misure in pixel dubito aiuti.

Inoltre le misure in pixel che tu hai scritto non corrispondono a quelle dell'immagine da te postata.

Infine colspan=3 non ho capito bene cosa ci stia a fare e mi pare che tu abbia confuso rowspan con colspan qua e là.

Detto questo, non credo sia possibile definire una tabella con colonne di larghezza diversa sulle varie righe: credo si adatti automaticamente alla più larga.

Dovrai quindi creare tabelle diverse (buon divertimento coi bordi, consiglio di usare il CSS):

Codice: Seleziona tutto

<table width="93%" border="1" align="center">
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td style="height: 30px;">&nbsp;</td>
<td bgcolor="green" rowspan="2" style="padding: 0px; width: 246px; height: 60px;">&nbsp;</td>
</tr>
<tr>
<td style="height: 30px;">&nbsp;</td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
</table>
<table width="93%" border="1" align="center">
<tr>
<td style="height: 40px;">&nbsp;</td>
<td bgcolor="green" rowspan="2"  style="padding: 0px; width: 468px; height: 80px;">&nbsp;</td>
</tr>
<tr>
<td style="height: 40px;">&nbsp;</td>
</tr>
</table>

HTH.

Alessandro

[ale83_webmaster]

Innanzitutto, grazie mille, perché mi hai portato ad un passo dalla soluzione.

Lo so che non è la soluzione migliore mischiare misure in percentuale e misure in pixel, ma è stata l'unica soluzione che ho trovato per cercare di allargare le celle senza dimensione fissata quando la larghezza del contenuto è minore di quella della cella (e anche con la tua soluzione sono stato costretto ad usarle entrambe).

L'immagine era solo una bozza fatta con Word e poi l'ho pure rimpicciolita per farla entrare nel post, quindi non tenere conto delle dimensioni dell'immagine.

colspan="3" l'ho usato perché volevo dividere la tabella in 3 colonne e nel primo caso unire le prime due e nel secondo caso unire le ultime due, ma il risultato non era quello sperato.

Per il resto, il tuo codice va benissimo e l'ho leggermente modificato in questo modo (evito di mettere anche il contenuto perché allungherebbe soltanto il tutto):

Codice: Seleziona tutto

<table class="mainbg" style="text-align:center;width:100%" cellpadding="4" cellspacing="1">
 
<tr>
<td class="ww" colspan="2"></td>
</tr>
 
<tr>
<td class="aa" style="width: 80%"></td>
<td class="title" rowspan="2" style="padding: 0px; width: 246px; height: 80px"></td>
</tr>

<tr>
<td class="ww" style="width: 80%"></td>
</tr>
 
<tr>
<td class="aa" colspan="2"></td>
</tr>
 
</table><table class="mainbg" style="text-align:center;width:100%" cellpadding="4" cellspacing="1">

<tr>
<td class="ww" style="width: 65%"></td>
<td class="title" style="padding: 0px; width: 468px; height: 60px"></td>
</tr>
 
</table>

Con i bordi, come puoi vedere dal codice, non ci sono problemi, perché li avevo messi solo per vedere se veniva bene la larghezza delle celle (e anche lo sfondo verde a quelle due celle), però le due tabelle (che sono contenute all'inteno di un altra tabella con la stessa grafica del mio forum, quella che ha larghezza 93% della larghezza della pagina) hanno l'attributo cellspacing="1".
Ora, mettendo le due tabelle una sopra l'altra è come se diventasse cellspacing="2" per il bordo superiore della tabella di sotto.
È possibile impostare tramite CSS che il cellspacing sia uguale a 1 in tutta la tabella e 0 solo sulla parte superiore?

[ale83_webmaster]

Ho risolto da solo!
Ho applicato alla tabella l'attributo

Codice: Seleziona tutto

style="border-collapse: collapse" cellpadding="0"

e alle due celle l'attributo

Codice: Seleziona tutto

style="border-width: 0px 1px 1px 1px; border-style: solid; border-color: #D8D8D8"