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

codice:
 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

codice:
 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>
codice:
 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>
codice:
 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)