Table avec border-collapse et mauvais affichage sur internet

**escargot72** · 11/10/2016, 19h58

Bonjour
Je voudrais utiliser table border-collapse pour obtenir des traits fins pour chaque cellule.
Je mets au point les fichiers html avec PsPad.
Le résultat est bon à l'affichage sur mon ordi, mais le fichier remonté sur internet vu par google ou firefox ne rend pas les séparations entre cellules.
Aidez-moi !
Bernard

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="styles.css">  
 
<title>Positionnement CSS</title>
</head>
<body>
	<div id="bandeau">Ceci est le bandeau</div>
	<div id="contenu">
    Ceci est le contenu.
    <br />
    <a href="dates_new.html">Dates 2016-2017</a>
  </div>     
</body>
</html>

-- fichier styles.css --

Code css :

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
div {
	text-align:center;
	}
div#bandeau {
	width:600px;
	height:50px;
	background-color:#00CCFF;
	}
div#contenu {
	width:600px;
	height:500px;
	background-color:#FFCC00;
	}
div#pied_page {
	width:600px;
	height:200px;
	background-color:#33FF99;
	}
 
table tr,td,
{
border : 1px solid red;
border-collapse : collapse;
padding : 5px;
}

--fichier dates_new.html

Code html :

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
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dates des tournois 2016-2017</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>                                                       
<body>                                    
<div id="contenu">                                          
 
<h2 align="center">Tournois régionaux 2016-2017</h2>            
<!-- table width="500" border="4" -->
<table style="border-collapse:collapse">                                    
<tr>                                                   
  <td align="center" ><strong>Date</strong></td>                      
  <td align="center" ><strong>Club</strong></td> 
  <td align="center" ><strong>Challenge</strong></td>                      
</tr> 
 
<tr>
<td align="center" >dimanche 11 septembre 2016</td>
<td align="center" > Tournoi Joecker </td>
<td align="center" >non</td>
</tr>
 
<tr>
<td align="center" >dimanche 18 septembre 2016</td>
<td align="center" ><a href="dijp1617.htm">Dijon-Fontaine (tournoi Patton)</a></td>
<td align="center" >oui</td>
</tr>
 
<tr>
<td align="center" >samedi 24 septembre 2016</td>
<td align="center" ><a href="besm1617.htm">Marathon de Besan&ccedil;on</a></td>
<td align="center" >oui</td>
</tr>
 
</table>
</div>
</body></html>

**Ecared** · 12/10/2016, 09h55

Salut, essaie ça pour voir:

Code :

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

1
2
3
4
5
6
7
8
9
10
 
table {
    border-collapse: collapse;
}
 
table,
td,
th {
    border: 1px solid black;
}

Invité · 12/10/2016, 10h04

Bonjour,

voici un très bon article sur la structure et style des <table> :

Les tableaux (XHTML & CSS)

**escargot72** · 12/10/2016, 10h30

@Ecared

Merci beaucoup.
La page s'affiche bien. Les doubles traits étaient peu esthétiques !
A bientôt pour d'autres questions.
Amicalement
Bernard

**escargot72** · 12/10/2016, 10h32

@jreaux62

Merci pour le lien.
J'avais pris pour exemple "Div et CSS : une mise en page rapide et facile" de P.B. Naigeon sur ce site.
Amicalement
Bernard

**Ecared** · 12/10/2016, 11h57

N'hésite pas à mettre un petit

aux réponses qui t'ont aidé et de marqué le sujet comme résolu

Table avec border-collapse et mauvais affichage sur internet

Tableau en CSS

Discussions similaires

Partager

Partager