web-dev-qa-db-fra.com

Comment appliquer uniquement un espacement de cellule horizontal à un tableau HTML?

J'ai récemment découvert que j'avais besoin d'utiliser l'attribut cellspacing dans mon tableau, mais je me demandais si je pouvais le faire fonctionner uniquement horizontalement. Je ne veux pas qu'il s'étende verticalement, cela perturbe la mise en page de toute ma page.

htmlhtml-table
20
user1327904

Une meilleure façon de définir cellspacing="10" consiste à utiliser CSS. Vous pouvez utiliser le code CSS suivant pour cibler l'espacement des cellules du tableau.

table {
  border-spacing: 10px 0;
}

La première valeur spécifie l'espacement horizontal et la deuxième valeur spécifie l'espacement vertical.

32
user672118

Si vous avez juste besoin de définir cellule contenus apart, utilisez un espacement à l'intérieur des cellules (et définissez cellspacing=0 en HTML). Ceci est universellement supporté par les navigateurs compatibles CSS.

Si vous avez vraiment besoin de séparer les cellules elles-mêmes, afin qu'il y ait un espacement entre leurs bordures ou leur arrière-plan coloré, alors border-spacing résoudra le problème, mais uniquement en prenant en charge les navigateurs.

Selon le contexte, vous pouvez même envisager de simuler l'espacement des cellules en plaçant le contenu de la cellule dans une variable div, définie pour couvrir la zone de cellule, à l'exception du remplissage souhaité, qui ressemblera alors à l'espacement des cellules. Vous pouvez ensuite définir une bordure ou un arrière-plan souhaité sur ces éléments div.

1
Jukka K. Korpela

Oui, je sais que c’est laide et abominable de séparer le contenu et le style, mais l’ajout de colonnes d'espacement (invisibles) semble être la seule chose qui fonctionne de manière cohérente sur toutes les plateformes.

Ici, j'ai mis des données de table vides dans la première ligne et leur ai donné une largeur (en pixels). J'ai créé les données de table vides correspondantes dans les lignes successives. Cela semble réel old school , mais c'est simple et ça marche.

<table>
    <tr>
        <td>some content for column 1</td>
        <td width="18" />
        <td>other content for 2nd visible column (actually column 3)</td>
        <td width="18" />
        <td>content for 3rd visible column (actually column 5)</td>
    </tr>

    <tr>
        <td><img src="image_for_column 1.png" /></td>
        <td />
        <td><img src="image_for_column 2.png" /></td>
        <td />
        <td><img src="image_for_column 3.png" /></td>
    </tr>

</table>
0
Scott Biggs