Border, padding et tableaux: obtenir le même comportment sous tous les navigateurs

**lysandre** · 22/07/2008, 10h52

Bonjour,

Après avoir un peu expérimenté, j'ai trouvé un moyen de mettre des border, paddings et margin dans un tableau de façon à ce que le comportement soit le même dans tous les navigateurs. C'est surement déja connu, mais je n'ai rien trouvé sur le net, alors pour ceux qui seraient dans le même cas que moi voila comment faire.

Tout d'abord, je n'ai testé cette méthode que pour un tableau à une case (je voulais juste créer une bordure avec padding autour d'un texte) et sous firefox 2 (mais probable que ca marche sous tous les firefox), IE 4-->6, Opera 6-->8, Netscape 6-->8. Il est très probable que ca marche aussi sous les navigateurs encore plus récents. Je posterais suite à ce message pour signaler quand j'aurais testé avec d'autres navigateurs. J'ai utilisé xhtml 1.0 strict.

La méthode:
C'est en fait la plus intuitive, il faut mettre le margin sur la balise <table>, le border et le padding sur la balise <td>. Si le border ou le padding sont non nuls, il faut que les tailles des <td> soient diminuées pour laisser la place au padding et border

Exemple:

Code xhtml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
 
<head><title>Title here!</title><style>
<!--
html {
height:100%;
}
body {
height:100%;
}
 
-->
</style></head>
 
<body style="border:0px; margin:0px; padding:0px;">
<table cellspacing="0" style="width:1000px; height:500px; 
margin:100px; border:0px; padding:0px;">
 
<tr><td bgcolor="#AABB99" style="width:660px; height:160px;
background-color:#AABB99; margin:0px; padding:150px; 
border:20px; border-style:solid; border-color:#5A238F;" >
Et voila!</td></tr></table>
 
</body></html>

Ici
taille table=1000x5000
donc
taille td = (1000-2*taille border-2*taille padding)x(500-2*taille border-2*taille padding)

**romain_ci** · 22/07/2008, 15h14

Tu utilise du strict. c'est bien ca

!

Mais alors pourquoi utilise tu les tableaux si tu ne met pas de données tabulaire dedans ??

la tu ne passera pas le Validateur W3C !

**c_s_s** · 22/07/2008, 16h29

Effectivement, il vaut mieux garder les tables pour l'affichage de données tabulaires.

Cependant, en XHTML strict, les tables ne sont pas interdites pour gérer les mises en pages, elle sont juste fortement déconseillées (puisqu'il y a de meilleures alternatives).

Un document structuré sous tableaux peut être Valide en XHTML Strict.

Invité · 29/07/2008, 23h05

Bonjour,

en XHTML 1.0 Strict, pour les tables certains attributs ne sont pas permis.
Il est préférable de passer par une description des styles via un script CSS interne ou externe.

Exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<table bgcolor="..." ....>
.
.
.
</table>

en

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<table>
.
.
.
.
</table>

avec la CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
table {
  background-color: white;
}

A+

**lysandre** · 04/08/2008, 16h47

En fait je reves ou un grande partie des messages de ce fil a été supprimé? Plusieurs de mes fils récents on aussi disparu...

**c_s_s** · 04/08/2008, 17h21

Il y a eu des problèmes important et il a fallu revenir à une version antérieure du forum pour ne pas agraver la situation.
Plusieurs messages postés après le 23 juillet ont ainsi été sacrifiés pour la bonne cause.

**lysandre** · 04/08/2008, 17h58

Envoyé par c_s_s

Il y a eu des problèmes important et il a fallu revenir à une version antérieure du forum pour ne pas agraver la situation.
Plusieurs messages postés après le 23 juillet ont ainsi été sacrifiés pour la bonne cause.

Ah ok donc je n'ai pas rêvé, ca me rassure

Finalement j'ai refais le corps de mon site avec des <div> .
Il y avait en particulier deux choses que j'appréciais avec les tableaux, le moyen que j'avais trouvé de concilier tout le monde au niveau de l'interprétation des border et padding, et la possibilité que le tableau s'étende avec son contenu.
J'ai réussi à avoir ca avec les div, moyennant une adaptation en fonction des navigateurs avec php.

Invité · 07/08/2008, 11h11

Bonjour,

Pour palier à certaines différences d'affichage entre les navigateurs (padding, margin, ...), il faut faire un reset css en début de feuille de style CSS et définir le style des éléments utilisés.

Voir cours ou tutos sur les RESET CSS dans la rubrique CSS.

A+

**lysandre** · 20/08/2008, 09h52

Envoyé par jlmag

Bonjour,

Pour palier à certaines différences d'affichage entre les navigateurs (padding, margin, ...), il faut faire un reset css en début de feuille de style CSS et définir le style des éléments utilisés.

Voir cours ou tutos sur les RESET CSS dans la rubrique CSS.

A+

Merci jlmag pour ton conseil, mais ca je fais déjà. En fait il y a des différences d'interprétation par les navigateurs indépendantes des valeurs par défaut des propriétés css dans ces navigateur (ben oui sinon ce serait trop facile, il suffirait de mettre tout les css à la valeur voulue et puis hop ca marche

)

Border, padding et tableaux: obtenir le même comportment sous tous les navigateurs

Tableau en CSS

Discussions similaires

Partager

Partager