Remplacer table par des divs

Fermé

Pascal_22 Messages postés 534 Date d'inscription lundi 20 mars 2006 Statut Membre Dernière intervention 29 août 2014 - 15 mars 2011 à 22:01
Pascal_22 Messages postés 534 Date d'inscription lundi 20 mars 2006 Statut Membre Dernière intervention 29 août 2014 - 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

A voir également:

Remplacer table par des divs
Table ascii - Guide
Table des matières word - Guide
Remplacer disque dur par ssd - Guide
Remplacer par word - Guide
Quel site pour remplacer coco - Accueil - Réseaux sociaux

5 réponses

Réponse 1 / 5

gilbert1995 Messages postés 414 Date d'inscription samedi 12 septembre 2009 Statut Membre Dernière intervention 30 mai 2013 29
15 mars 2011 à 23:07

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

Rodolphe_ Messages postés 1498 Date d'inscription samedi 7 mai 2005 Statut Membre Dernière intervention 20 décembre 2014 285
15 mars 2011 à 23:14

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 lundi 20 mars 2006 Statut Membre Dernière intervention 29 août 2014 54
16 mars 2011 à 02:20

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 lundi 20 mars 2006 Statut Membre Dernière intervention 29 août 2014 54
16 mars 2011 à 13:48

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 lundi 20 mars 2006 Statut Membre Dernière intervention 29 août 2014 54
16 mars 2011 à 18:22

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 samedi 7 mai 2005 Statut Membre Dernière intervention 20 décembre 2014 285
16 mars 2011 à 19:12

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 lundi 20 mars 2006 Statut Membre Dernière intervention 29 août 2014 54
16 mars 2011 à 20:44

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

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

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

comment remplacer un #div/0! par une cellule vide

Sommaire + Table des matières + Table des Annexes

WOrd 365 Liste des figures et annexes