Forum d'entraide PHPFrance

Bonjour à tous

,

Tout d'abord je tiens à m'excuser si cette question à déjà été posée, mais je ne vous cache pas que je suis complétement perdu !

En effet, après avoir lu qu'il fallait éviter d'utiliser les tableaux dans les pages web (présentation graphique et affichage du texte), j'ai décidé de regarder ça de plus pres.
Dans mon cas, j'ai des pages avec un formulaire où je saisie quelques informations (en fait des critères de recherches pour une requete) puis après validation, j'affiche les résultats sur la même page.

Avant, je mettais tout dans des tableaux, mais là, je suis perdu entre ceux qui disent qu'il faut utiliser les tableaux et ceux qui disent qu'il faut s'en passer...
D'autre part, autant pour un formulaire, à la rigueur pourquoi pas, mais comment se passer des tableaux pour l'affichage de résultats ???

Alors que faut-il que j'utilise ???

Merci d'avance pour vos réponses.

Jean

Exemple d'un formulaire

Code : Tout sélectionner

    
<div id="inscription">
     <form name="formname" method="post" action="form.php" enctype="multipart/form-data">
        <fieldset>
            <legend>Coordonn&eacute;es</legend>
            <p>
                <label for="firstname">Pr&eacute;nom : </label>
                <input type="text" maxlength="60" size="20" name="prenom" id="firstname" value=""/>
            </p>
            <p>
                <label for="lastname">Nom : </label>
                <input type="text" maxlength="60" size="20" name="nom" id="nom" value=""/>
            </p>
            <p>
                <label for="email">Votre e-mail : </label>
                <input type="text" size="36" value="" name="email" id="email"/>
            </p>
            <p>
                <label for="adresse">Votre adresse : </label>
                <textarea name="Commentaires" id="adresse" rows="6" cols="46"> </textarea>
            </p>
        </fieldset>
        <input type="summit"  value="Envoyer"/>
    </form>
</div>

et le css correspondant :

Code : Tout sélectionner

#inscription {
  width: 500px;
  margin-left: 10px;
  margin-right: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  border: solid 1px #cc6600;
}

#inscription fieldset {
	margin-bottom: 10px;
	border-color: #cecece;
}

#inscription fieldset label{
  text-align: left;
  font-weight: normal;
  margin-top: 5px;
  padding-left: 10px;
  position: relative;
  width: 100px ;
  float: left;
	border-color: #c4c4c4;
}

#inscription fieldset legend {
  text-align: left;
  font-weight: bold;
	color: #CC6600;
}

#inscription fieldset input {
  font-weight: normal;
  padding-top: 2px;
  position: relative;
  width: 350px;
float: none;
}

#inscription textarea {
  font-weight: normal;
  padding-top: 2px;
  position: relative;
  width: 350px;
float: none;
}

Les balises <p> dans le formulaire sont nécessaire pour Microsoft Internet Explorer. Les autres s'en passe très bien.

Pour la récupération des données, un tableau, pourquoi pas : il ne faut pas vouloir être plus css que le w3c

Bon remettons quelques choses au clair:

Les tableaux, c'est excellent mais on peut largement s'en passer, cela évite à avoir à faire faire des calculs de positionnement parfois lourds au navigateur. Mais parfois, un tableau peut être la seule alternative à un positionnement CSS chaotique.
Il faut savoir qu'un CSS chaotique posera beaucoup plus de problèmes qu'un tableau défaillant.

Moralité: ce qu'on peut faire simplement en CSS évite les tableaux. Sinon ===> Zzzzzou un petit tableau sympa. Une exception: les données comptables, etc... (chiffrées, ordonnées), où un tableau est nécessaire.

C'est mon point de vue, et d'après ce que je sais, je suis loin d'être le seul à penser ainsi.

EDIT: Encadrer avec <p> est indispensable pour la validité w3c.

Lpu8er

EDIT: Encadrer avec <p> est indispensable pour la validité w3c.

Tu parle de la feuille de style que j'ai présenté ?

Non, l'erreur n'est pas là, il est là :

label for "lastname" demande un id de même valeur donc, id="nom" est incorrecte, il faut id="lastname"

Merci pour vos conseils...

Je vais donc faire ainsi :
Formulaires => CSS
Données renvoyées par requêtes => tableau (car j'y ajoute des boutons pour différentes actions... et ça risqaue d'être galère !

)

En revanche, de nouveau une petite question... je sais j'abuse mais vu que je découvre un peu le xhtml...
Avec ce système de formulaire... est-ce que je peux toujours cacher/afficher certains champs, via javascript, en choisissant une option par exemple avec un bouton radio... (ex : si oui => rien, si non => on affiche un nouveau champs de saisi... qui est dans un autre <div>) ?

De nouveau merci.
Jean

Petite mise au point importante.

La balise <table> a, à l'origine, été créée pour afficher des données "tabulaires". Ainsi, des données répétitives issues d'une base de données par exemple trouvent tout à fait leur place dans un tableau html. Cependant, le développement de logiciels WISIWYG d'édition de page web a détourné l'objectif de base en exploitant certaines particularités des tableaux pour les utiliser également pour la mise en page.

Cette manière de faire pose des problèmes essentiellement aux navigateurs alternatifs qu'utilisents certaines personnes souffrant de handicaps, ou simplement des gens utilisant des navigateurs en mode texte dont certains qu'on oublie beaucoup trop facilement : les moteurs de recherche.

Dans son ouvrage CSS2 Pratique du design web, Raphaël Goetter explique un aspect du développement de façon fort intelligente : la sémantique. Il dit en effet qu'il est de fort loin préférable d'utiliser les balises html selon leur destination. Un titre par exemple devra être mis entre des balises <hn></hn> (n = 1 à 6) et non dans une balise <p></p> dont on modifiera la taille de police. De même, on peut parfaitement construire une interface graphique a l'aide de styles CSS. L'intérêt majeur de cette méthode est qu'une modification d'aspect d'un site peut être effectuée en modifiant uniquement la feuille de style, ce qui serait beaucoup plus laborieux dans un site construit en tableaux parce qu'il faudrait modifier toutes les pages. C'est l'objectif du standard XHTML qui vise à séparer la structure de la présentation. On choisira soigneusement ses balises lors de la construction de la structure du document sans se préoccuper de l'aspect visuel. On fera ensuite seulement une mise en page en applicant différents styles CSS pour obtenir l'affichage souhaité.

Voilà le pourquoi sommaire des mises en page sans tableaux.

Quelques références :

Openweb
AlsaCréations
Et sûrement d'autres encore...

Merci beaucoup pour tous ces conseils et astuces.

Désolé pour le retard.... boulot oblige....

Forum d'entraide PHPFrance

Formulaires et Résultats - Tableau-CSS ???

Formulaires et Résultats - Tableau-CSS ???