We help IT Professionals succeed at work.

Tableless CSS Conversion

sunseshasai
sunseshasai asked
on
342 Views
Last Modified: 2012-06-27
Hello,

I have the following code, written in old fashioned way. Now I want to convert this into tableless CSS design.

This table has 3 columns in it. I want the content in first two columns left aligned and the third column right aligned.

Also the content in every row needs to be vertically center aligned.

I tried with CSS using div and span, but didn't get exactly what i want.
Please send the css code if possible.

Thanks.


<html>
<head>
<title>Title</title>
<style type="text/css">
A:link, A:visited, A:active, A:hover {color: #0000ff; text-decoration: underline; font-size: 11px;}
body{color: #000000; font-family:  Verdana, Helvetica, Arial, sans-serif;}
</style>
</head>
<body>

<table width=45% cellspacing=0 cellpadding=0 height=23 align=center>

<tr><td colspan=3 height=2 ><img src=spacer.gif width=1 height=25></td></tr>
<tr>
<td rowspan=2 valign=top height=20><input type=checkbox value=12942 name=pick></td>
<td width=65% valign=top height=15><a href='' onclick='showbook(12942);return false;'>Lord of the Rings</a></td>
<td rowspan=2 valign=top><a href='' onClick='sendmail(12942);return false;'><img src=mail.gif width=15 border=0

height=10></a> Read More</td>
</tr>
<tr>
<td height=2>Author: ABC DEF<br>ISBN: 12345</td>
</tr>


<tr><td colspan=3 height=2 ><img src=spacer.gif width=1 height=25></td></tr>
<tr>
<td rowspan=2 valign=top height=20><input type=checkbox value=12942 name=pick></td>
<td width=65% valign=top height=15><a href='' onclick='showbook(12942);return false;'>Lord of the Rings</a></td>
<td rowspan=2 valign=top><a href='' onClick='sendmail(12942);return false;'><img src=mail.gif width=15 border=0

height=10></a> Read More</td>
</tr>
<tr>
<td height=2>Author: ABC DEF<br>ISBN: 12345</td>
</tr>



</table>

</body>
</html>
Comment
Watch Question

Commented:
The one catch is that if you have content of variable height and you don't know the max height, then you can't easily get the same layout you would with a table with having everything vertically centered.

If you have a fixed height for each row then this is possible relatively easily...

Author

Commented:
Yes. In my case the height of each row is fixed height (as the checkbox, image heights all are constant). Please let me know how to do this. Thanks.
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Commented:
This gives the same look that your table gave.

Commented:
C grades are given "if the answers, after clarification, lack finality or do not completely address the issue presented"

I think this completely addressed your issue.  You did not ask for further changes.  Therefore, Why a C grade?

Author

Commented:
Hello Sir,
Your help was great, but didn't give exactly what I want. The issues as follows

1.  <img src=spacer.gif width=1 height=25> This code was not accounted in the CSS. So there was zero space in between rows.
2. The reason for changing to CSS is to optimize the code (reduce the page size) as much as possible. But I felt the code sent by you is little longer.
3. My other request was to "the content in every row needs to be vertically center aligned" (it's not in original design). But somehow the checkbox and title are not vertically aligned to middle.

I was able to resolve the first two issues by talking to others. Seems like 3rd issue is tough to resolve.
But your code helped me to start.

At this point i am not sure how to change the grade. Let me know if you know. I will upgrade it.
Thanks for your help.

Commented:
Again I mention that you did not ask for further clarification or assistance.

You specifically asked "I have the following code, written in old fashioned way. Now I want to convert this into tableless CSS design."

For #1 there should not be a spacer row to do this.  You simply increase the margin (top or bottom as desired) as needed on the "Row" class.

For #2 You did not ask for shorter code.  You asked for a tableless design.  Also the code I wrote is not longer, I just spaced it out across lines.  If you remove spacing it looks shorter like this:

<body>
<div class="Table">
<div class="Row"><div class="Checkbox"><input type="checkbox" value="12942" name="pick" /></div><div class="ReadMore"><a href="javascript:;" onclick="sendmail(12942);"><img alt="mail" class="MailImage" src="mail.gif" />Read More</a></div><div class="Entry"><a href="javascript:;" onclick="showbook(12942);">Lord of the Rings</a><br />Author: ABC DEF<br />ISBN: 12345</div>
</div>
<div class="Row"><div class="Checkbox"><input type="checkbox" value="12942" name="pick" /></div><div class="ReadMore"><a href="javascript:;" onclick="sendmail(12942);"><img alt="mail" class="MailImage" src="mail.gif" />Read More</a></div><div class="Entry"><a href="javascript:;" onclick="showbook(12942);">Lord of the Rings</a><br />Author: ABC DEF<br />ISBN: 12345</div>
</div>
</div>
</body>

But I thought readability was more important.  Spaces would be required in your table code as well if it were to go into production where I work.

#3 This is easy to resolve, but again, you did not mention that it was missed, nor give me a chance to help futher.  You simply gave a bad grade with no comments.  This leads experts such as myself less willing to work with you further on details - even beyond those initially specified - since you were unresponsive and then gave a bad grade.


You can request a grade change here:
https://www.experts-exchange.com/Community_Support/General/


As a final note, I went above and beyond here in not only asnwering your question, but giving you much cleaner valid code (which yours is not).  If you want people to give extra effort like this, then you need to be responsive and comment on their suggestions.

Author

Commented:
I changed the grade to A :)

Please let me know how to resolve issue#3.

Thanks.

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.