Please tweak my html table / css

I am a real noob here - would appreciate some guru assistance.

It seems like my css / html is overly complicated for what I've done - would appreciate any suggestions on how more elegantly to do it.

Questions: How can I get more (i.e. control the) white space between "Houston"/"Bedrooms" rows?  I want Bedrooms/Bathrooms centered vertically and School District aligned with the bottom.

Any other suggestions on making the table look less boring / more readable...

Thanks-
Sam

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>
   THE TITLE
  </title>
  <style>
.property_list
   {
    border: 1px solid black;
   }
   td {
   	font-size: 20px;
   	color:black;
   }
.col_label_l {
	width:100px;
	text-align:left;
}
.col_label_r {
	width:100px;
	text-align:right;
}
.col_value_l {
	width:30px;
	text-align:right;
	padding-right:100px;
}
.col_value_r {
	width:80px;
	text-align:right;
}

  </style>
 </head>
 <body>
  <table class="property_list">
   <tr class="property_list_row">
    <td rowspan="9"><img class="house_thumb" height="200" width="200" src="/photos/598E5545-6C53-E4B6-2234-B4859720173D_hr3212169-1.jpg" /></td>
    <td colspan="2">123 Redwood Dr. </td>
    <td class="col_label_r">Price:</td>
    <td class="col_value_r">$150,900</td>
   </tr>
   <tr>
    <td colspan="2">Houston</td>
    <td class="col_label_r">Option Fee:</td>
    <td class="col_value_r">$10,000</td>
   </tr>
   <tr>
    <td class="col_label_l"></td>
    <td class="col_value_l"></td>
    <td class="col_label_r"></td>
    <td class="col_value_r"></td>
   </tr>
    <tr>
    <td class="col_label_l"></td>
    <td class="col_value_l"></td>
    <td class="col_label_r"></td>
    <td class="col_value_r"></td>
   </tr>
   <tr>
    <td class="col_label_l">Bedrooms:</td>
    <td class="col_value_l">4</td>
    <td class="col_label_r">Rent:</td>
    <td class="col_value_r">$1,250</td>
   </tr>
    <tr>
    <td class="col_label_l">Bathrooms:</td>
    <td class="col_value_l">2</td>
    <td class="col_label_r"></td>
    <td class="col_value_r"></td>
   </tr>
   <tr>
    <td class="col_label_l"></td>
    <td class="col_value_l"></td>
    <td class="col_label_r"></td>
    <td class="col_value_r"></td>
   </tr>
   <tr>
    <td class="col_label_l">School District:</td>
    <td class="col_value_l"><br />12</td>
    <td class="col_label_r">SQFT:<br />Year Built:</td>
    <td class="col_value_r">3,250<br />1966</td>
   </tr>  </table>
 </body>
</html>

Open in new window

SAbboushiAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
Add vertical-align: bottom; to your TD class

Bedrooms/Bathrooms are already vertically centered.


To the TR that contains Houston add this class="city" and the following css
.city td {
    margin-bottom: 10px;
    vertical-align: top;
}
0
SAbboushiAuthor Commented:
>> Bedrooms/Bathrooms are already vertically centered.
Yes but it felt "bogus" to put a row with empty TD elements to position the Bedrooms/Bathrooms row where I wanted... there's got to be a more elegant way!

>> Add vertical-align: bottom; to your TD class
>> city class
Not sure what these are "fixing" - the only change I saw was that the image moved up very slightly...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>
   THE TITLE
  </title>
  <style>
.property_list {
	border: 1px solid black;
}
td {
	font-size: 20px;
  color:black;
}
.col_label_l {
	width:100px;
	text-align:left;
}
.col_label_r {
	width:100px;
	text-align:right;
}
.col_value_l {
	width:30px;
	text-align:right;
	padding-right:100px;
}
.col_value_r {
	width:80px;
	text-align:right;
	padding-right:100px;
}
.city td {
    margin-bottom: 10px;
    vertical-align: top;
}
  </style>
 </head>
 <body>
  <table class="property_list">
   <tr class="property_list_row city">
    <td rowspan="9"><img class="house_thumb" height="200" width="200" src="/photos/598E5545-6C53-E4B6-2234-B4859720173D_hr3212169-1.jpg" /></td>
    <td colspan="2">123 Redwood Dr. </td>
    <td class="col_label_r">Price:</td>
    <td class="col_value_r">$150,900</td>
    <td col_label_l>Clear Lake Area</td>
   </tr>
   <tr>
    <td colspan="2">Houston</td>
    <td class="col_label_r">Option Fee:</td>
    <td class="col_value_r">$10,000</td>
   </tr>
   <tr>
    <td class="col_label_l"></td>
    <td class="col_value_l"></td>
    <td class="col_label_r"></td>
    <td class="col_value_r"></td>
   </tr>
    <tr>
    <td class="col_label_l"></td>
    <td class="col_value_l"></td>
    <td class="col_label_r"></td>
    <td class="col_value_r"></td>
   </tr>
   <tr>
    <td class="col_label_l">Bedrooms:</td>
    <td class="col_value_l">4</td>
    <td class="col_label_r">Rent:</td>
    <td class="col_value_r">$1,250</td>
   </tr>
    <tr>
    <td class="col_label_l">Bathrooms:</td>
    <td class="col_value_l">2</td>
    <td class="col_label_r"></td>
    <td class="col_value_r"></td>
   </tr>
   <tr>
    <td class="col_label_l"></td>
    <td class="col_value_l"></td>
    <td class="col_label_r"></td>
    <td class="col_value_r"></td>
   </tr>
   <tr>
    <td class="col_label_l">School District:</td>
    <td class="col_value_l"><br />12</td>
    <td class="col_label_r">SQFT:<br />Year Built:</td>
    <td class="col_value_r">3,250<br />1966</td>
   </tr>  </table>
 </body>
</html>

Open in new window


Just to make sure I was clear: I want the School District row(s) to shift down so that it is almost touching the border (i.e. same distance as 123 Redwood is from the top border); and I want Bedroom/Bathroom to be centered between them
0
GaryCommented:
Check this
http://jsfiddle.net/GaryC123/Ku8bD/

Is that what you want?
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

SAbboushiAuthor Commented:
Hmmm... what browser are you using?

I'm using Chrome - but I didn't see a change.  You've demonstrated your competence, so I figured something was "not right" - so I loaded that fiddle page in firefox.

In Firefox, the School District row is at the bottom where I want it; but it didn't wrap
the label "School District" on two separate rows as it does in Chrome

Also, in Firefox, Bedrooms row is not centered; it is right above SQFT; and bathrooms is missing

But maybe most relevant is that Firefox doesn't display an empty placeholder/image like Chrome does; I need the text to align with the top and bottom of the image... so can't do that if no (empty) image...
0
GaryCommented:
Ok I thought you wanted School District on one line.
Must have deleted Bathrooms

Bedrooms row is not centered; it is right above SQFT;
I don't know what you mean by this. It is on the left now, I'm not sure where you want it.

http://jsfiddle.net/Ku8bD/3/
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
SAbboushiAuthor Commented:
Thanks - I appreciate all the time and effort!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.