Tabella HTML... come diventerebbe?

**iceberg** · 01-10-2006, 17:54

Ciao a tutti, vorrei un aiuto da parte vostra.

Partendo da una semplice tabella di questo tipo:

Codice PHP:


<table width="200" border="0">

  <tr>

    <td width="86">Login</td>

    <td width="104"><input type="text" name="textfield" /></td>

  </tr>

  <tr>

    <td>Password</td>

    <td><input type="text" name="textfield2" /></td>

  </tr>

</table>

Come diventerebbe appliando i CSS?

Grazie

**aleron75** · 01-10-2006, 18:54

Ciao,
un esempio potrebbe essere:

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" xml:lang="en" lang="it">
  <head>
    <title>Titolo</title>
    <style type="text/css" media="all">
	* {
		margin:0;
		padding:0;
	}    	
    	
    	#login {
    		width:200px;
    		overflow:hidden;
    	}
    	
    	#login label {
    		display:block;
	    		float:left;
    		width:86px;
    	}
    	
    	#login input {
    		float:left;
    		width:104px;
    	}
    </style>
    <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1"/>
  </head>
  <body>
  	
  	<form id="login" action="">
  		


  		  <label for="loginUsr">Login</label>
  		  <input id="loginUsr" type="text" name="username" />
  		</p>
  		
  		


  		  <label for="loginPwd">Password</label>
  		  <input id="loginPwd" type="text" name="password" />
  		</p>
  	</form>
    
  </body>
</html>

Attenzione a due cose:

1) la regola * { ... } elimina qualsiasi margine da qualsiasi block element. L'ho usata per eliminare velocemente margin e padding da

.
2) "avanzano" 10px in larghezza, utilizzando le dimensioni che hai dato come esempio. Potrebbero essere assegnate come margine sinistro per il campo input, in modo da non far venire attaccata la label al text field.

Saluti, Alessandro

**iceberg** · 01-10-2006, 20:07

Grazie mille per l'aiuto... un consiglio: credo di non poter utilizzare la tua applicazione tramite <form id= >... in quanto devo utilizzare questo esempio in una pagina .NET, che di conseguenza avrà un unica definizione form per tutta la pagina. In questo caso io invece voglio applicare la formattazione (width...) solo a questa tabella... Come diventerebbe?

Grazie

**aleron75** · 01-10-2006, 20:30

Ciao,
in questo caso puoi utilizzare il frammento di codice seguente.

codice:

  		<div id="login">
  		


  			<label for="loginUsr">Login</label>
  			<input id="loginUsr" type="text" name="username" />
  		</p>
  		
  		


  			<label for="loginPwd">Password</label>
  			<input id="loginPwd" type="text" name="password" />
  		</p>
  		</div>

In pratica assegni le proprietà che avevo associato a <form> ad un <div>. Il risultato non cambia.
Saluti, Alessandro

**iceberg** · 02-10-2006, 00:35

Ti ringrazio per l'aiuto.

Vorrei chiederti un ultimo suggerimento: potrei utilizzare, al posto di

altri <div> per gestire le righe e le colonne della mia tabella?

In caso affermativo, come?

Grazie

**aleron75** · 02-10-2006, 08:12

Originariamente inviato da iceberg
Ti ringrazio per l'aiuto.

Vorrei chiederti un ultimo suggerimento: potrei utilizzare, al posto di

altri <div> per gestire le righe e le colonne della mia tabella?

Certo, in questo caso ti consiglio di leggere qualche tutorial, ad esempio:

http://css.nu/articles/table-in-css.html

Saluti, Alessandro

Discussione: Tabella HTML... come diventerebbe?

Strumenti discussione

Ricerca discussione

Visualizza

Tabella HTML... come diventerebbe?

Permessi di invio