Comment: “Séparer les lignes de la table avec une ligne”

J'ai une base de tableau HTML qui contient des lignes de la table. Mon but est de séparer les lignes de la table avec une ligne visible (pour une meilleure lisibilité du contenu).

Comment pourrais-je faire cela?

InformationsquelleAutor Miloš | 2012-11-29

html html-table

55

Il y a plusieurs façons de le faire. En utilisant le HTML seul, vous pouvez écrire
```
<table border=1 frame=void rules=rows>
```
ou, si vous voulez une bordure au-dessus de la première ligne et en dessous de la dernière ligne trop,
```
<table border=1 frame=hsides rules=rows>
```
C'est plutôt rigide, bien; vous ne pouvez pas par exemple faire en sorte que les lignes en pointillés de cette façon, ou plus épais que d'un pixel. C'est pourquoi, dans le passé, les gens spéciaux utilisés séparateur de lignes, composé de rien, mais certains contenus destinés à produire une ligne (il devient un peu sale, en particulier lorsque vous avez besoin de faire des lignes par exemple, juste quelques pixels de haut, mais c'est possible).

Pour la plupart, les gens aujourd'hui, l'utilisation de CSS border propriétés de l'objet. Il est assez simple et cross-browser. Mais notez que les lignes en continu, vous devez empêcher l'espacement entre les cellules, en utilisant soit le cellspacing=0 attribut dans la table balise ou la règle CSS table { border-collapse: collapse; }. La suppression de ces espacement peut nécessiter l'ajout de certains remplissage (avec CSS, de préférence) à l'intérieur de les cellules.

Au plus simple, vous pouvez utiliser
```
<style>
table {
  border-collapse: collapse;
}
tr { 
  border: solid;
  border-width: 1px 0;
}
</style>
```
Cela met une bordure au-dessus de la première ligne et en dessous de la dernière ligne trop. Pour éviter cela, il faut ajouter par exemple la ligne suivante dans la feuille de style:
```
tr:first-child {
  border-top: none;
}
tr:last-child {
  border-bottom: none;
}
```
InformationsquelleAutor Jukka K. Korpela
12

Juste le style de la bordure de l'lignes:
```
table tr {
    border-bottom: 1px solid black;
}

table tr:last-child { 
    border-bottom: none; 
}
```
Ici est un violon.

Modifié comme indiqué par @pkyeck. Le deuxième style évite la ligne en dessous de la dernière ligne. Peut-être que vous êtes à la recherche pour cela.
- peut-être ajouter un table tr:last-child { border-bottom: none; } pour éviter que la dernière <tr> est souligné
- Merci, mais où mettre ce style? Dans le css ? Je suis en train d'essayer mais rien ne change.
InformationsquelleAutor cem

Vous pouvez utiliser le border-bottom propriété css.

CSS:

table {
  border-collapse: collapse;
}

table tr {
  border-bottom: 1px solid black;
}

table tr:last-child {
  border: 0;
}

HTML:

<table>
  <tr>
    <td>1</td>
    <td>Foo</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Bar</td>
  </tr>
</table>

InformationsquelleAutor Bruno

HTML

<table cellspacing="0">
  <tr class="top bottom row">
    <td>one one</td>
    <td>one two</td>
  </tr>
  <tr class="top bottom row">
    <td>two one</td>
    <td>two two</td>
  </tr>
  <tr class="top bottom row">
    <td>three one</td>
    <td>three two</td>
  </tr>

</table>

CSS:

tr.top td { border-top: thin solid black; }
tr.bottom td { border-bottom: thin solid black; }
tr.row td:first-child { border-left: thin solid black; }
tr.row td:last-child { border-right: thin solid black; }

DÉMO

InformationsquelleAutor chridam

2

Style de la ligne de l'élément avec les css:
```
border-bottom: 1px solid black;
```
- Merci, mais où mettre ce style? Dans le css ? Je suis en train d'essayer mais rien ne change.
InformationsquelleAutor looper
2

Vous devez utiliser les CSS.

À mon avis, quand vous avez un tableau, souvent, il est bon avec une ligne distincte de chaque côté de la ligne.

Essayez ce code:

HTML:
```
<table>
    <tr class="row"><td>row 1</td></tr>
    <tr class="row"><td>row 2</td></tr>
</table>
```
CSS:
```
.row {
    border:1px solid black; 
}
```
Bye

Andrea
- Merci, mais où mettre ce style? Dans le css ? Je suis en train d'essayer mais rien ne change.
- Le style est un style CSS de sorte que vous pouvez faire deux chose différente pour insérer une feuille de style CSS à l'intérieur de votre page HTML: 1) à l'Aide de feuilles de style CSS intégré: Vous devez ajouter à votre style à l'intérieur de la tête de votre Page HTML...quelque chose comme ça: <html> <head> <title>Inserire j'feuilles di stile de l'onu documento</title> <style type="text/css"> .ligne { border:1px solid black; } </style> </head> <body> <table> <tr class="row"><td>ligne 1</td></tr> <tr class="row"><td>ligne 2</td></tr> </table> </body>
- 2) à l'Aide de CSS externe: quelque Chose comme: <html> <head> <title>Inserire j'feuilles di stile de l'onu documento</title> <link type="text/css" href="style.css"> </head> <body> Vous devez créer un autre style.css (que vous êtes en liaison int votre fichier html à l'aide de la balise de lien) du fichier qui contient le code: .ligne { border:1px solid black; } Cette solution est mieux parce que si vous avez beaucoup de style à votre page, vous êtes en séparant le code HTML à partir de la feuille de Style CSS code...vous êtes la séparation de la mise en page dans le style...tout est bien clair
- Je vous suggère de lire le contenu HTML\CSS guide de développement car c'est la base de l'argument 🙂
- J'ai besoin d'ajouter cellspacing = 0 dans les propriétés de la table pour obtenir que cela fonctionne.
InformationsquelleAutor AndreaNobili
0

Si vous ne voulez pas utiliser de CSS essayer celui-ci entre vos lignes:
```
    <tr>
    <td class="divider"><hr /></td>
    </tr>
```
Cheers!!

InformationsquelleAutor EL.ALEX78UK

Vous devez vous connecter pour publier un commentaire.