border-width inefficace

30 mars 2007, 09:56

Bonjour,

J'ai fais plusieurs fonctions PHP qui me permettent de formater ma page en fonction du contenu.

La premeière :

Code : Tout sélectionner

function style($title=NULL)
{print('
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>'.$title.'</title>
</head>
<style type="text/css">
body {color:black;}
body,td,th {font-family: Garamond; font-size: 14px;	font-weight: bold;}
a:link {text-decoration: none; font-size: 14px; font-style: normal; color: #996600;}
a:visited {text-decoration: none; font-size: 14px; font-style: normal; color: #996600;}
a:hover {text-decoration: none; font-size: 14px;	font-style: italic;	color: #000000;}
a:active {text-decoration: none; font-size: 14px; font-style: normal; color: #663333;}
a { font-size: 14px; font-weight: bold;}
table {border-color:#000000; border-width: 2px; border-collapse:collapse;}
td { border-width:2px; border-color:#000000; }
th { border-width:2px; border-color:#000000; }
.texte {font-size: 14px; font-weight: bold; font-family: Garamond; text-align: center; line-height: normal;	vertical-align: middle;}
</style>
<body bgcolor="#FFFFCE">');}

la deuxième

Code : Tout sélectionner

function debuttable($title=NULL,$align='justify')
{print('
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>'.$title.'</title>
</head>
<style type="text/css">
body {color:black;}
body,td,th {font-family: Garamond; font-size: 14px;	font-weight: bold;}
a:link {text-decoration: none; font-size: 14px; font-style: normal; color: #996600;}
a:visited {text-decoration: none; font-size: 14px; font-style: normal; color: #996600;}
a:hover {text-decoration: none; font-size: 14px;	font-style: italic;	color: #000000;}
a:active {text-decoration: none; font-size: 14px; font-style: normal; color: #663333;}
a { font-size: 14px; font-weight: bold;}
table {border-color:#000000; border-width: 2px; border-collapse:collapse;}
td { border-width:2px; border-color:#000000; }
th { border-width:2px; border-color:#000000; }
.texte {font-size: 14px; font-weight: bold; font-family: Garamond; text-align: center; line-height: normal;	vertical-align: middle;}
 </style>

<body background="fond.jpg" style=" background-position:center top; background-repeat:no-repeat ">
<table width="1000" border="0">
  <tr>
    <td width="105">&nbsp;</td>
    <td width="795">
<div style="overflow: auto; width: 790px; height: 580px; z-index:10; padding-right: 10px; text-align: '.$align.';">');}

MOn problème se situe au niveau du style CSS au niveau de table.

Alors que la deuxième fonction me donne un tebleau comme je le veux (bordure noire, avec fusion des bordures des cellules), la permière, quand je l'utilise me donne un tableau sans bordure...

Voici comment j'appelle mon tableau :

Code : Tout sélectionner

<table width='3900'>
<tr bgcolor="f4ba54">
<th width=100>en tête</th>
[...]
</tr>
<tr bgcolor='fefe9b'>
[...]
</tr>
<tr>
[...]
</tr>
</table>

30 mars 2007, 11:07

Modération :
Merci d'utiliser un titre clair et qui correspond bien à ta demande.
Les titres contenant "HELP", "Aidez-moi !" ou "Problème" n'apportent rien à la compréhension de ton problème.
Par ailleurs, nous savons déjà par ton message que tu as besoin d'aide.

Tu peux corriger ton titre en éditant ton premier message.

Merci de prendre le temps de lire les règlements.

Quant à ta question : commence par y aller avec ordre et méthode :
-1- établir les maquettes en HTML/CSS statique sans traitement serveur avec un contenu en dur;
-2- découpe ton HTML pour intégrer les éléments nécessaires dans ton PHP en oubliant pas de mettre les liens vers la/les feuille(s) de style appropriée(s) et en remplaçant le contenu en dur par le contenu dynamique prévu.

Mais essayer d'ajuster tout en même temps (HTML + CSS + PHP) est une perte de temps et beaucoup plus galère.

30 mars 2007, 12:15

Désolé pour le titre je le change tout de suite.

J'ai juste fait un code avec seulement du HTML et du CSS :

Code : Tout sélectionner

<style type="text/css"> 
body {color:black;} 
body,td,th {font-family: Garamond; font-size: 14px;   font-weight: bold;} 
a:link {text-decoration: none; font-size: 14px; font-style: normal; color: #996600;} 
a:visited {text-decoration: none; font-size: 14px; font-style: normal; color: #996600;} 
a:hover {text-decoration: none; font-size: 14px;   font-style: italic;   color: #000000;} 
a:active {text-decoration: none; font-size: 14px; font-style: normal; color: #663333;} 
a { font-size: 14px; font-weight: bold;} 
table {border-color:#000000; border-width :2px; border-collapse:collapse;} 
td { border-width :2px; border-color:#000000; } 
th { border-width :2px; border-color:#000000; } 

.texte {font-size: 14px; font-weight: bold; font-family: Garamond; text-align: center; line-height: normal;   vertical-align: middle;} 
</style>

<table width="700">
<tr>
<th>A</th>
</tr>
<tr>
<td>B</td>
</tr>
<tr>
<td>C</td></tr></table>

et la les bordures ne s'affichent pas, il faut que je rajoute border="1" et ca marche tout seul.

Mais border-width ne sert pas à ca ?

30 mars 2007, 12:35

Essaie d'ajouter à ton CSS existant:

Code : Tout sélectionner

table, th, td {
  border-style: solid;
}

Ou mieux, tu regroupes les déclarations CSS pour les bordures comme suit:

Code : Tout sélectionner

table, th, td {
  border: 2px solid black;
}

border-width ne sert qu'à déterminer l'épaisseur de la bordure, pas le style.

Quant à l'attribut border, même s'il est autorisé pour les tableaux, je te conseille de ne pas l'utiliser et de privilégier les CSS pour dessiner une bordure.

30 mars 2007, 12:50

Merci beaucoup. Maintenant ca marche.

30 mars 2007, 13:54

Explication : la propriété border pour table n'affectera que la balise <table> mais ni les lignes (<tr>) ni les cellules (<th> ou <td>). Il faudra donc au besoin définir cette propriété pour ces balises également si tu le souhaites.

30 mars 2007, 14:07

Merci, j'avais déjà compris ca, c'est pourquoi je les avais déjà défini par des lignes séparé, mais c'est plus simple comme ca.

J'en dédui que si je veux faire des style de tableau différents, il faut que je mette class="" pour chaque balise du tableau, à moins qu'il y a une autre solution...

30 mars 2007, 14:20

Si plusieurs styles différents doivent s'appliquer à plusieurs tableaux, les classes sont là pour ça, auquel cas tu auras, par exemple:

Fichier CSS

Code : Tout sélectionner

.style-1, .style-1 th, .style-1 td {
  border: 1px solid black;
}
.style-2, .style-2 th, .style-2 td {
  border: 2px solid blue;
}

Page HTML

Code : Tout sélectionner

<table class="style-1">
  <tr>
    <th>Titre</th>
    <th>Titre</th>
  </tr>
  <tr>
    <td>Cellule</td>
    <td>Cellule</td>
  </tr>
</table>
<table class="style-2">
  <tr>
    <th>Titre</th>
    <th>Titre</th>
  </tr>
  <tr>
    <td>Cellule</td>
    <td>Cellule</td>
  </tr>
</table>
<table class="style-1">
  <tr>
    <th>Titre</th>
    <th>Titre</th>
  </tr>
  <tr>
    <td>Cellule</td>
    <td>Cellule</td>
  </tr>
</table>
<table class="style-2">
  <tr>
    <th>Titre</th>
    <th>Titre</th>
  </tr>
  <tr>
    <td>Cellule</td>
    <td>Cellule</td>
  </tr>
</table>

Et si tu veux fusionner les bordures de tous les tableaux, quel qu'en soit le style, tu ajoute dans le fichier CSS

Code : Tout sélectionner

table {
  border-collapse: collapse;
}

30 mars 2007, 14:22

OK merci beaucoup.

Donc la classe est transmise aux éléments du tableau mais pas les propriété du tableau.

30 mars 2007, 14:23

Les éléments enfants du tableau recevront la bordure souhaitée.

31 mars 2007, 10:27

Merci beaucoup

border-width inefficace

Qui est en ligne