Solved

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

Posted on 2004-08-20
2
1,059 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 15

Accepted Solution

by:
Colosseo earned 125 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

Enroll in July's Course of the Month

July's Course of the Month is now available! Enroll to learn HTML5 and prepare for certification. It's free for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

632 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