CSS/Tabelle...come parametrizzare

[mosquito70]

Ciao a tutti,
non utilizzo molto i e quindi quello che sto per scrivere potrebbe risultate a molti qui su forum, abbastanza banale (e quindi spero di facile soluzione )
Nel mio applicativo, la cui la parte di interfaccia non ha un ruolo fondamentale (è una specie di data entry), ho delle maschere di inserimento dati che presentano (purtroppo) ancora una struttura a tabelle/html, ovvero dimensionamenti in percentuale, etc...

Mi è stato chiesto di modificare alcune di queste maschere e, come potete immaginare, c'è da mettersi le mani nei capelli nel spostare o inserire nuove "righe".

Quindi ho deciso di passare ai CSS, riscrivendo tutto da capo e utilizzando quindi le tabelle come solo contenitori di dati.

Arrivo al dunque.

Vorrei ottimizzare il codice, in modo tale di utilizzare una sola definizione principale di tabella e poi una serie di definizioni che la vanno a caratterizzarla, ovvero che vanno a caratterizzare le celle in essa contenuta (numero di colonne, bordi, sfondo, font, etc...)

L'idea, magari sbagliata, è quella di creare una tabella per ogni riga della mia maschera, in modo tale, ad esempio, che se mi si chiede di spostare una riga di dati in un'altra posizione, il tutto risulti un banale copia ed incolla (In futuro sto pensando di parametrizzare il tutto, anche le label, attraverso una base dati e di creare dinamicamente le pagine asp...ma questo è un altro discorso)

Lo schema di massima, per ora è questo

1) le tabelle possono avere da 2 a 4 celle
2) La dimensione di tutte le celle può variare, ma non deve variare la dimensione massima della tabella/riga
3) Il font all'interno della cella può variare, anche se nel 90% dei casi è sempre lo stesso
4) Lo sfondo della cella può variare, ma come per il punto 3 è raro che accada.

Ora, io ho cominciato con questo foglio di stile, ma poi mi sono bloccato perchè appunto cominciava ad essere poco gestibile.

Qualcuno mi può dare qualche spunto? (chiaramente non pretendo che mi scriviate tutto il codice )

Grazie in anticipo per aver letto fin qua

 Foglio Css (iniziale)
/* 
Tabella 2 Colonne (semplice)
*/
table.tabella2col {
background : #f0f0f0;
}

.cella012col {
font:  11px Verdana;
width : 125px;
}

.cella022col {
font:  11px Verdana;
width : 365px;
}

/* 
Tabella 4 Colonne (semplice)
*/
table.tabella4col {
background : #f0f0f0;
empty-cells:hide;
}

.cella014col {
font:  11px Verdana;
width : 125px;
}

.cella024col {
font:  11px Verdana;
width : 120px;
}

.cella034col {
font:  11px Verdana;
width : 75px;
}
.cella044col {
font:  11px Verdana;
width : 150px;
}


/* 
Tabella 4 Colonne (titolo label)
*/
table.tabella4coltito {
background: #f0f0f0;
}

.cella014coltito {
width : 125px;
}
.p {
font:  bold 10px Verdana;
color: #577596;
background: #E7F0E1;
}

.cella024coltito {
width : 120px;
}

.cella034coltito {
width : 75px;
}
.cella044coltito {
width : 150px;
}

Il riferimento al file .asp/.html è il seguente

 Per due colonne
		<table class="tabella2col">
			<tr>
				<td class="cella012col">
					Label1:
				</td>
				<td class="cella022col">
					<input type="HIDDEN" readOnly maxlength="12" name="CODI_LABEL1" value="" size="15">
					<input type="text" readonly maxlength="100" name="DESC_LABEL1" value="" size="50" class="campireadonlynotnull">
						[img]images/listevalori.gif[/img]
					[img]images/Icons/Modify.gif[/img]Cens. Label1</a>
					<% end if%>
				</td>
			</tr>
		</table>

 Per 4 colonne
		<table class="tabella4col">
		  <tr>
			<td class="cella014col">
				Numero Label1:
			</td>

			<td class="cella024col">
				<input type="HIDDEN" readOnly maxlength="12" name="CODI_LABEL1" value="" size="15">
				<input type="hidden" readOnly maxlength="12" name="USER_PROC" value="<%=vc_userconn%>" size="15">
				<input readonly  type="text" maxlength="15" name="NUME_LABEL1" value="" size="14"  class="campireadonlynotnull">
			</td>

			<td class="cella034col">
				Collegato:
			</td>
			<td class="cella044col">
				<input type="HIDDEN" maxlength="15" name="CODI_AVVI_COLL" value="" size="14">
				<input type="text" maxlength="15" name="NUME_AVVI_COLL" value="" size="14"  class="campinull">
				<a href="javascript:LOV('liste_valori/listaanaglabel1.asp?vc_numeavvicoll='+ document.datiform.NUME_LABEL1.value+'&form=form')">
				[img]images/listevalori.gif[/img]</a>

			</td>
		  </tr>
		</table>

 Con 4 colonne con sfondo
		<table class="tabella4coltito">
		  <tr>
		  	<td class="cella014coltito">
				

Categorie:</p>
			</td>

			<td class="cella024coltito">
			Importo
			</td>
			<td class="cella034coltito">
			+/O
			</td>
			<td class="cella044coltito">
			P/S
			</td>
		  </tr>
		</table>

(ho lasciato il codice asp, ma chiaramente sarà ininfluente)

[Mich_]

Premetto che in linea di massima i form si formattano con tecniche loroproprie, che trovi ben spiegate in questi link. In linea di massima non si usano le tabelle.
Se vuoi formattare le coppie <label> - <input>, conviene inserirle in <fieldset> e quindi di solito basta definire lo stile ai vari tag (in linea di massima con i float); in qualche caso puo` essere utile usare le liste di definizione (piu` adatte delle tabelle). Nei <fieldset> i titoli si fanno con <legend>.i
Accessible CSS Forms: Using CSS to Create a Two-Column Layout
Styling form controls with CSS
Fieldsets, Legends and Screen Readers
http://www.webstandards.org/learn/tu...ble-forms.html


Le tabelle hanno un loro modo di formattazione un po' diverso dai <div>, ma la cosa dipende molto dai browser (quanto scritto sotto non vale per tutti gli IE).
In linea di massima sono semplicissime da formattare, se si sono marcate correttamente, usando
<thead>, <tbody>, <tfoot>, <caption>
<tr>, <td>, <th>
<col>, <colgroup> (questi in particolare servono per definire gli stili da attribuire alle colonne)

[mosquito70]

Originariamente inviato da Mich_
Premetto che in linea di massima i form si formattano con tecniche loroproprie, che trovi ben spiegate in questi link. In linea di massima non si usano le tabelle.
Se vuoi formattare le coppie <label> - <input>, conviene inserirle in <fieldset> e quindi di solito basta definire lo stile ai vari tag (in linea di massima con i float); in qualche caso puo` essere utile usare le liste di definizione (piu` adatte delle tabelle). Nei <fieldset> i titoli si fanno con <legend>.i
Accessible CSS Forms: Using CSS to Create a Two-Column Layout
Styling form controls with CSS
Fieldsets, Legends and Screen Readers
http://www.webstandards.org/learn/tu...ble-forms.html


Le tabelle hanno un loro modo di formattazione un po' diverso dai <div>, ma la cosa dipende molto dai browser (quanto scritto sotto non vale per tutti gli IE).
In linea di massima sono semplicissime da formattare, se si sono marcate correttamente, usando
<thead>, <tbody>, <tfoot>, <caption>
<tr>, <td>, <th>
<col>, <colgroup> (questi in particolare servono per definire gli stili da attribuire alle colonne)

Grazie infinite per la spiegazione e per i link.
Avrò un bel pò di cose da approfondire