prospetto tabellare complesso

[rplacido]

Salve a tutti,
non sono un grande esperto del lato presentazione; mi esprimo meglio sul lato programmazione.
Indipendentemente dalla tecnologia usata (io lavoro in java) ho la necessità di presentare dati tabellari che prevedono una gerarchia. Mi spiego meglio con un esempio: per ogni nazione ho l'elenco delle regioni e per ogni regione l'elenco delle province.
Concettualmente sarebbe una tabella esterna di "n" righe e 2 colonne nella quale ogni riga rappresenta una nazione. Nella prima cella il nome della nazione; nella seconda cella una tabella annidata di "n" righe e 2 colonne contiene le regioni; allo stesso modo, nella prima cella il nome della regione e nell'altra una tabella ulteriormente annidata contiene le province.
Concettualmente tutto bene (e anche dal punto di vista della programmazione), ma vi sono almeno due problemi, senza considerare che è generalmente sconsigliato usare tabelle annidate:

- è difficile fare in modo che i bordi delle varie tabelle si presentino come se appartenessero ad una sola tabella (un pò come se utilizzassimo rowspan e colspan)
- le tabelle interne possono non occupare l'intero spazio della cella contenitrice e se i bordi sono visibili, l'effetto non è piacevole

La domanda è: turandosi il naso e mantenendo le tabelle annidate, qualcuno sa come far collassare i bordi delle varie tabelle? e se il naso non lo volessimo turare quale sarebbe il sistema più idoneo (e magari anche semplice) per ottenere il risultato?

Grazie in anticpo a chi vorrà rispondere
Roberto

[G.Pippo]

Non so se ho capito il tuo problema ma vedi un pò se questo può essere d'aiuto

<table border="0" width="100%" cellspacing="0" cellpadding="0">
	<tr>
		<td width="50%" align="left" valign="top">
		<table border="0" width="100%" cellspacing="0" cellpadding="0">
			<tr>
				<td>Annidata cella 1</td>
				<td>Annidata cella 3</td>
			</tr>
			<tr>
				<td>Annidata cella 2</td>
				<td>Annidata cella 4</td>
			</tr>
		</table>
		</td>
		<td width="50%" align="left" valign="top">Tabella principale cella 3</td>
	</tr>
	<tr>
		<td width="50%" align="left" valign="top">Tabella principale cella 2</td>
		<td width="50%" align="left" valign="top">Tabella principale cella 4</td>
	</tr>
</table>

</body>

</html>

[rplacido]

Nell'esempio che mi hai inviato hai eliminato i bordi delle due tabelle. Prova a sostituire border="0" con border="1"; vedrai che la tabella interna sembra avere un bordo esterno doppio perche è adiacente al bordo della cella che la contiene. E' proprio questo l'inconveniente da eliminare.

Grazie comunque per la risposta
Roberto

[G.Pippo]

E se metti il bordo solo in quella esterna?

[rplacido]

Non ti viene la suddivisione in celle della tabella interna.
Lo si può accettare, ma non è il risultato atteso.
Ribadisco di non essere un grande esperto, ma non vorrei che la soluzione (con le tabelle) non esista.

Roberto

[G.Pippo]

E' ovvio che se metti il bordo in tutte e due hai quell'effetto, altra soluzione non ne vedo, l'unica per avere un aspetto più gradevole è staccare la tabella interna di qualche pixel dalla tabella esterna

[gengix]

Prova definire una regola nel foglio di stile così:

table {
border-collapse:collapse;
border:none;
}

Leva i vari border nel codice html.
Quando vuoi visualizzare il bordo basta che scrivi

table {
border-collapse:collapse;
border:solid 1px #000;
}

Sarebbe sempre meglio gestire le tabella interamente a css ed evitare attributi dichiarati nel codice di struttura, il codice ti risulterà più leggero e pulito.

Prova a vedere se funziona.

[G.Pippo]

Originariamente inviato da gengix
Prova definire una regola nel foglio di stile così:

table {
border-collapse:collapse;
border:none;
}

Leva i vari border nel codice html.
Quando vuoi visualizzare il bordo basta che scrivi

table {
border-collapse:collapse;
border:solid 1px #000;
}

Sarebbe sempre meglio gestire le tabella interamente a css ed evitare attributi dichiarati nel codice di struttura, il codice ti risulterà più leggero e pulito.

Prova a vedere se funziona.

Cosa centra? Lui non ha mica chiesto come visualizzare il bordo. Se gestire il bordo da css o da HTML non fa parte della domanda

[gengix]

La domanda è: turandosi il naso e mantenendo le tabelle annidate, qualcuno sa come far collassare i bordi delle varie tabelle?

@G.Pippo: Tu cosa capisci da questa domanda, io intendo come fare a collassare i bordi delle tabelle.
Forse ho capito male io, anzi sicuramente, ma la proprietà border-collapse serve proprio a questo.

Infatti rplacido ti chiede "Prova a sostituire border="0" con border="1"; vedrai che la tabella interna sembra avere un bordo esterno doppio".

Ripeto probabilmente ho capito male io, ma penso che in questo caso la mia risposta non sia completamente fuori argomento.

Successivamente gli ho dato un suggerimento che gli può essere utile in futuro.

[Vincent.Zeno]

rplacido: vedi se ti va bene questo tipo di approccio...

 
CSS 

#table1 {border: 1px solid #000;}
#table2 {border-right: 1px solid #000; border-bottom: 1px solid #000;}
#table3 {border-top: 1px solid #000; border-left: 1px solid #000;}


HTML 

<table width="100%" cellspacing="0" cellpadding="0" id="table1">
	<tr>
		<td>
		<table width="100%" cellspacing="0" cellpadding="0" id="table2">
			<tr>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
			</tr>
		</table>
		</td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td>
		<table border="0" width="100%" cellspacing="0" cellpadding="0" id="table3">
			<tr>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
			</tr>
		</table>
		</td>
	</tr>
</table>