Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

how to add a horizontal line separator between rows in a table

Posted on 2004-08-20
2
Medium Priority
?
1,077 Views
Last Modified: 2010-04-09
Hi,

I am currently using the following line to separate rows in a table:

<tr><td colspan="8" height="0"><hr></td></tr>

My problem is that this row takes up too much vertical space on the page.  In other words, even though I specify a height=0 for the row, the row still seems to take up as much vertical space as a row with text.  I don't want that.  I want the horizontal line to barely add any vertical space to the table, maybe just a little but not the same height as a row with data.  Is there any way to do this?

If anyone uses hotmail online, I like the way my email messages are separated by a horizontal line.  That is somewhat like what I am shooting for.

Thanks in advance,
Dave
0
Comment
Question by:david_m_jacobson
2 Comments
 
LVL 15

Accepted Solution

by:
Colosseo earned 500 total points
ID: 11857799
Hi Dave

I created a sample table to show you how you could perhaps do this

the style="border-bottom:1px solid #000000" adds a line to the bottom of the cells in the first row

1px is the width of the line in pixels
solid is the type of line... you might want to try dashed for example
#000000 is the colour

<table width="300" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td style="border-bottom:1px solid #000000">row 1 col 1</td>
    <td style="border-bottom:1px solid #000000">row 1 col 2</td>
  </tr>
  <tr>
    <td>row 2 col 1</td>
    <td>row 2 col 2</td>
  </tr>
</table>

For your information to add a complete border you can use

style="bottom:1px solid #000000"

or for example a bottom and right border like this

style="border-right:1px solid #000000;border-bottom:1px solid #000000"

You can get more information about borderstyles at

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/borderstyle.asp

HTH

Scott
0
 

Author Comment

by:david_m_jacobson
ID: 11857877
Thanks.  I had to get rid of the cellpadding for it to look like a solid line and I changed the color to #CCCCCC.  I thought I had tried this earlier but I must have had a typo.  Thank you for the help!

Dave
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

783 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question