Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Converting Tables to DIV & CSS

    I have a rather solid understanding of HTML but no experience with CSS. I have an assignment where I am to recreate the following code by replacing the tables with div's and CSS. Just wondering how I can go about doing this. Thanks.

    <table width="438" border="0" cellpadding="0" style="border: 1px solid #CCCCCC; padding: 10px; margin: 0px 10px 10px 10px; background: url() repeat-x bottom #FFFFFF;">
    <tr>
    <td rowspan="2" width="90" valign="middle" align="center">
    <a href='#'><img src='http://www.redtag.ca/images/hotels/582.jpg' alt='Holiday Inn' style="border: 1px solid #CCCCCC; float: left; margin-right: 3px; padding: 3px; width: 74px; height: 58px;"/></a>
    </td>
    <td colspan="2" valign="bottom">
    <h2 style="font-size: 12px; margin: 0px; padding: 0px;"><a style="font-family: Verdana, Arial, Helvetica, sans-serif; color: #0055AA; font-weight: bold;" href='#'>Calgary to Puerto Vallarta</a> <span style="font: bold 11px Verdana, Arial, Helvetica, sans-serif; color: #666666;">Mexico</span></h2>
    </td>
    </tr>
    <tr>
    <td valign="top">
    <strong><a href='#'>Holiday Inn</a> <img src='http://www.redtag.ca/images/stars/fourstarwhite.jpg' alt='4 star' width='72' height='12' align='absmiddle' /></strong>
    <br />
    <img src="http://www.redtag.ca/images/new-icon.jpg" width="32" height="13" align="absmiddle" /> <a href='#'>Flight Details</a>
    <br />
    All Inclusive | 01 Sep 2011 | 7 Nights
    </td>
    <td valign="top" align="right">
    <span >
    <a style="color: #CA0000; font-size:15px; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif;" href='#'>$348.00</a>
    </span>
    <br />
    taxes: $341.00
    </td>
    </tr>
    </table>
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    First thing I would do is try and figure out how many divs would be needed. YOu can do this by counting the columns and rows.

    Looking at your code it seems like there is three columns with two rows. The rows could be presented in a manner such as the first row could be your "header" section. The columns could be comparable to a 3 column, or div layout.

    I would google 3 column layout with header if I were you. There are tons of good free tutorials online.
    Teed

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,603
    Thanks
    0
    Thanked 645 Times in 635 Posts
    The first thing I would do is to remove all the table related tags.

    Next go through the content and make sure that everything is wrapped in tags that describe what that content is. Only where no alternative tag exists would you wrap something in a div and use the id or class attribute to identify what it is.

    Once you have the HTML describing what all the content is properly you can then start applying CSS to define how the various pieces should look. While doing this you may need to add one or two more divs to work around current browser limitations with CSS. The goal should be to use as few divs as possible as they add no additional information regarding what the content is and so are almost as bad when used unnecessarily as using the wrong tag to misidentify what something is (such as wrapping something that isn't tabular data in a table).
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •