Largeur de tableau 100% HTML

**EBRAG** · 21/01/2017, 12h10

Bonjour,

Je ne comprends pas ce qui cloche dans les 2 tableaux que je créés, (représentant chacun 1 ligne d'informations).

Mon objectif est que la largeur s'adapte à la dimension de la page, et définis donc toutes les largeurs de colonnes en % de façon à ce que le total fasse 100%M

Mais quand je vois la page sur Firefox par exemple, les 2 tableaux ne sont pas de mêmes largeurs (alors que dans Expression Web, elles se présentent bien !)

Je mets le code...

Code :

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
 
<head><meta http-equiv="Content-Language" content="fr" /><meta name="keywords" content="Alban,GARBE,Alban GARBE,Juin,JUIN,Céline,Céline JUIN,Celine,Julien,Julien GARBE,Excel,excel,Word,word,project,msproject,power point,MSPROJECT,MSProject,EXCEL,assistance,formateur,spécialiste excel,Access,Outlook,VBA,vba,Formation,formation,bureautique,Bureautique,Formation bureautique,Assistance,Formation informatique,office,formation office"/><meta name="description" content="La généalogie d'Alban GARBE" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="Joël GARBE" /><meta name="category" content="formation,bureautique,informatique,vba,assistance,Alban,GARBE,Alban GARBE" /><meta name="pragma" content="no-cache" /><meta http-equiv="pragma" content="no-cache" /><meta name="googlebot" content="archive" />
<title>sans titre 1</title>
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=23)" /><meta http-equiv="Page-Exit" content="revealTrans(Duration=1.0,Transition=23)" /><meta http-equiv="Site-Enter" content="revealTrans(Duration=1.0,Transition=23)" /><meta http-equiv="Site-Exit" content="revealTrans(Duration=1.0,Transition=23)" /><link href="styles/style2.css" rel="stylesheet" type="text/css" />
 
 
<style type="text/css">
.style1 {
        border-style: solid;
        border-width: 1px;
}
.style2 {
        border-width: 0px;
}
</style>
 
 
</head><body style="background-color: #FFFFCC">
 
<table  style="width=100%" class="style2" >
<tr>
<td style="width=12%" class="style1" ><p class="MsoNormal"  style='text-align:center'><span
  style='font-size:10.0pt;font-family:"Comic Sans MS"'>Lignée Descendante 1<o:p></o:p></span></p></td>
<td style="width=88%" class="style1" ><p class="MsoNormal"  style='text-align:center'><span
  style='font-size:10.0pt;font-family:"Comic Sans MS"'><a
  href="BernardEtRenee.htm">Bernard, Achille GARBE</a> 25/01/1925 – 26/01/2002 / Renée Angèle DELÂTRE 10/08/1930 -</span></p></td></tr></table>
<table style="width: 100%" class="style2">
<tr>
<td style="width=12%" rowspan="2" class="style1" ><p class="MsoNormal"  style='text-align:center'><span
  style='font-size:10.0pt;font-family:"Comic Sans MS"'>Lignée Descendante 2<o:p></o:p></span></p></td>
<td style="width=22%" class="style1" ><p class="MsoNormal"  style='text-align:center'><span
  style='font-size:10.0pt;font-family:"Comic Sans MS"'><a
  href="Helene.htm">Hélène</a><o:p></o:p></span></p></td>
<td style="width=22%" class="style1" ><p class="MsoNormal"  style='text-align:center'><span
  style='font-size:10.0pt;font-family:"Comic Sans MS"'><a
  href="Michele.htm">Michèle</a><o:p></o:p></span></p></td>
<td style="width=22%" class="style1" ><p class="MsoNormal"  style='text-align:center'><span
  style='font-size:10.0pt;font-family:"Comic Sans MS"'><a
  href="Claudine.htm">Claudine</a><o:p></o:p></span></p></td>
<td style="width=22%" class="style1" ><p class="MsoNormal"  style='text-align:center'><span
  style='font-size:10.0pt;font-family:"Comic Sans MS"'><a
  href="Lucette.htm">Lucette</a><o:p></o:p></span></p></td></tr>
<tr >
<td style="width=22%" class="style1" ><p class="MsoNormal"  style='text-align:center'><span
  style='font-size:10.0pt;font-family:"Comic Sans MS"'><a
  href="JoelMarieJo.htm">Joël</a><o:p></o:p></span></p></td>
<td style="width=22%" class="style1" ><p class="MsoNormal"  style='text-align:center'><span
  style='font-size:10.0pt;font-family:"Comic Sans MS"'><a
  href="Nicolle.htm">Nicolle</a><o:p></o:p></span></p></td>
<td style="width=22%" class="style1" ><p class="MsoNormal"  style='text-align:center'><span
  style='font-size:10.0pt;font-family:"Comic Sans MS"'><a
  href="Veronique.htm">Véronique</a><o:p></o:p></span></p></td>
<td style="width=22%" class="style1" ></td></tr></table>
 
 
</body>
 
</html>

et le lien pour voir le résultat... http://garbe.joel.free.fr/Test.htm

Par avance merci pour vos suggestions !

**NoSmoking** · 21/01/2017, 13h52

Bonjour,

Code html :

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

<table  style="width=100%" class="style2" >

que viens faire le = dans ton style, étourderie ?

Met tout tes style dans la partie style de ta page, ce genre d'erreur tu la verras tout de suite.

**EBRAG** · 21/01/2017, 14h09

Bonjour et merci pour cette réponse,

le signe "=", c'est ce qui m'est proposé par Microsoft Expression Web pour ce genre de chose...

J'ai continué à cherché, et il semblerait que le problème vienne d'une histoire d'espaces et de marges intérieures au niveau des cellules

Je vais tout de même regarder du côté des styles comme tu le préconises, ce qui m'aidera à mettre à jour mes tableaux

Il paraît que les tableaux ne sont plus très académiques, mais dans mon cas, peu importe, une fois réglé ce problème, seule compte la facilité pour moi, car le reste, je n'y comprends pas grand chose.

Je devrais m'en sortir avec mes trouvailles et ton conseil

Encore merci et bon week-end

**NoSmoking** · 21/01/2017, 14h14

le signe "=", c'est ce qui m'est proposé par Microsoft Expression Web pour ce genre de chose...

je pense que tu as mal interprété

Ecrit simplement à la place <table style="width:100%" class="style2" > et teste.

**EBRAG** · 21/01/2017, 14h49

Merci, je vais regarder cela (en mettant cet info dans la déclaration des styles de la balise Head d'un Modèle Web Dynamique, pour le retrouver sur toute mes pages, car il y en a un paquet que je vais devoir corriger... autour de 80 + quelques une à créer encore... une façon toute personnelle de générer mon arbre généalogique !)

En espérant être sur la bonne voie d'une bonne automatisation de mes pages !

à force, je progresse dans la compréhension de ces subtilités

Largeur de tableau 100% HTML

HTML

Discussions similaires

Partager

Partager