How to Separate table rows with a line

Question

I have a basic HTML table which contains table rows  My goal is to separate those table rows with a visible line  for better readability of the content    How could I do this

User · Answer

You have to use CSS   In my opinion when you have a table often it is good with a separate line each side of the line   Try this code   HTML    lt table gt       lt tr class  row  gt  lt td gt row 1 lt  td gt  lt  tr gt       lt tr class  row  gt  lt td gt row 2 lt  td gt  lt  tr gt   lt  table gt    CSS    row       border 1px solid black       Bye  Andrea

User · Answer

HTML   lt table cellspacing  0  gt     lt tr class  top bottom row  gt       lt td gt one one lt  td gt       lt td gt one two lt  td gt     lt  tr gt     lt tr class  top bottom row  gt       lt td gt two one lt  td gt       lt td gt two two lt  td gt     lt  tr gt     lt tr class  top bottom row  gt       lt td gt three one lt  td gt       lt td gt three two lt  td gt     lt  tr gt    lt  table gt     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       DEMO

User · Answer

Set colspan to your number of columns  and background color as you wish   lt tr style  background   aaa   gt    lt td colspan  2  gt  lt  td gt   lt  tr gt

User · Answer

You could use the border-bottom css property    x000D   x000D  table   x000D    border-collapse  collapse  x000D    x000D   x000D  table tr   x000D    border-bottom  1px solid black  x000D    x000D   x000D  table tr last-child   x000D    border  0  x000D    x000D   lt table gt  x000D     lt tr gt  x000D       lt td gt 1 lt  td gt  x000D       lt td gt Foo lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt 2 lt  td gt  x000D       lt td gt Bar lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

Just style the border of the rows    table tr       border-bottom  1px solid black      table tr last-child        border-bottom  none       Here is a fiddle   Edited as mentioned by  pkyeck  The second style avoids the line under the last row  Maybe you are looking for this

User · Answer

If you don t want to use CSS try this one between your rows        lt tr gt       lt td class  divider  gt  lt hr   gt  lt  td gt       lt  tr gt    Cheers

User · Answer

Style the row-element with css   border-bottom  1px solid black

User · Answer

There are several ways to do that  Using HTML alone  you can write   lt table border 1 frame void rules rows gt    or  if you want a border above the first row and below the last row too    lt table border 1 frame hsides rules rows gt    This is rather inflexible  though  you cannot e g  make the lines dotted this way  or thicker than one pixel  This is why in the past people used special separator rows  consisting of nothing but some content intended to produce a line  it gets somewhat dirty  especially when you need to make rows e g  just a few pixels high  but it   s possible    For the most of it  people nowadays use CSS border properties for the purpose  It   s fairly simple and cross-browser  But note that to make the lines continuous  you need to prevent spacing between cells  using either the cellspacing 0 attribute in the table tag or the CSS rule table   border-collapse  collapse     Removing such spacing may necessitate adding some padding  with CSS  preferably  inside the cells   At the simplest  you could use   lt style gt  table     border-collapse  collapse    tr      border  solid    border-width  1px 0     lt  style gt    This puts a border above the first row and below the last row too  To prevent that  add e g  the following into the style sheet   tr first-child     border-top  none    tr last-child     border-bottom  none

[html] How to: "Separate table rows with a line"

Examples related to html

Examples related to html-table