Ciao, senza andare ad inserire altri elementi potresti suddivirere ciascuna colonna in altre due colonne e utilizzare il colspan sulle intestazioni.
Per la formattazione dei gruppi di colonne ti direi di usare il <colgroup> (un esempio qui) in modo da poter formattare differentemente i due gruppi (caratteristica e valore) ma so che con questo metodo alcuni browser gestiscono male o non supportano varie regole css, per cui ti consiglio di utilizzare il semplice css selezionando a dovere i td.
Ecco un esempio pratico:
codice:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS - Formattazione gruppi colonne tabella</title>
<style type="text/css">
table{
border-collapse:collapse;
font:10pt sans-serif;
}
th,td{
border:2px solid #dec;
padding:7px;
}
th{
padding:5px 15px;
text-align:center;
color:#fff;
background:#6a5;
}
/* colonne caratteristica */
td,td+td+td,td+td+td+td+td{
background:#fff;
text-align:right;
font-style:italic;
color:#390;
}
/* colonne valore */
td+td,td+td+td+td,td+td+td+td+td+td{
background:#dec;
text-align:center;
font-style:normal;
color:#000;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="2">Attributi di tipo A</th>
<th colspan="2">Attributi di tipo B</th>
<th colspan="2">Attributi di tipo C</th>
</tr>
<tr>
<td>a1</td>
<td>10</td>
<td>b1</td>
<td>30</td>
<td>c1</td>
<td>1</td>
</tr>
<tr>
<td>a2</td>
<td>15</td>
<td>b2</td>
<td>40</td>
</tr>
<tr>
<td>a3</td>
<td>99</td>
</tr>
</table>
</body>
</html>
Nota, per definire le celle nella riga di intestazione della tabella ho utilizzato i tag <th> così da ottenere una struttura più logica e poter intervenire più efficacemente col css. Questo è preferibile rispetto al tuo <td><h3>. Inoltre ho ho inserito il colspan che serve appunto per unire le celle mentre nel corpo della tabella i td restano divisi in due colonne separate che identificano appunto "caratteristica" e "valore".
Mentre la formattazione in base al valore non è possibile gestirla attraverso i css. Se lavori lato server, il controllo lo fai prima ed eventualmente puoi applicare delle classi o degli stili ai relativi td interessati. In alternativa potrai usare javascript a posteriori per controllare i valori di ogni cella ed applicare al volo gli stili che ti servono, non è difficile ma questa parte esula dal css per cui dovresti riformulare tale richiesta sul forum pertinente.
Rispondi quotando
