Eliminare tabelle a favore dei CSS

**condor_uk** · 25-06-2015, 16:03

Un saluto a tutti gli amici del forum,
ho un codice molto vecchio che disegna una form con l'ausilio di tabelle html. Vorrei un aiuto da voi per capire come poter eliminare l'uso delle tabelle realizzando il tutto con i css.

Vi posto il codice, qualsiasi suggerimento è ben accetto

codice:

<FORM name Anagrafica method="POST" action="salva.php" id = "modulo">
<fieldset>


<!-- ANAGRAFICA -->


  <legend>Anagrafica</legend>
  <div id="anagrafica">
    <table>
      <tr>
        <td width="99">Id</td>
        <td width="400"><input name="id" disabled="disabled" id="id" value="0" size="2" readonly="readonly"></td>
        <td width="99">Data Intervento</td>
        <td><input type="text"  name="data" class="datepicker" required="required" id="data"></td>
        </tr>
      <tr>
        <td>Utente</td>
        <td width="400"><input name="utente" class="uppercase" id="utente"></td>
		<td>Indirizzo</td>
        <td><input name="indirizzo" class="uppercase" id="indirizzo"></td>
        </tr>
      <tr>
        <td>id</td>
        <td width="400"><input name="id" class="uppercase" id="id" maxlength="12" value=""></td>
		<td>Telefono</td>
        <td><input name="tel" class="uppercase" id="tel"></td>
        </tr>
    </table>
</fieldset>


<!-- DATI COMPUTER -->


<fieldset>
  <legend>Dati Computer</legend>
    <table>
      <td width="99">Computer</td>
        <td width="400"><input name="computer" class="uppercase" id="computer"></td>
		<td width="99">Seriale</td>
        <td><input name="seriale" required="required" class="uppercase" id="seriale" maxlength="8" onkeyup="VerificaSeriale(this)"></td>
        </tr>
      <tr>
        <td>MacAddress</td>
        <td width="400"><input name="mac" class="uppercase" id="mac"></td>
		<td>ip</td>
        <td><input name="ip" required="required" class="uppercase" id="ip" maxlength="6" onkeyup="VerificaIp(this)"></td>
        </tr>
		
      <tr>
        <td width="99">Nome tecnico</td>
		<td width="400">
        <select name="n_tecnico" required="required" class="uppercase" id="n_tecnico">
		<option value=""></option>
		<option value="PANTE LUCA">PANTE LUCA</option>
		<option value="SORIA FRANCESCO">SORIA FRANCESCO</option>
		</select>
		</td>
        </tr>
    </table>
</fieldset>




<!-- INIZIO IL CODICE PER GLI INTERVENTI DI MANUTENZIONE -->


<fieldset>
<legend>Interventi di manutenzione</legend>
<table id="commessa">
<tbody>
<tr>
  <td>Intervento</td>
  <td>Fornitore</td>
  <td>Q.ta</td>
  <td>Unitario</td>
  <td>Sconto</td>
  <td>Totale</td>
  <td>Aggiugi</td>
</tr>
<tr class="righe">
<td><input name="itr1" id="itr1" class="uppercase" size="25"></td>
<td><input name="for1" id="for1" class="uppercase" size="10"></td>
<td align="center"><input name="q1" class="uppercase somma" onKeyUp="SommaRiga(1)" id="q1" size="1" value="" placeholder="0"></td>
<td align="center"><input name="iu1" class="uppercase somma" onKeyUp="SommaRiga(1)" onBlur="Format(1)" id="iu1" size="4" value="" placeholder="0.00"></td>
<td align="center"><input name="sc1" class="uppercase somma" onKeyUp="Virgola(1)" id="sc1" size="6" placeholder="sconto"></td>
<td><input name="imp_1" id="imp_1" class="uppercase somma" size="4" value="" placeholder="0.00" readonly></td>
<td align="center"><img src="css/img/add.png" name="add1" width="16" height="16" id="add1" class="add"></td>
</tr>
<tr>
  <td colspan="5" align="right">Totale generale</td><td><input name="totale" id="totale" size="4" value="" placeholder="0.00" readonly></td><td></td>
</tr>
</tbody>


</table>


</fieldset>


<!-- INSERISCO IL DIV SALVA CON IMMAGINI 46 X 46 -->
<div id="salva">
<input type="image" src="css/img/ok.jpg" height="46" width="46"/>
</div>
</FORM>

Grazie

**carlomarangoni** · 25-06-2015, 19:07

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Documento senza titolo</title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
        <style type="text/css">.pre-1 {
    border: none;
    height: 86px;
    position: relative;
    text-align: left;
    width: 771px;
}

.pre-1-1 {
    border: none;
    height: 24px;
    left: 2px;
    line-height: 24px;
    padding: 1px;
    position: absolute;
    top: 2px;
    width: 99px;
}

.pre-1-2 {
    border: none;
    height: 24px;
    left: 105px;
    line-height: 24px;
    padding: 1px;
    position: absolute;
    top: 2px;
    width: 400px;
}

.pre-1-3 {
    border: none;
    height: 24px;
    left: 509px;
    line-height: 24px;
    padding: 1px;
    position: absolute;
    top: 2px;
    width: 99px;
}

.pre-1-4 {
    border: none;
    height: 24px;
    left: 612px;
    line-height: 24px;
    padding: 1px;
    position: absolute;
    top: 2px;
    width: 155px;
}

.pre-1-5 {
    border: none;
    height: 24px;
    left: 2px;
    line-height: 24px;
    padding: 1px;
    position: absolute;
    top: 30px;
    width: 99px;
}

.pre-1-6 {
    border: none;
    height: 24px;
    left: 105px;
    line-height: 24px;
    padding: 1px;
    position: absolute;
    top: 30px;
    width: 400px;
}

.pre-1-7 {
    border: none;
    height: 24px;
    left: 509px;
    line-height: 24px;
    padding: 1px;
    position: absolute;
    top: 30px;
    width: 99px;
}

.pre-1-8 {
    border: none;
    height: 24px;
    left: 612px;
    line-height: 24px;
    padding: 1px;
    position: absolute;
    top: 30px;
    width: 155px;
}

.pre-1-9 {
    border: none;
    height: 24px;
    left: 2px;
    line-height: 24px;
    padding: 1px;
    position: absolute;
    top: 58px;
    width: 99px;
}

.pre-1-10 {
    border: none;
    height: 24px;
    left: 105px;
    line-height: 24px;
    padding: 1px;
    position: absolute;
    top: 58px;
    width: 400px;
}

.pre-1-11 {
    border: none;
    height: 24px;
    left: 509px;
    line-height: 24px;
    padding: 1px;
    position: absolute;
    top: 58px;
    width: 99px;
}

.pre-1-12 {
    border: none;
    height: 24px;
    left: 612px;
    line-height: 24px;
    padding: 1px;
    position: absolute;
    top: 58px;
    width: 155px;
}
</style>
    </head>
    <body>
        <legend></legend>
        Anagrafica
        </legend><//legend>
        
        <div id="anagrafica">
            <div class="pre-1">
                <div class="pre-1-1">Id</div>
                <div class="pre-1-2"><input disabled="-1" id="id" readonly="-1" size="2" name="id" value="0" /></div>
                <div class="pre-1-3">Data Intervento</div>
                <div class="pre-1-4"><input id="data" name="data" required="required" class="datepicker" /></div>
                <div class="pre-1-5">Utente</div>
                <div class="pre-1-6"><input id="utente" name="utente" class="uppercase" /></div>
                <div class="pre-1-7">Indirizzo</div>
                <div class="pre-1-8"><input id="indirizzo" name="indirizzo" class="uppercase" /></div>
                <div class="pre-1-9">id</div>
                <div class="pre-1-10"><input id="id" maxlength="12" name="id" class="uppercase" /></div>
                <div class="pre-1-11">Telefono</div>
                <div class="pre-1-12"><input id="tel" name="tel" class="uppercase" /></div>
            </div>
            <fieldset></fieldset>
            
        </div>
    </body>
</html>

**ResianTaxidrive** · 26-06-2015, 14:42

Io farei una cosa un po' più semplice.

codice:

<form>
   <label for="id">ID</label>
   <input name="id" value="">
    <label for="data">Data intervento</label>
   <input name="data" value="">
  ...
...
....
</form>

poi come regole stili assegnerei una larghezza al form in modo che su ogni riga ci stiano due campi.
Al limite andrei ad agire sulla larghezza di ciascun campo, se proprio avessi delle esigenze particolari.

**condor_uk** · 29-06-2015, 18:33

Ciao ragazzi,
vi ringrazio entrambi per la pronta e risolutiva risposta.

finalmente grazie a voi non ho più le tabelle costruite con i <table> ma con i <div>

grazie ancora ...

**carlomarangoni** · 30-06-2015, 02:08

Per curiosità quale soluzione hai adottato?

Discussione: Eliminare tabelle a favore dei CSS

Strumenti discussione

Ricerca discussione

Visualizza

Eliminare tabelle a favore dei CSS

Permessi di invio