Que faut-il utiliser à la place ? (balise table, font, size, etc...)

Bonjour ! (bonsoir plutôt )
Alors, heu, plusieurs questions !
Depuis que j'apprends le codage on me parle de balises obsolètes, comme center>, font>, ou encore les table> !
Mais, heu, la question que je me pose souvent c'est: que faut-il utiliser pour gérer au mieux son code ? Autant pour le center, l'équivalent est le margin: auto autant pour les tables c'est moins évident : Est-ce qu'à la place il faut utiliser des propriétés de positionnement relative et absolute ?
Parce que personnellement j'y vois un énorme inconvénient: dès qu'on a plus de quelques div à placer ça devient très compliqué, et puis elles ne s'adaptent pas les unes aux autres comme le feraient les cases d'un tableau...
J'avais lu quelque part qu'il ne fallait pas abuser de la position: absolute parce que c'était très puissant, mais dans quels cas peut-on l'utiliser ?
Le float:left aussi, d'abord j'ai cru comprendre que ça ne servait qu'à positionner une image en regard d'un texte, et dès qu'on a plus de deux divs côte à côte ça devient difficile à gérer...

Bref, qu'est-ce qui remplace les tables ? Et heuu zut j'avais d'autres questions... Hum, je les posterai quand ça me reviendra !

Hello Alu,

Un sujet bien intéressant que tu as ouvert , je vais essayer de te donner mon avis sur la question.

Effectivement il faut essayer d'arrêter d'utiliser les balises center ou font... Elles sont maintenant obsolètes dans le sens où normalement le HTML est là pour le contenu, et le CSS pour la mise en page... Or les balises center ou font servaient à faire directement de la mise en page :p... Elles sont encore reconnus par les navigateurs bien entendu, mais il faut essayer d'arrêter de les utiliser :)

Pour les font, tu peux simplement styliser en CSS avec toutes les propriétés font-size, color, font-weight, etc :)

Pour les balises table on peut les utiliser... Mais pour faire des tableaux ! Il faut les utiliser pour leur "sens" (ici présenter un tableau) mais pas pour une question d'esthétique ^^

Pour ce qui est du remplacement des table, c'est un sujet très très trèèèèèèès vaste, étant donné qu'il y a souvent plusieurs manières de faire...

Mais sinon, non les float ne sont pas là juste pour mettre une image à gauche, on peut très bien mettre plusieurs éléments à côté avec les float ... D'ailleurs si on regarde d'un côté plus "pro", les systèmes de grilles (des systèmes pour mettre les éléments les un à coté des autres facilement) fonctionnent avec des float :)
Ils sont compliqués à comprendre au début mais ensuite c'est bien pratique, et c'est la solution la plus compatible entre tous les navigateurs il me semble.

Pour ce qui est du position: absolute, c'est effectivement très puissant mais il ne faut pas l'utiliser pour tout, on en a pas forcément besoin pour tout
Il faut l'utiliser le plus souvent quand tu as besoin de positionner un élément par rapport à un autre bien précisément... :)

Il n'y a pas de remplacement automatique aux balises table pour positionner, il faut jouer avec le CSS.
Le positionnement en CSS a plein de petite subtilité, le mieux en général est de s'entrainer puis demander un avis sur son code
Ceux qui apprennent le HTML autrement que sur forumactif ne sont pas confrontés à ce genre de problème... En effet, sur phpbb2 tout est encore codé avec des tableaux partout, les LS et les tutos sont souvent vieux et utilisent des balises table... Du coup les gens apprennent à faire comme ça et c'est un cercle infernal \ o /.
Ceux qui apprennent avec des cours directement sur internet en général n'ont pas du tout ce genre de problème car ils n'ont pas été confrontés aux tableaux.

Un petit lien utile : http://fr.learnlayout.com/
Un autre plutôt sympa pour ceux qui cherche de l'interactif : http://www.codecademy.com/fr/tracks/web (aller à la partie "Le positionnement CSS"
Pour ceux qui préfèrent les vidéos : https://youtu.be/O95RmLdRF_o
Et puis la "référence" pour les plus courageux *va vomir* : http://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/le-positionnement-en-css
EDIT : dans la partie apprentissage de NU aussi il y a des tutos là dessus au fait (a)

Ce que je conseille c'est de lire rapidement, même si on ne comprends pas tout, parfois sans qu'on s'en rende compte l'information commence à passer dans le cerveau, et ce n'est qu'après que ça devient un peu plus clair :DDD.. Pour ma part j'avais eu beaucoup de mal à comprendre le concept de float jusqu'à lire un article vraiment bien fait dessus ♥

J'ai essayé de faire plus court que cours (bon ok je sors ), il s'agit plutôt d'un avis "à posteriori", ça risque peut-être même de t'embrouiller plus qu'autre chose (enfin... j'espère pas XDDD). Pour les cours, il existe déjà pleins de ressources sur internet pour s'aider, par contre il peut être intéressant si tu veux de partir d'un code codé avec des tableaux, et "bien" le recoder pour te montrer une manière de faire

Il n'y a pas longtemps j'allais faire une commande pour une PA... Et j'hésitais entre utiliser un position absolute ou non pour placer des éléments. Parfois il n'y pas de "bonne" réponse, plusieurs manières de faire sont viables

Merci, réponse très complète !
Du coup j'ai un peu zoné sur tes liens et je crois que j'ai plus ou moins compris le float (après avoir fait une batterie de tests sur les pages HTML de mon forum test aussi ^^) Et finalement ça a pas l'air si dur à utiliser ! J'essaierai à l'occasion, ça pourrait même me simplifier la tâche et heu bref, c'est cool ♥

Par contre yavait un tuto qui parlait de inline-block pour l'utiliser à peu près de la même manière qu'un float, seulement après avoir fait quelques tests je me suis rendue compte que si il y avait du texte dans les divs juxtaposées, une div comportant deux lignes de texte allait "remonter" de manière à ce que la dernière ligne de son texte coïncide avec la dernière de la div précédente et heuu peut-être que je me suis entièrement trompée mais du coup ça ne me paraît pas très valable, surtout dans le cadre de FA où les divs comportent presque toujours du texte...

Sinon ça m'a déjà bien avancée, je vais tenter de mettre tout ça en oeuvre !

Ha, et le font, c'était pour donner une couleur à un bout de phrase remplacée par du JS dans un qeel, je me suis escrimée deux heures dessus avant de piquer la solution dans un LS de Halloween; il n'y avait vraiment que ça qui fonctionnait ! (enfin je crois )

Par contre y avait un tuto qui parlait de inline-block pour l'utiliser à peu près de la même manière qu'un float, seulement après avoir fait quelques tests je me suis rendue compte que si il y avait du texte dans les divs juxtaposées, une div comportant deux lignes de texte allait "remonter" de manière à ce que la dernière ligne de son texte coïncide avec la dernière de la div précédente et heuu peut-être que je me suis entièrement trompée mais du coup ça ne me paraît pas très valable, surtout dans le cadre de FA où les divs comportent presque toujours du texte...

Est ce que tu pourrais donner un exemple s'il te plait ? Je ne suis pas vraiment sûre d'avoir bien compris °-° (Baka Nihil)

Bien sûr ! regarde, c'est tout simple:






On voit que les blocs se positionnent de telle manière que la dernièere ligne de texte soit située au même niveau, soit au niveau de la ligne du premier bloc !

Le CSS:

Code:

.bloc{
display:inline-block;
height:100px;
width:100px;
background:lightgrey;
color:black;
padding:10px;
margin:0.5em;}

le HTML:

Code:

<div class="bloc">blabla</div>
<div class="bloc">blabla<br />blabla</div>
<div class="bloc">blabla<br />blabla<br />blabla</div>
<div class="bloc">blabla<br />blabla</div>

Si à .bloc dans ton CSS tu rajoutes cette petite ligne, est ce que le rendu est mieux ?

Code:

vertical-align: top;

Effectivement par défaut, les div en inline-block s'alignent par rapport à la baseline, donc à chaque fois la ligne du bas

Houlà, je me sens vraiment idiote °°
Effectivement c'est parfait avec ça ! En tout cas merci, ça me fait plein d'outils à tester / exploiter !
Je vais essayer de m'en servir \o/

Pour rajouter du contenu à la discussion, je viens de lire dans le cursus codage la Partie 1 - Etape 6b (annexe) : Bien comprendre le float & clear écrite par NyoTheNeko. Tout à la fin elle a fait des explications sur les float, les table, l'inline-block, etc, ça t'apportera une réponse complémentaire ! :)

Hello :)

Me revoilà à uppper la discussion avec ce petit article que j'ai trouvé intéressant : Ce bon vieux tableau HTML trouvé sur La Tête dans le Flux (:

L'auteur y explique qu'il y a des cas où il préfère utiliser une balise table pour la mise en page... Et dans un sens, je le comprends. Parfois, il faut savoir "être souple", et faire quelque chose "qui ne parait pas beau". Pour ceux que ça intéresse, il ne faut pas hésiter à lire les commentaires qui nourrissent la discussion :)

Je le vois souvent ces temps ci "Done is better than perfect". L'important est d'avoir conscience de ce que l'on fait, parfois oui, on fait des "sacrifices" (utiliser des tableaux) par simplicité. (^-^)

En lisant ton dernier post Nihil et après avoir survolé vos réponses, je pense surtout que ça dépend du codeur finalement.
En effet je trouve que les table sont assez pratique pour les mises en page simple et une première approche de la structure en terme de HTML. Ce qui est bien avec le positionnement, par contre, c'est son panel de propriétés en terme de CSS que l'ont peut retrouver dans les attributs HTML pour les tableaux.
Tout dépend de ce que tu veux simplifier au final, le HTML ou le CSS ?
Je trouve que pour un libre service ou une commande, par exemple, il est prioritaire de simplifier le HTML au maximum afin que la personne qui utilisera le code après puisse modifier les textes dans le code HTML le plus facilement du monde. Par contre si c'est un code comme ça, juste pour toi, tu as tout à fait le droit de choisir un des deux.

Personnellement je préfère m'en tenir au positionnement à présent, car je trouve que ça me fait progresser en apprenant de plus en plus de propriétés HTML et la sémantique de base du codage. D'ailleurs sur le design que je prépare actuellement j'ai utilisé des float pour mes catégories et des position relative et absolute pour mon QEEL, donc tout est possible ^^

En fait tout dépend de ce que toi tu trouves simple. Mais il est indispensable de connaître toutes les manières de positionner tes éléments, ainsi tu pourras faire les choix que tu trouves les plus judicieux.

Je sais pas si je suis compréhensible dans ma réponse x.x