18041 sujets

Questions générales et questions de débutants

Float dans un tableau

coucou

J'ai un tableau et je voudrais qu'il y ait des éléments qui flotte dedans. Je sais pas comment je pourrais procéder et si c'est possible.

<table>
<tr><td>Le premier élément</td></tr>
<tr><td>Le deuxième élément</td></tr>
<tr><td>Le troisième élément A FAIRE FLOTTER A DROITE du deuxième élément</td></tr>
</table>

Est ce que c'est possible ? Smiley decu
Modifié par nancyAlex (16 Jan 2014 - 16:30)
Salut
Pourquoi tu veux le faire flotter à droite du 2e élément ?
Pas plus simple de faire une 2e case au lieu d'une 3e ligne ?

<table>
<tr><td>Le premier élément</td></tr>
<tr><td>Le deuxième élément</td><td>Le troisième élément A DROITE du deuxième élément ( sans faire flotter ^^)</td></tr>
</table>
Modifié par mathieu1004 (16 Jan 2014 - 16:39)
oui c'est vrai j'ai penser à ca mais c'est pas trop ce que je veux. Je voudrais que le troisième élément soit complètement à droite du deuxième. Mais dans ton cas le troisième se trouve à coté du deuxième.

Merci pour la réponse. Smiley cligne
Hum oki je crois que je vois ce que tu veux dire.
Du coup je dirais 
<table>
<tr><td>Le premier élément</td></tr>
<tr><td>Le deuxième élément</td><td id="td_droite">Le troisième élément A DROITE du deuxième élément ( en faisant flotter ^^)</td></tr>
</table>

Comme ça ils sont déjà les 2 sur la même ligne, le td n'aura plus qu'à flotter juste à droite à l’intérieur du tr.

#td_droite {
    float: right;
}
table{
    width:900px;
}

Et on oublie pas de donner une taille a la table parce que sinon je crois que un tableau se met a la taille de son contenu et du coup le float n'aurai pas plus d'effet que ça.
Voila je pense que ca devrait etre comme ca (si j'ai bien compris ce que tu veux faire ^^)
Modifié par mathieu1004 (16 Jan 2014 - 17:05)
ahh ouiii! t'as raison, c'est de mettre le tableau à 100% que j'ai oublié de faire.
MERCI BEAUCOUP ça marche!! Smiley lol
Modifié par nancyAlex (16 Jan 2014 - 17:12)
Administrateur
Bonjour,

si tu peux dans ton code HTML déplacer comme ça une cellule d'une ligne où elle est seule à la ligne précédente, j'ai un peu peur que ton tableau ne soit pas un tableau de données Smiley confus
Et s'il y a 2 cellules en ligne 2, alors la ligne 1 est une erreur puisqu'il n'y a pas autant de cellules. Il faudrait un colspan="2" du coup.

Sinon il y a de fortes chances que tu aies de mauvaises surprises avec IE9. Pour lui faire 'déstyler' une table...
bjr et merci pour la remarque,

Je sais plus comment je pourrais faire alors si je voudrais avoir une affichage (comme un tableau) si je ne le fais pas en <td> et <tr> et tout le reste.

Tu pourrais me donner une piste?
Salut,

tu peux faire ça avec plus ou moins tous les éléments. Il faut juste qu'il y ai une cohérence syntaxique vis à vis des balises que tu utilises.
En gros dans un premier temps tu met la balise qui a un sens par rapport a ce que tu veux mettre dedans comme donnée, et ensuite à l'aide du css tu les disposes comme tu veux.
Un tableau, en principe c'est pour des affichages de données. Par exemple une liste d'entreprise avec pour chacune le nom, la date de création, le nombre d'employé, le chiffre d'affaire, le bénéfice.
Si tu as des paragraphes de texte, tu utiliseras la balise <p>.
Chaque balise à un sens qu'il faut autant que possible essayer de respecter.

<div>
    <p>Le premier paragraphe</p>
    <p id="gauche">Le deuxième paragraphe</p>
    <p id="droite">A FAIRE FLOTTER A DROITE du deuxième paragraphe A FAIRE FLOTTER A DROITE du deuxième paragraphe</p>
    <p id="dessous">un 4e paragraphe</p>
</div>


p {
    width:300px;
    background-color:red;
}
#gauche {
    background-color:purple;
    float: left;
}
#droite {
    background-color:yellow;
    float: right;
}
#dessous {
    clear:left;
    /*clear:right;*/
    /*clear:both;*/
    background-color:blue;
}

http://jsfiddle.net/5JMcQ/2/

La par exemple j'ai mis des paragraphes, et ensuite on les dispose comme on a envie grâce au css.
Administrateur
nancyAlex a écrit :
Je sais plus comment je pourrais faire alors si je voudrais avoir une affichage (comme un tableau) si je ne le fais pas en &lt;td&gt; et &lt;tr&gt; et tout le reste.

Tu pourrais me donner une piste?

Avec un code HTML écrit en fonction de la sémantique de l'information que tu veux afficher (liste, titre, paragraphe, aucune donc div ou span, etc).
En CSS, à partir d'IE8 et tous les navigateurs récents, tu as des valeurs CSS2 de la propriété display qui sont parfaitement utilisables comme display: table, display: table-row et display: table-cell.
Ça c'est pour se rapprocher visuellement le plus possible de ce qu'est visuellement un tableau de données qui utilise les éléments table, tr, th et td mais pour positionner "à droite" un élément, float reste une bonne solution. Il y a aussi display: inline-block, un peu détourner text-align: right mais il faut aussi jouer avec la largeur... Pas mal d'outils à notre disposition pour de la mise en page tout en évitant de détourner les tableaux de leur usage prévu.

Ressource: les 5 pages de ce tuto : http://www.alsacreations.com/tuto/lire/1522-le-modele-tabulaire-en-css.html
J'ai utilisé des div, inline-block et text-align pour avoir le contenu que je voulais plutot qu'utiliser des tableaux. Le code est plus clean en plus.

Merci du conseil. Smiley smile
Modifié par nancyAlex (20 Jan 2014 - 11:48)
Sujet clos
Aller à