tableau en css

[rottman]

Bonjour,

Désolé en XHTML strict/CSS2 j'ai honte, j'suis vraiment trop nul...

J'aimerais transformer :

Code: Tout sélectionner

<form...........>
<table align="center" border="0" cellpadding="0">
<tr>
   <td width="172">blabla :</td>
   <td width="167"><select>.......</select></td>
</tr>
<tr>
   <td>blabla :</td>
   <td><select>.......</select></td>
</tr>
<tr>
   <td>blabla :</td>
   <td><select>.......</select></td>
</tr>
</table>
<input type="button"........>
</form>

j'arrive même pas à aligner un texte avec le menu déroulant...
lorsque je mets le <table> dans un div et que je mets text-align:center; pour ce div, le <table> est centré sous IE mais pas Firefox

Je voudrais remplacer ce <table> par des <div> en gardant le même design, mais comment ?!

Merci !

[aladdin]

il faut carrement virrer les <table> <tr> et <td> et les remplacer par des <div class="nomdeclasse">

pour les mise en fore des <div> au format tabeau il suffit de modifier le display dans les css du div regarde ici http://www.w3schools.com/css/pr_class_display.asp

tu peut aussi utiliser float:left / float:right pour le positionnement de tes colonnes

et pour des tutorials sur la mise en page en css sans tableaux google est ton meilleur ami

[rottman]

Merci de ton aide
J'ai enfin réussi

[spout]

Salut,

Pour tes formulaires, il y'a moyen de faire mieux en pensant à l'accessibilité:
http://www.la-grange.net/accessibilite/day_28.html

Pour la mise en page SANS tableaux un exemple ici:
http://www.quirksmode.org/css/forms.html

[jeangab]

mise en forme sans tableau, oui, mais il ne faut quand meme pas les bannir a tous jamais de nos pages, ils font partie du xhtml., c'est seulement les pages "all table" qui sont a proscrire.

[spout]

Non il ne faut pas bannir les tableaux, c'est toujours utile, mais il ne faut pas en abuser.
Encore un lien:
http://www.cybercodeur.net/weblog/prese ... index.html

[tigrou]

non il ne faut pas bannir les tableaux, il faut juste s'en servir pour présenter des données ...



... TA-BU-LAI-RE !!

[jeangab]

exact, les tableaux servent a presenter des données sous une forme tabulaire, il serait bete de s'en passer, seule la mise en page uniquement via des tableaux imbriqués n'est pas des plus subtile, et a contrario, presenter des données tabulaires via "div" ne l'est pas plus....

[st-antigone]

mise en forme sans tableau, oui, mais il ne faut quand meme pas les bannir a tous jamais de nos pages, ils font partie du xhtml., c'est seulement les pages "all table" qui sont a proscrire.

une question de débutant,
pourquoi ?

pour ma part,
les pages de liens je les fais en "all table",
je trouve cela bien pratique pour les modifier et pour les lire ...

j'ai fais aussi des pages menus sous forme de tableaux, très pratique aussi,

c'est quoi mon erreur ?

[jeangab]

oui, ca fonctionne tres bien, mais c'est une utilisation "detournée" des tableaux, ils ne sont pas prevu a l'origine pour faire de la mise en page, c'est un peu comme si tu mangeait de la soupe avec une fourchette.
plus d'info sur http://css.alsacreations.com/Faire-une- ... -tableaux/

[aladdin]

pour ma part,
les pages de liens je les fais en "all table",
je trouve cela bien pratique pour les modifier et pour les lire ...

j'ai fais aussi des pages menus sous forme de tableaux, très pratique aussi,
c'est quoi mon erreur ?

l'utilisation des tableaux pour la mise en page n'est pas tres pratique pour avoir un site accessible sur divers types de navigateurs,
tu me dira qu'internet explorer et firefox font tout les deux 95% de la part des navigateurs utilisés, mais pense un peut au autres utilisateurs ...

en plus la mise en page avec des <div> est beaucoup plus legère et permet d'avoir differentes mises en page à la volé, elle permet aussi de séparrer les données du format (xhtml pour les données et css pour le format)

Code: Tout sélectionner

<table>
   <tr>
        <td colspan="2">entete</td>
   <tr>
   <tr>
        <td>gauche</td>
        <td>droite</td>
   <tr>   
</table>


devient :

Code: Tout sélectionner

<div class="header">
   entete
</div>

<div class="left">
   gauche
</div>

<div class="right">
   droite
</div>


en utilisant le css :

Code: Tout sélectionner

div.header
{
    clear:both;
}
div.left
{
    float:left;
}
div.right
{
    float:right;
}


tu vois bien qu'avec les div tu as moin de niveaux, et ton code devient beaucoup plus clair et la mise en page plus naturelle

[chooky]

Bonjour et merci pour ce post qui répond carément à ma recherche.

Le site de mon profil a été totalement réalisé en tableau (tableaux imbriqués) et je vais démarrer la version Anglaise et je souhaiterais donc savoir comment évoluer vers le CSS.

J'ai lu pas mal de tuto, mais je n'ai guère progressé.

Est ce que un aimable wrinaute pourrait me dire s'il est possible de représenter exactement mon entête en CSS ?

[Vincent_prague]

Sur le sujet, il y a l'incontournable : http://www.openweb.eu.org
et les groupes usenet :
http://groups.google.fr/group/fr.comp.i ... erso?hl=fr
et http://groups.google.fr/group/fr.comp.i ... eurs?hl=fr
N'hésite pas à poser des questions sur ces groupes usenet. Tu verras, les champions français des CSS y participent

[st-antigone]

pour ma part,
les pages de liens je les fais en "all table",
je trouve cela bien pratique pour les modifier et pour les lire ...

j'ai fais aussi des pages menus sous forme de tableaux, très pratique aussi,
c'est quoi mon erreur ?

l'utilisation des tableaux pour la mise en page n'est pas tres pratique pour avoir un site accessible sur divers types de navigateurs,
tu me dira qu'internet explorer et firefox font tout les deux 95% de la part des navigateurs utilisés, mais pense un peut au autres utilisateurs ...

en plus la mise en page avec des <div> est beaucoup plus legère et permet d'avoir differentes mises en page à la volé, elle permet aussi de séparrer les données du format (xhtml pour les données et css pour le format)

Code: Tout sélectionner

<table>
   <tr>
        <td colspan="2">entete</td>
   <tr>
   <tr>
        <td>gauche</td>
        <td>droite</td>
   <tr>   
</table>


devient :

Code: Tout sélectionner

<div class="header">
   entete
</div>

<div class="left">
   gauche
</div>

<div class="right">
   droite
</div>


en utilisant le css :

Code: Tout sélectionner

div.header
{
    clear:both;
}
div.left
{
    float:left;
}
div.right
{
    float:right;
}


tu vois bien qu'avec les div tu as moin de niveaux, et ton code devient beaucoup plus clair et la mise en page plus naturelle

merci, je vais regarder si je peux sans problème transposer ce que j'ai déjà fait, de table en div ...