tableau en css

rottman · 3 Mai 2005

Bonjour,

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

J'aimerais transformer :

Code:

<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... :cry:
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 :cry:

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

Merci !

aladdin · 3 Mai 2005

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 · 3 Mai 2005

Merci de ton aide

J'ai enfin réussi

spout · 3 Mai 2005

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 · 3 Mai 2005

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 · 3 Mai 2005

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 · 3 Mai 2005

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 · 3 Mai 2005

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 · 4 Mai 2005

jeangab a dit:
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 · 4 Mai 2005

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 · 4 Mai 2005

st-antigone a dit:
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:

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

devient :

Code:

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

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

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

en utilisant le css :

Code:

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 · 7 Mai 2005

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 · 7 Mai 2005

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 · 7 Mai 2005

aladdin a dit:
st-antigone a dit:

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 ?

Cliquez pour agrandir...

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:

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

devient :

Code:

<div class="header"> entete </div> <div class="left"> gauche </div> <div class="right"> droite </div>

en utilisant le css :

Code:

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 ...