Quel codice presenta qualche problema, come il colspan sulla riga invece che sulla cella che ne compromette la visualizzazione, poi 20 non è neanche un valore valido per l'attributo size (possibili valori da 1 a 7).
Per trasformare con i div:
1. creare un div contenitore cui venga assegnata la larghezza e l'altezza voluta (margini, padding e bordi si sommano alle dimensioni specificate, da tenerne conto anche per la creazione di tutti i box successivi);
2. al suo interno si crea il primo div col tuo testo sample data;
3. si inserisce poi un altro div che conterrà le tre colonne;
4. all'interno del div per le colonne si inseriscono i tre box affiancati attravero il float.
Per evitare calcoli complicati per le dimensioni sarebbe preferibile evitare padding e bordi sugli elementi flottanti e impostarli poi sui contenuti interni. Nel tuo caso, per avere una visualizzazione corrispondente a quella che hai con la tabella potresti avere
codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>titolo</title>
<style type="text/css">
#contenitore {
width: 398px;
height: 498px;
border:1px solid black;
}
#singolaColonna {
height: 238px;
font-size: 48px;
color: red;
font-weight:bold;
padding:5px;
border-bottom:1px solid black;
}
#colonne {
}
#uno, #due, #tre {
width:122px;
height: 239px;
float:left;
font-size:40px;
color:green;
padding:5px;
}
#due {
border-left:1px solid black;
border-right:1px solid black;
}
#clear {
clear:left;
}
</style>
</head>
<body>
<div id="contenitore">
<div id="singolaColonna">Sample Data</div>
<div id="colonne">
<div id="uno">1</div>
<div id="due">2</div>
<div id="tre">3</div>
<div id="clear"></div>
</div>
</div>
</body>
</html>
Poi per il font-size e la possibilità di usare unità di misura diverse puoi cercare in rete, io ho messo un valore in pixel per mia comodità, anche i bordi potrebbero essere impostati in maniera differente e così le larghezze delle colonne. Il consiglio è di creare una pagina con questo codice e giochicchiarci su modificandolo per renderti conto di come funziona
Rispondi quotando
