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 :

[HTML] Afficher les bordures autour des cellules


Sujet :

HTML

  1. #1
    Membre habitué
    Profil pro
    Inscrit en
    Novembre 2006
    Messages
    340
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2006
    Messages : 340
    Points : 139
    Points
    139
    Par défaut [HTML] Afficher les bordures autour des cellules
    Voila, j'ai une table. Je ne veux pas afficher les bordures de contour de la table, mais seulement les bordures autour de chacune des cellules.

    En l'état actuel des choses, ce qui me dérange, c'est la ligne de contour la plus extérieure. J'aimerai bien ne plus la voir apparaître.
    Comment faire? (si c'est possible)

    Voici le code de mon tableau :
    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
    114
     
    <html>
    <head>
    </head>
     
     
    <body>
     
    <table border=1 CELLPADDING=3 CELLSPACING=1>
    	<tr align="center">
    		<td>
    		</td>
    		<td BGCOLOR="#264276"><FONT COLOR="white" >
    		Colonne n°1
    		</td>
    		<td BGCOLOR="#264276"><FONT COLOR="white">
    		Colonne n°2
    		</td>
    		<td BGCOLOR="#264276"><FONT COLOR="white">
    		Colonne n°3
    		</td>
    	</tr>
    	<tr align="center">
    		<td BGCOLOR="#264276"><FONT COLOR="white">
    		A
    		</td>
    		<td>
    		----
    		</td>
    		<td>
    		B
    		</td>
    		<td>
    		C
    		</td>
    	</tr>
    	<tr align="center">
    		<td BGCOLOR="#264276"><FONT COLOR="white">
    		Ligne n°1
    		</td>
    		<td>
    		D
    		</td>
    		<td>
    		E
    		</td>
    		<td>
    		F
    		</td>
    	</tr>
    	<tr align="center">
    		<td BGCOLOR="#264276"><FONT COLOR="white">
    		Ligne n°2
    		</td>
    		<td>
    		---
    		</td>
    		<td>
    		G
    		</td>
    		<td>
    		H
    		</td>
    	</tr>
    	<tr align="center">
    		<td BGCOLOR="#264276"><FONT COLOR="white">
    		Ligne n°3
    		</td>
    		<td>
    		---
    		</td>
    		<td>
    		I
    		</td>
    		<td>
    		J
    		</td>
    	</tr>
    	<tr align="center">
    		<td BGCOLOR="#264276"><FONT COLOR="white">
    		<strong>Ligne n°4</strong>
    		</td>
    		<td>
    		K
    		</td>
    		<td>
    		L
    		</td>
    		<td>
    		M
    		</td>
    	</tr>
    	<tr>
     
    	</tr>
    	<tr align="center">
    		<td colspan="3">
    		<strong> Ligne n°5 partielle </strong>
    		</td>
    		<td>
    		N
    		</td>
    	</tr>
    	<tr align="center">
    		<td colspan="3">
    		<strong> Ligne n°6 partielle </strong>
    		</td>
    		<td>
    		O
    		</td>	
    	</tr>
    </table> 
    </body>
    </html>
    Fichiers attachés Fichiers attachés

  2. #2
    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 : 53
    Localisation : France, Gironde (Aquitaine)

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

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut
    Si tu essaye : <table border="0"...> puis <td style="border: 1px solid"> ça devrait donner ce que tu demandes.
    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

  3. #3
    Membre chevronné Avatar de Er3van
    Homme Profil pro
    Architecte Logiciel
    Inscrit en
    Avril 2008
    Messages
    1 430
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Architecte Logiciel
    Secteur : Industrie

    Informations forums :
    Inscription : Avril 2008
    Messages : 1 430
    Points : 2 227
    Points
    2 227
    Par défaut
    La mise en forme des pages Web doit être géré en CSS pour bien séparer les couches.

    Proscit les attribut comme CELLPADDING, CELLSPACING et BORDER, et fais ça via une feuille de style, de préférence externe.

    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    table {
    margin : 0 ;
    padding : 0 ;
    border : 0 ;
    }

    et comme l'a dit Bovino :

    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    td {
    border : 1px solid #000000 ; /* il est préférable de rajouter la couleur de bordure */
    }
    }
    One minute was enough, Tyler said, a person had to work hard for it, but a minute of perfection was worth the effort. A moment was the most you could ever expect from perfection.

    -- Chuck Palahniuk, Fight Club, Chapter 3 --

  4. #4
    Membre habitué
    Profil pro
    Inscrit en
    Novembre 2006
    Messages
    340
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2006
    Messages : 340
    Points : 139
    Points
    139
    Par défaut
    Ok, je "connaissais" l'existence du CSS, en revanche, j'ignorai cette séparation données/style.
    j'ai donc construit ma feuille CSS, en utilisant des balises class, et ça marche nickel.
    Par contre, malgré les padding à 0, il reste un intervalle entre chaque de 1mm d'épaisseur.
    Y a-t-il possibilité de supprimer cet espace, ou à la limite, de faire en sorte de "créer un fond coloré" qui ne remplisse ces espaces ?

  5. #5
    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 : 53
    Localisation : France, Gironde (Aquitaine)

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

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut
    La propriété border-collapse: collapse permet de coller les cellules entre elles
    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

  6. #6
    Membre chevronné Avatar de Er3van
    Homme Profil pro
    Architecte Logiciel
    Inscrit en
    Avril 2008
    Messages
    1 430
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Architecte Logiciel
    Secteur : Industrie

    Informations forums :
    Inscription : Avril 2008
    Messages : 1 430
    Points : 2 227
    Points
    2 227
    Par défaut
    Plus le web se professionnalise et plus il y a des méthodes rigoureuses et plus il y a de séparation de couches...

    Maintenant on en arrive à ça :
    Couche Structure (HTML/XML), Mise en Forme (CSS), Dynamique côté serveur (JS/AJAX), Gestion de Données (AJAX/PHP).

    Et à l'intérieur de la couche Gestion de Données, on arrive vite à passer au MVC qui sépare encore en 3 :
    Modèle (Base de Données, Méthodes), Vues (Saisie, Affichage), Contrôleur(Gestion/Synchronisation des Vues/Modèles)

    Et encore, le MVC peut se décliner en 6 couches...

    Bref, tout ça pour dire que y a un maximum de séparation pour améliorer portabilité, maintenabilité, lisibilité, et ce au détriment de la facilité et de la rapidité (plus on sépare et plus on perd en temps, comme avec la POO, mais avec l'évolution constante des machines, ça compense).
    One minute was enough, Tyler said, a person had to work hard for it, but a minute of perfection was worth the effort. A moment was the most you could ever expect from perfection.

    -- Chuck Palahniuk, Fight Club, Chapter 3 --

Discussions similaires

  1. Ne pas afficher les bordures des tableaux
    Par chlock62 dans le forum NetBeans
    Réponses: 3
    Dernier message: 31/03/2010, 14h48
  2. Réponses: 1
    Dernier message: 13/02/2007, 16h03
  3. Supprimer la bordure autour des images du menu
    Par Strix dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 18/11/2006, 10h25
  4. [html] afficher une page dans une cellule d'un tableau
    Par Tag.51 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 14/06/2006, 13h19
  5. [HTML] Arrondir les bordures d’un tableau
    Par Furius dans le forum Balisage (X)HTML et validation W3C
    Réponses: 12
    Dernier message: 11/01/2006, 08h41

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