Remplacer table par des divs

Pascal_22 Messages postés 534 Date d'inscription Statut Membre Dernière intervention -
Pascal_22 Messages postés 534 Date d'inscription Statut Membre Dernière intervention - 16 mars 2011 à 20:44

Bonjour,

sur ma page de login, j'ai une table comme suit:


<table>
   <tr>
        <td>Nom Usager</td>
        <td><input type="text" ...></td>

   </tr>
   <tr>
        <td>mot de passe</td>
        <td><input type="assword" ...></td>

   </tr>
   <tr>
        <td colspan=2 align="right"><input type="submit"></td>
   </tr>

</table>

et j'aimerais rempacer la table par une ou plusieurs div, et qui garde la meme affichage.

Mais là, je suis tout mêlé...

Est-ce que quelqu'un peut me donner un conseil ou un truc pour réaliser le tout.

Merci milles fois.

Pascal_22

Afficher la suite

A voir également:

Remplacer table par des divs
Table des matières word - Guide
Table ascii - Guide
Remplacer disque dur par ssd - Guide
Remplacer par word - Guide
Table des caractères - Guide

5 réponses

Réponse 1 / 5

gilbert1995 Messages postés 414 Date d'inscription Statut Membre Dernière intervention 29

Pourquoi ??? Veux-tu remplacer ta table par des div

Rodolphe_ Messages postés 1498 Date d'inscription Statut Membre Dernière intervention 285

parce qu'un tableau c'est pas fait pour la mise en page. C'est fait pour ordonner des données!

Pour assurer une mise en page, il faut passer par du css.

Connais-tu ce site? http://www.alsacreations.com/static/gabarits/liste.html
Ils donnent des exemples concrets de mise en page. Ici ils gèrent l'affichage du site complet mais on peut l'adapter pour simplement des div.

<form>
<label class='input1' >Nom Usager</label>
<input class='input1' type="text" ...>

<labe class='input2' l>mot de passe</label>
<input class='input2' type="assword" ...>

<input class='input3' type="submit">

</form>

Ensuite il faut créer le css, voir comment tu veux aligner tout ça

Réponse 2 / 5

Pascal_22 Messages postés 534 Date d'inscription Statut Membre Dernière intervention 54

Bonjour Rodolphe_,

Merci de ta réponse, j'ai vérifier le site, mais je n'ai pas trouver exactement ce que je veux, voici la table au format voulu.

<table>
   <tr>
        <td align="right">Nom Usager</td>
        <td align="left">><input type="text" ...></td>

   </tr>
   <tr>
        <td align="right">mot de passe</td>
        <td align="left"><input type="assword" ...></td>

   </tr>
   <tr>
        <td colspan=2 align="right"><input type="submit"></td>
   </tr>

</table>

Merci beaucoup de votr aide!

Pascal

Réponse 3 / 5

Pascal_22 Messages postés 534 Date d'inscription Statut Membre Dernière intervention 54

Bonjour, J'ai réussi le design voulu avec des div, mais j'ai un petit doute a savoir si c'est correct?? Peut-être que ma css pourrait être encore plus petit.
Voici mon code et css


<div class="i-logBox">
   <form method="post" action="/VerifLogin.php"  >
        <div id="i-LogInfoBox">
	<div class="left">Nom d'usager</div>
	<div class="right"><input type="text" name="txtUser"/></div>
        </div>

        <div id="i-LogInfoBox">
                <div class="left">Mot de passe</div>
	<div class="right"><input type="password"></div>
        </div>
							
        <div id="i-LogInfoBox">
	<a href="/MotPasseOublier.php">Mot de passe oublié?</a>
	<button type="submit" value="Connexion">Connexion</button>
        </div>
    </form>
</div>

Et voici ma CSS

#i-LogInfoBox{margin:auto;margin-top:10px;display:block;padding-top:5px;width:265px;border:0px solid yellow;font-family: "Trebuchet MS",arial,sans-serif, arial;font-size:13px;font-weight: none;color: #000;}

#i-LogInfoBox div.right{margin-left:105px;width:150px;padding:2px;border:0px solid blue;}

#i-LogInfoBox div.left{text-align:right;float:left;width:90px;padding:2px;border:0px solid red;}

Je suis débutant avec les DIV.

Selon vous puis-je amilioré mon code et ma CSS afin d'alléger le tout?

Merci beaucoup

Pascal

Réponse 4 / 5

Pascal_22 Messages postés 534 Date d'inscription Statut Membre Dernière intervention 54

Selon vous, pour remplacer une <table> de 2 ligne par 2 colonnes mais en div,
Mon code ci haut est-'il bon?

Merci

Rodolphe_ Messages postés 1498 Date d'inscription Statut Membre Dernière intervention 285

Pour moi il y a des div en trop.
Il y a des balises span ou label pour encadrer certains textes.
Tu peux aussi utiliser la balise p pour encadrer un groupe de texte.

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 5

Pascal_22 Messages postés 534 Date d'inscription Statut Membre Dernière intervention 54

MErci, j'ai réussi à enlever 4 div


<div id=\"i-LogInfoBox\">
	<label for=\"ChTexte\">Nom d'usager</label>
	<input type=\"text\" id=\"txtUser\" name=\"txtUser\" tabIndex=\"1\" />
</div>
											
<div id=\"i-LogInfoBox\">
									<label for=\"ChTexte\">Mot de passe</label>
	<input type=\"password\" >	
</div>

Je crois que c'est mieux... ???

PAscal

Discussions similaires

Table des matières dont les titres n'apparaissent pas..

Intégrer une table des annexes et des matières sur word

insérer une table d'illustration

Sommaire + Table des matières + Table des Annexes

WOrd 365 Liste des figures et annexes

Votre réponse

Discussions similaires