IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

Encore un problème de tableau


Sujet :

HTML

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Mai 2011
    Messages
    55
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2011
    Messages : 55
    Par défaut Encore un problème de tableau
    re bonjour,
    j'ai bien lu les tutorials et je les ai rerelu. j'ai lu je ne sais combien de tutorial sur pas mal de site, mais je ne comprends pas pourquoi sa ne fonctionne toujours pas, j'ai pourtant l'impression d'avoir fais les choses correctement. Le css pour le th fonctionne. J'ai regroupé les 5 colonnes pour les style (colonne) avec col span"5" class=colonne. Mais sa ne marche pas.
    en gros
    J'ai crée un tableau, et je souhaite appliser une css (colonne td) à tous mes prix pour qu'il soit centrer, en arial, en gras, en noir, .....
    Mais cela ne fonctionne pas.
    J'ai dans la premiere colonne à gauche les cellules "1à / 2à / 3à / ...." je souhaite leur appliquer une css (exemplaire td) , mais elle ne s'applique pas non.
    Alors je sais que je pourrais mettre un " class= " dans mes td et que sa fonctionnerait.
    css

    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
    table { 
    	width: 418px;
    	border-collapse: collapse;
    	border:0;
    }
     
    caption h4 {
    	color: #FFF;
    	background: #000;
    	font-size: 14px;
    	font-weight: bold;
    	text-align: center;
    	font-family: Arial, Helvetica, sans-serif;
    	}
     
    th {
    	width: 68px;
    	color: #FFF;
    	background: #D7E200;
    	font-size: 14px;
    	font-weight: bold;
    	text-align: center;
    	font-family: Arial, Helvetica, sans-serif;
    	border: 1px solid #000;
    }
     
    table td { 
    	/* border:1px solid #ccc; */ /* (pour test) */
    	border: 1px solid #000;
    }
     
    .exemplaire td {
    	width: 78px;
    	color: #D7E200;
    	background: #000;
    	font-size: 14px;
    	font-weight: bold;
    	text-align: center;
    	font-family: Arial, Helvetica, sans-serif;
    	border: 1px solid #FFF;
    }
     
    .colonne td {
    	width: 68px;
    	color: #000;
    	background: #FFF;
    	font-size: 14px;
    	font-weight: bold;
    	text-align: center;
    	font-family: Arial, Helvetica, sans-serif;
    }
    HTML

    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
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    <table>
    	<caption>
    		<h4>Titre</h4>
    	</caption>
     
    	<colgroup>
    		<col class="exemplaire">
    		<col span="5" class="colonne">
    	</colgroup>
     
     
     <thead>
    	<tr>
    		<th>&nbsp;</th>
    		<th>Prix 1</th>
    		<th>Prix 2</th>
    		<th>Prix 3</th>
            <th>Prix 4</th>
            <th>Prix 5</th>
    	</tr>
     </thead>
     
    <tbody>
     
    	<tr>
    		<td>1 à</td>
        	<td>0,56</td>
    		<td>0,56</td>
    		<td>0,56</td>
            <td>0,56</td>
            <td>0,56</td>
        </tr>
     
    	<tr>
    		<td>2 à</td>
            <td>0,56</td>
    		<td>0,56</td>
    		<td>0,56</td>
            <td>0,56</td>
            <td>0,56</td>
     
    	</tr>
     
    	<tr>
    		<td>3 à</td>
           	<td>0,56</td>
    		<td>0,56</td>
    		<td>0,56</td>
            <td>0,56</td>
            <td>0,56</td>
        </tr>
     
    	<tr>
    		<td>4 à</td>
    		<td>0,56</td>
    		<td>0,56</td>
    		<td>0,56</td>
            <td>0,56</td>
            <td>0,56</td>
    	</tr>
     
       <tr>
    		<td>5 à</td>
    		<td>0,56</td>
    		<td>0,56</td>
    		<td>0,56</td>
            <td>0,56</td>
            <td>0,56</td>
    	</tr>
     
      <tr>
      		<td>6 à</td>
    		<td>0,56</td>
    		<td>0,56</td>
    		<td>0,56</td>
            <td>0,56</td>
            <td>0,56</td>
    	</tr> 
     
    	<tr>
    		<td>7 à</td>
    		<td>0,56</td>
    		<td>0,56</td>
    		<td>0,56</td>
            <td>0,56</td>
            <td>0,56</td>
    	</tr> 
     
        <tr>
    		<td>8 à</td>
    		<td>0,56</td>
    		<td>0,56</td>
    		<td>0,56</td>
            <td>0,56</td>
            <td>0,56</td>
    	</tr>
     
    	<!-- ............. -->
     
    </tbody>
    </table>
    Merci pour votre aide et votre patience

  2. #2
    Invité
    Invité(e)
    Par défaut
    Bonjour,
    tu n'est pas loin !

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    	<colgroup>
    		<col span="1" class="exemplaire">
    		<col span="5" class="colonne">
    	</colgroup>
    - span="1" -> le 1er <td>
    - span="5" -> les 5 <td> suivants

    - les class "exemplaire" et "colonne" font déjà référence aux td
    Donc :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    .exemplaire {
      /* .... */
    }
    .colonne {
      /* .... */
    }
    pour centrer tous les td :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    table td { 
    	border: 1px solid #000;
    	text-align: center;
    }

  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Mai 2011
    Messages
    55
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2011
    Messages : 55
    Par défaut
    déja merci de m'avoir corriger et de m'aider.
    le problème, c'est le style sur les prix ne marche pas ils ne sont ni en gras, ni en bold, ni en arial.
    et le style sur les exemplaires , me mets juste le backgroung mais pas tout la partie sur le texte non pplus, police , couleur de police, bold ...
    aurais je fais quelque chose de mauvais ?

  4. #4
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Il n'y a aucun td dont un parent ait une classe "exemplaire", ça ne risque donc pas de fonctionner...
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  5. #5
    Invité
    Invité(e)
    Par défaut
    Bonjour,
    à vrai dire, la doc donne l'explication :
    -> HTML <colgroup> Tag
    -> HTML <col> Tag
    on peut y lire :
    Tip: Add the style attribute to the <col> tag, and let CSS take care of backgrounds, width and borders. These are the ONLY CSS properties that work with the <colgroup> tag / <col> tag.
    Donc, pas d'autre choix que de définir les styles "gras", ... sur chaque ligne (1ère colonne)
    Pour les colonnes "courantes", on met le style dans le td :
    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
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    <!DOCTYPE HTML>
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
    	<title>Test</title>
     
    	<style type="text/css">
    table {
            width: 418px;
            border-collapse: collapse;
            border: 1px solid #000;
    }
    caption h4 {
            color: #FFF;
            background: #000;
            font-size: 14px;
            font-weight: bold;
            text-align: center;
            font-family: Arial, Helvetica, sans-serif;
            }
    th {
            width: 68px;
            color: #FFF;
            background: #D7E200;
            font-size: 14px;
            font-weight: bold;
            text-align: center;
            font-family: Arial, Helvetica, sans-serif;
            border: 1px solid #000;
    }
    table td {
            color: #000;
            background: #FFF;
            border: 1px solid #000;
            font-size: 14px;
            text-align: center;
            font-weight: normal;
            font-family: Arial, Helvetica, sans-serif;
    }
    .td-1  {
            color: #fff;
            font-weight: bold;
            background:#D7E200;
    }
            </style>
     
    </head>
    <body>
     
    <table>
    	<caption>
    		<h4>Titre</h4>
    	</caption>
     
    	<colgroup>
    		<col span="1" width="68"/>
    		<col span="5"/>
    	</colgroup>
     
     <thead>
    	<tr>
    		<th class="td-1">&nbsp;</th>
    		<th>Prix 1</th>
    		<th>Prix 2</th>
    		<th>Prix 3</th>
            <th>Prix 4</th>
            <th>Prix 5</th>
    	</tr>
     </thead>
     
    <tbody>
     
    	<tr>
    		<td class="td-1">1 à</td>
    		<td>0,56</td>
    		<td>0,56</td>
    		<td>0,56</td>
    		<td>0,56</td>
    		<td>0,56</td>
        </tr>
     
    	<tr>
    		<td class="td-1">2 à</td>
    		<td>0,56</td>
    		<td>0,56</td>
    		<td>0,56</td>
    		<td>0,56</td>
    		<td>0,56</td>
        </tr>
     
    	<tr>
    		<td class="td-1">3 à</td>
    		<td>0,56</td>
    		<td>0,56</td>
    		<td>0,56</td>
    		<td>0,56</td>
    		<td>0,56</td>
        </tr>
     
    	<tr>
    		<td class="td-1">4 à</td>
    		<td>0,56</td>
    		<td>0,56</td>
    		<td>0,56</td>
    		<td>0,56</td>
    		<td>0,56</td>
        </tr>
     
    </tbody>
    </table>
     
    </body>
    </html>

  6. #6
    Membre averti
    Profil pro
    Inscrit en
    Mai 2011
    Messages
    55
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2011
    Messages : 55
    Par défaut
    j'ai modifier et effectivement cela fonctionne. Merci a tous

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Encore des problèmes avec le BDE
    Par Flint dans le forum C++Builder
    Réponses: 19
    Dernier message: 31/12/2007, 23h26
  2. Problème de tableau
    Par tom06440 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 26/04/2005, 20h30
  3. Problème de tableau
    Par krfa1 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 08/02/2005, 11h09
  4. Réponses: 8
    Dernier message: 10/08/2004, 11h49
  5. Encore un probléme de date avec TADO !
    Par bNoureddine dans le forum Bases de données
    Réponses: 2
    Dernier message: 22/02/2004, 18h22

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo