Vous êtes ici : Accueil > Forums > Développement de vos sites

Html : ne plus utiliser de balises 'Table'

Geraldd

Jeudi 19 Août 2010 13:37

html : ne plus utiliser de balises 'TABLE'
http://www.biper-studio.com/share/Image/developpement/html.jpg

J'ai appris vite fait le html il y a quelques années. Je suis revenu ce mois ci à l'informatique pour faire le site de mon club, les Coqs Rouges.
Ayant une connaissance obsolète du html, j'ai fait toute la mise en page avec des balises 'TABLE'. Mais je crois qu'aujourd'hui, on préfère la solution plus maniable des balises DIV. Des attributs dans une feuille de style permettent de choisir la position de départ d'un tableau, sa largeur, sa hauteur, sa couleur de fond, sa police de caractère etc.
Idem pour un menu latéral gauche.

Je cherche un tutorial basique sur ça.
http://www.coqsrouges.fr/bordeaux-tennis_de_table/
grosse_plume
nonowned

Jeudi 19 Août 2010 14:20

Mais tu peux toujours utiliser les table, ce n'est plus forcément conseillé mais ça marche toujours et aucun souci au niveau de w3c.
rigs

Jeudi 19 Août 2010 14:30

Effectivement la balise Table doit être utilisée uniquement pour faire des ... tableaux ^^

Un gros +1 pour le site que t'as donné grosse_plume.

Pour apprendre la mise en page en utilisant le CSS j'avais acheté un gros bouquin mais franchement j'en ai appris plus avec ce site.
C'est clair, progressif et avec des exemples : idéal pour débuter (la technique de centrage que je t'ai donné pour ton site, je l'ai apprise grâce à ce site).

Sinon il y a aussi http://css.developpez.com/cours/ ou tu peux glaner des infos dans la section tutoriels ou faqs

Il y a aussi Alsacecréationsl : dèjà un peu plus pointu mais il y a des infos même pour les débutants.
Geraldd

Jeudi 19 Août 2010 16:29

Citation de rigs :
Effectivement la balise Table doit être utilisée uniquement pour faire des ... tableaux ^^

Cette page du forum est un tableau sur 2 colonnes.
http://www.reuters.com/ est un tableau sur 3 colonnes.
http://www.fluctuat.net/ est un tableau sur 4 colonnes.
Comme n'importe quelle page d'un site internet est un tableau, il ne faut jamais se servir de balises DIV.
http://www.coqsrouges.fr/bordeaux-tennis_de_table/
Antares7364

Jeudi 19 Août 2010 20:06

Citation de Geraldd :
Cette page du forum est un tableau sur 2 colonnes.
http://www.reuters.com/ est un tableau sur 3 colonnes.
http://www.fluctuat.net/ est un tableau sur 4 colonnes.
Comme n'importe quelle page d'un site internet est un tableau, il ne faut jamais se servir de balises DIV.

Ca c'est bien dit Émoticône
Y'en a marre de ceux qui ne jurent que par les DIV et qui après se retrouvent incapables de faire des choses simples, ou y passent un temps démesuré, tout en répétant "Oui mais au moins j'utilise pas de balise TABLE" sans pouvoir vraiment expliquer les raisons de leurs choix ...

EDIT: hum dans tes 2 derniers exemples, les TABLE ne participent pas vraiment à la structure globale des sites ...
Moi j'aurais plutôt cité : http://www.google.fr/, http://www.impots.gouv.fr/, ou http://www.leboncoin.fr/ ...
Message modifié 1 fois, dernière modification Jeudi 19 Août 2010 20:13 par Antares7364
rigs

Jeudi 19 Août 2010 20:53

Citation de Antares7364 :
Citation de Geraldd :
Cette page du forum est un tableau sur 2 colonnes.
http://www.reuters.com/ est un tableau sur 3 colonnes.
http://www.fluctuat.net/ est un tableau sur 4 colonnes.
Comme n'importe quelle page d'un site internet est un tableau, il ne faut jamais se servir de balises DIV.

Ca c'est bien dit Émoticône
Y'en a marre de ceux qui ne jurent que par les DIV et qui après se retrouvent incapables de faire des choses simples, ou y passent un temps démesuré, tout en répétant "Oui mais au moins j'utilise pas de balise TABLE" sans pouvoir vraiment expliquer les raisons de leurs choix ...

Reuters et Fluctuat (ainsi que les autres) utilisent pour leur mise en page (le positionnement des éléments) des DIV et non TABLE. Quand je dis que table c'est pour des tableaux il ne faut pas penser des séries de chiffres en colonnes dans 1 quadrillage mais des données a ordonnées.

Pour les raisons, outre le fait qu'un navigateur non graphique va s'y perdre (pas grave s'y on se fout que les malvoyants ne puissent consulter le site), le code par les DIV est bien plus simple que celui par table surtout quand il s'agit de faire évoluer la mise en page.

http://www.openweb.eu.org/articles/problemes_tableaux/
http://openweb.eu.org/mise_en_page/

Que vous vouliez faire toute la mise en page en tableau franchement il n'y a rien a redire mais ça
Citation de Geraldd :
Comme n'importe quelle page d'un site internet est un tableau, il ne faut jamais se servir de balises DIV.
c'est complètement faux.

Sinon je maintiens mon +1 pour Siteduzero (avec une réserve puisqu'il est partisan du div Émoticône )
rigs

Jeudi 19 Août 2010 21:07

Citation de Geraldd :
Comme n'importe quelle page d'un site internet est un tableau, il ne faut jamais se servir de balises DIV.


Encore moi Émoticône

Geraldd, si je me rappel bien d'un autre sujet tu utilise Firefox. Installe cette extension Web Developer
Cela affiche une barre outils trés utile quand tu développe 1 site. Entre autre dans le menu Information active la fonction "Afficher l'ordre des éléments DIV" sur cette page. Compare avec la citation ci-dessus.
Geraldd

Jeudi 19 Août 2010 22:48

Je ne me suis pas exprimé clairement. Je ne discutais pas le bien fondé du choix "DIV plutôt que TABLE".
Je soulignais seulement que ton critère, "la présence d'un tableau", n'en est pas un : il y a des tableaux partout. La mise en page de quasiment tous les sites internet reposent graphiquement sur des colonnes. D'ailleurs, tu le dis toi-même, Reuters et Fluctuat utilisent des DIV. Or graphiquement, leur mise en page n'est rien d'autre qu'un tableau.

Si je m'intéresse aux DIV, c'est dans l'espoir d'éviter le html touffu des tableaux imbriqués et l'exécution parfois fantaisiste d'attributs de largeur ou hauteur par IE.
Je vais me pencher sur tous les tutos mentionnés.
Message modifié 1 fois, dernière modification Vendredi 20 Août 2010 23:52 par Geraldd
http://www.coqsrouges.fr/bordeaux-tennis_de_table/
topaloff

Samedi 04 Septembre 2010 17:16

Le tableau que tu parles Gerrald est appellé grille.
C'est un principe et non une obligation.
Mais un site est plus facile si il respecte une grille verticale et le top du top vertical et horizontal.
Ces grilles fictives ne sont qu'en fait que le resultat de notre vision.
On voit mieux les choses rangées qu'en bordel...
Les plus utilisées en ce moment sont le principe de 1/3 - 2/3 ou 1/4 - 1/2 -1/4 ou des variantes....
C'est pour cela que sur tous les sites récents des l'ouverture on voit les colonnes apparaitrent.
De plus cette mise en forme est modifiable tres facilement avec des div

Si tu utilises Firefox, dl firebug... code css en direct depuis le navigateur avec inspecteur. Le top
Je m'en fous d'être mauvais, je bois pour l'oublier
Geraldd

Mardi 07 Septembre 2010 22:27

Citation de topaloff :
C'est un principe et non une obligation.

C'est une obligation de fait, puisque tous les sites internet ou presque organisent graphiquement leur contenu en colonnes et lignes.

Citation de topaloff :
cette mise en forme est modifiable tres facilement avec des div

Je le soupçonnais avant de créer ce topic, j'en suis sûr, maintenant, après mes premiers essais.

Citation de topaloff :
Si tu utilises Firefox, dl firebug... code css en direct depuis le navigateur avec inspecteur. Le top

inutile pour l'instant, je suis les tutos conseillés plus haut, c'est suffisant.
http://www.coqsrouges.fr/bordeaux-tennis_de_table/
Geraldd

Jeudi 09 Septembre 2010 01:36

Dans le haut de page de ce site, l'image du logo est alignée à gauche mais le petit menu, au dessus est aligné à droite. Mais c'est fait avec une balise TABLE.


Avec un balise DIV : au sein d'un même bloc "haut de page", comment fixer l'alignement de l'image à gauche et celui du menu textuel à droite.
http://www.coqsrouges.fr/bordeaux-tennis_de_table/
rigs

Jeudi 09 Septembre 2010 14:51

Je vais essayer de te donner une solution parmi d'autres possibles. Avec cette façon de faire tu perds le lien vers la page d'accueil dans le logo. Mais comme ce lien fait doublon avec le menu en haut, il n'est peut-être pas indispensable.
(< !-- -- > = commentaire)

dans la "page" du site :

< div id="header" > < !-- ce DIV correspond au bandeau blanc avec le logo et le petit menu -- >
< a href="plan1.php" >Plan du site< /a >< a href="bug1.php" >Signaler un bug< /a > < a href="faq1.php" >FAQ< /a >< a href="index.php" >Accueil< /a > < !-- ton menu mais inversé sans tableau et sans mise en page qui sera dans le fichier CSS -- >
< /div >

ce DIV "header" remplace tout ce qui se trouve entre le DIV "centrage" et le UL "MenuDeroulant"

Fichier CSS :
body {
font: 12px Arial, Helvetica, sans-serif;
margin:0 auto;
padding:0;
background-color:#F3F3F3;
}

#header {
width:930px;
height:90px;
background:url(adresse de ton logo) left bottom no-repeat;
}

#header a {
float:right;
padding-right:5px;
padding-left:5px;
border-right: 1px solid;
font-size: 11px;
color: #000022;
text-decoration:none;
}

Dans BODY j'ai ajouté font: 12px Arial, Helvetica, sans-serif; pour définir la taille et le type de fonts pour le site en général. Ensuite dans les cas particuliers comme le menu du DIV "header" tu as juste la taille et la couleur a préciser.
Cela permet de supprimer toutes les CLASS que tu as créé pour les caracteres ou "Arial, Helvetica, sans-serif" est répété à chaque fois.
Si tu veux rester avec ton système il faudra alors ajouté la CLASS adéquate aux balises < a > qui se trouvent dans le DIV "header".

En espérant avoir été assez clair, voici donc la solution que je te propose avec mes connaissances actuelles
Geraldd

Jeudi 09 Septembre 2010 17:34

Je vous remercie pour les diverses solutions proposées, en mp et ici. En fait la solution était simplissime, je suis tombé dessus par hasard ce matin.
.imageagauche
{
float: left;
}
Il suffisait d'appliquer cette classe à l'image. Court et compatible avec le lien du logo.


Citation de rigs :
le lien vers la page d'accueil dans le logo. Mais comme ce lien fait doublon avec le menu en haut, il n'est peut-être pas indispensable.

background image, c'était astucieux, même si je préfère ma solution.

Citation de rigs :
float:right;

J'avais employé un text-align: right; sur tout le bloc. Ton float right uniquement sur les liens est plus malin si je dois compléter un jour le haut de page avec du texte non aligné à droite. Ca m'a juste obligé à ruser pour les barres verticales entre les mots-lien.


Citation de rigs :
Dans BODY j'ai ajouté font: 12px Arial, Helvetica, sans-serif; pour définir la taille et le type de fonts pour le site en général. Ensuite dans les cas particuliers comme le menu du DIV "header" tu as juste la taille et la couleur a préciser. Cela permet de supprimer toutes les CLASS que tu as créé pour les caracteres ou "Arial, Helvetica, sans-serif" est répété à chaque fois.

J'avais déjà défini la police par défaut dans le body de la version actuelle du site, qui n'est pas encore en ligne. Il n'y a plus de balises TABLE ni de CLASS à chaque lien. C'était le but.
http://www.coqsrouges.fr/bordeaux-tennis_de_table/
Geraldd

Jeudi 09 Septembre 2010 18:03

Une solution que je trouve un peu moins bonne que la mienne et qui m'a été proposée en mp :

#logo_gauche {
position: relative;
left: 0px;
}

#menu_droite {
position: relative;
left: 670px;
width: 300px;
}

J'y avais déjà pensé mais je l'avais écartée parce que je veux le menu et le logo dans un seul et même bloc.
Encore une fois, merci à tous de vous être penchés sur mon problème.
Message modifié 1 fois, dernière modification Jeudi 09 Septembre 2010 18:04 par Geraldd
http://www.coqsrouges.fr/bordeaux-tennis_de_table/
Geraldd

Vendredi 10 Septembre 2010 18:44

Voila, j'ai refait tout mon code statique sans balise TABLE et avec très peu de balises CLASS.
Visuellement, le résultat est le même, voir ici, mais mon html est devenu plus lisible. Je suis content.
Merci de m'avoir indiqué http://www.siteduzero.com , c'est un tuto parfait pour débutant. Je vous en dois une !
Émoticône
Message modifié 4 fois, dernière modification Samedi 11 Septembre 2010 13:18 par Geraldd
http://www.coqsrouges.fr/bordeaux-tennis_de_table/
Geraldd

Vendredi 17 Septembre 2010 13:08

Citation de rigs :
tu utilise Firefox. Installe cette extension Web Developer
Citation de topaloff :
tu utilises Firefox, dl firebug... code css en direct depuis le navigateur avec inspecteur. Le top

Non, le top c'est Chrome, mon navigateur préféré. Rien à installer et parmi les fonctionnalités de base, un inspecteur d'élément qui enfonce toute la concurrence. Il suffit de cliquer sur un élément d'une page et ça te donne tout le code afférent, html css java etc. et son emplacement dans le code global avec une présentation compacte mais complète. Enjoy.
http://www.coqsrouges.fr/bordeaux-tennis_de_table/
Geraldd

Vendredi 17 Septembre 2010 13:17

Exemple (cliquer pour agrandir)

" target="_blank">http://img7.imageshack.us/img7/7590/chrometh.jpg
http://www.coqsrouges.fr/bordeaux-tennis_de_table/
0
0
18 messages

Vous êtes ici : Accueil > Forums > Développement de vos sites