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
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 funzionacodice:<!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>

Rispondi quotando