HTML Table: Horizontal Lines Only

[davisjw]

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

Thanks in advance!

 

[needlnerdz]

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.

 

[davisjw]

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>

 

[angelwatt]

Something to try,

table {
 border-collapse: collapse;
}
td {
 border-top: 1px solid #000;
 border-bottom: 1px solid #000;
}

 

[astroot]

1px spolid #000; won't get you anywhere

(I know you meant solid.)

And man, that HTML makes my head hurt.

 

[davisjw]

1px spolid #000; won't get you anywhere

(I know you meant solid.)

And man, that HTML makes my head hurt.

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!

 

[davisjw]

Something to try,

table {
 border-collapse: collapse;
}
td {
 border-top: 1px spolid #000;
 border-bottom: 1px spolid #000;
}

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.

 

[memco]

Put it in the head of your HTML like this:

<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.

 

[angelwatt]

1px spolid #000; won't get you anywhere

Doh, thanks for catching that.

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.

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.