HTML Table: Horizontal Lines Only

Discussion in 'Web Design and Development' started by davisjw, Feb 18, 2010.

  1. davisjw macrumors regular

    davisjw

    Joined:
    Jul 28, 2006
    Location:
    Richmond, Va
    #1
    I'm creating a web page and have used a Table to separate my items. I have images running down the left and captions running down the right.

    My problem is this: I want to create horizontal lines to separate each row. However, I can't seem to find a way to show only the horizontal lines. I figured out how to show horizontal and vertical, I have tried <BR>s and the like but they won't place inside the Table.

    Does anyone know a solution? As you may tell, I am a novice :D

    Thanks in advance!
     
  2. needlnerdz macrumors regular

    needlnerdz

    Joined:
    Jun 10, 2006
    Location:
    switzerland
    #2
    embrace the power of CSS - google advice on converting from tables to div's and CSS... nevertheless if you set on using tables, then you could likely just add a class identifier to everything.. add something like

    class="table_line" <- inside of each TR or TD tag.. don't quite remember which should be done..

    and then somewhere in the HEAD section of the page at the top:

    <style type="text/css" media="all">
    .table_line {border-bottom:1px solid #000;}
    </style>

    if none of that made sense.. then do a search for beginners guide to css - there will be plenty and it's a must know as you go further in webpage design.
     
  3. davisjw thread starter macrumors regular

    davisjw

    Joined:
    Jul 28, 2006
    Location:
    Richmond, Va
    #3
    Thank you for your reply and I will try that!

    Here's the coding I have so far:

    <table style="height: 379px;" border="0" width="477;" rowsep="10">
    <tbody>
    <tr>
    <td><img class="size-full wp-image-894 alignnone" title="Westminster - Web Case Study" src="http://xxxxxxx.com/wp_content673/uploads/Westminster-Web-Case-Study.jpg" alt="Westminster Canterbury" width="184" height="138" /></td>
    <td style="padding-left: 11px;">
    <h3><strong>Westminster Canterbury</strong></h3>
    <em>Green Energy Solutions</em>

    How do you have energy efficient equipment installed while residents are napping next door?

    <a href="http://xxxxxxx/wp_content673/uploads/westminster-case-study2.pdf">Westminster Case Study</a><em>
    </em></td>
    <td></td>
    </tr>
    <tr>
    <td><img class="size-full wp-image-895 alignnone" title="Renaissance - Web Case Study" src="http://xxxxxxx.com/wp_content673/uploads/Renaissance-Web-Case-Study.jpg" alt="Renaissance Apartments" width="184" height="138" /></td>
    <td style="padding-left: 11px;">
    <h3><strong>Renaissance Apartments</strong></h3>
    <em>Green Energy Solutions</em>

    How do you discover energy efficient opportunities for your facility when you are not initially considering them?

    <a href="http://xxxxxx.com/wp_content673/uploads/renaissance-case-study2.pdf">Renaissance Case Study</a><em>
    </em>

    <em> </em></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    </tbody></table>
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    Something to try,
    Code:
    table {
     border-collapse: collapse;
    }
    td {
     border-top: 1px solid #000;
     border-bottom: 1px solid #000;
    }
     
  5. astroot macrumors regular

    Joined:
    Nov 12, 2009
    #5
    1px spolid #000; won't get you anywhere :)

    (I know you meant solid.)

    And man, that HTML makes my head hurt.
     
  6. davisjw thread starter macrumors regular

    davisjw

    Joined:
    Jul 28, 2006
    Location:
    Richmond, Va
    #6
    Sorry it's not formatted nicely, was doing it quite quickly. We're using a content system and they've asked me to format it better - only problem is the content system has built in formats that I have to work around.

    I'll try the above solution - thanks again for your help!
     
  7. davisjw thread starter macrumors regular

    davisjw

    Joined:
    Jul 28, 2006
    Location:
    Richmond, Va
    #7
    OK - Dumber question time: Where do I put it? When I tried inserting it into my code, it only popped up as though it were text (so showed table {, tec) on the website.
     
  8. memco macrumors 6502

    Joined:
    May 1, 2008
    #8
    Put it in the head of your HTML like this:

    Code:
    <style type="text/css">
    table {
     border-collapse: collapse;
    }
    td {
     border-top: 1px spolid #000;
     border-bottom: 1px spolid #000;
    }
    </style>
    
    Also, check out this sitepoint article on styling tables for some more ways you can add style to your tables.
     
  9. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #9
    Doh, thanks for catching that.
    Memco looks to have this covered. To help you learn some of these basics, I'll point you to the W3C School web site, which has easy to follow pages. Learning the basic HTML structure will help you a lot down the road.
     

Share This Page