Results 1 to 9 of 9
  1. #1
    Join Date
    May 2011
    Location
    California, USA
    Posts
    208

    Question Code Optimization

    Hello, I made a styled table but my code is a bit messy. Could someone please advise me on how to improve it? Thank you!

    Here's my HTML
    Code:
    <!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" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Net Fusion Hosting</title>
    
    <link rel="stylesheet" type="text/css" media="all" href="table.css" />
    
    </head>
    <body>
    <table border="0" cellspacing="0" class="pricing">
        <!-- Header 1 -->
        <tr class="highlight1">
            <th class="seperator">
            </th>
            <th class="seperator">
                <h1>Starter</h1>
            </th>
            <th class="seperator">
                <h1>Regular</h1>
            </th>
        </tr>
        <!-- Header 2 -->
        <tr class="highlight2" id="big" id="seperator">
            <th class="seperator">
                <h1>Choose <span class="blue">your</span> plan</h1>
            </th>
            <th class="seperator">
                <h1 class="large">$<span class="blue">4.95</span></h1>
                <h1 class="small">per month</h1>
            </th>
            <th class="seperator">
                <h1 class="large">$<span class="blue">7.95</span></h1>
                <h1 class="small">per month</h1>
            </th>
        </tr>
        <!-- Row 1 -->
        <tr>
            <td class="cellshade1">
                <p>CONTENT</p>
            </td>
            <td class="cellshade2">
                <p>CONTENT</p>
            </td>
            <td class="cellshade1">
                <p>CONTENT</p>
            </td>
        </tr>
        <!-- Row 2 -->
        <tr>
            <td class="cellshade3">
                <p>CONTENT</p>
            </td>
            <td class="cellshade4">
                <p>CONTENT</p>
            </td>
            <td class="cellshade3">
                <p>CONTENT</p>
            </td>
        </tr>
        <!-- Row 3 -->
        <tr>
            <td class="cellshade1">
                <p>CONTENT</p>
            </td>
            <td class="cellshade2">
                <p>CONTENT</p>
            </td>
            <td class="cellshade1">
                <p>CONTENT</p>
            </td>
        </tr>
        <!-- Row 4 -->
        <tr>
            <td class="cellshade3">
                <p>CONTENT</p>
            </td>
            <td class="cellshade4">
                <p>CONTENT</p>
            </td>
            <td class="cellshade3">
                <p>CONTENT</p>
            </td>
        </tr>
        <!-- Row 5 -->
        <tr>
            <td class="cellshade1">
                <p>CONTENT</p>
            </td>
            <td class="cellshade2">
                <p>CONTENT</p>
            </td>
            <td class="cellshade1">
                <p>CONTENT</p>
            </td>
        </tr>
        <!-- Row 6 -->
        <tr>
            <td class="cellshade3">
                <p>CONTENT</p>
            </td>
            <td class="cellshade4">
                <p>CONTENT</p>
            </td>
            <td class="cellshade3">
                <p>CONTENT</p>
            </td>
        </tr>
        <!-- Sign Up -->
        <tr class="signup">
            <td>
            </td>
            <td>
                <div class="signup_button">
                   <p>Get Started!</p>
                </div>
            </td>
            <td>
                <div class="signup_button">
                    <p>Get Started!</p>
                </div>
            </td>
        </tr>
    </table>
    </body>
    </html>
    And here's my CSS
    Code:
    .pricing p {
        font-family:arial black;
        font-size:18px;
        padding:0;
        margin:0;
    }
    
    .pricing h1 {
        font-family:arial black;
        font-size:22px;
        padding:0;
        margin:0;
    }
    
    .pricing span.blue {
        color:#5CD6FF;
    }
    
    .pricing td, th {
        width:250px;
        text-align:center;
    }
    
    .pricing th {
        color:#B0B0B0;
    }
    
    .pricing td {
        color:#383838;
    }
    
    .pricing tr {
        height:50px;
    }
    
    h1.large {
        font-size:28px !important;
    }
    
    h1.small {
        font-size:12px !important;
    }
    
    #big {
        height:100px;
    }
    
    .seperator {
        border-top:1px solid #505050;
        border-bottom:1px solid #202020;
    }
    
    .highlight1 {
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(117,110,128)),
        color-stop(0, rgb(56,56,56)),
        color-stop(0.75, rgb(61,61,61))
    );
    background-image: -moz-linear-gradient(
        center bottom,
        rgb(117,110,128) 0%,
        rgb(56,56,56) 0%,
        rgb(61,61,61) 75%
    );
    }
    
    .highlight2 {
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(117,110,128)),
        color-stop(0, rgb(36,36,36)),
        color-stop(0.75, rgb(61,61,61))
    );
    background-image: -moz-linear-gradient(
        center bottom,
        rgb(117,110,128) 0%,
        rgb(36,36,36) 0%,
        rgb(61,61,61) 75%
    );
    }
    
    .cellshade1 {
        background-color:#B8B8B8;
    }
    
    .cellshade2 {
        background-color:#C8C8C8;
    }
    
    .cellshade3 {
        background-color:#989898;
    }
    
    .cellshade4 {
        background-color:#A8A8A8;
    }
    
    .signup {
        background-color:#E0E0E0;
        height:70px !important;
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(117,110,128)),
        color-stop(0, rgb(173,173,173)),
        color-stop(0.75, rgb(199,199,199))
    );
    background-image: -moz-linear-gradient(
        center bottom,
        rgb(117,110,128) 0%,
        rgb(173,173,173) 0%,
        rgb(199,199,199) 75%
    );
    }
    
    .signup_button  {
        border:1px solid #989898;
        border-radius:5px;
        width:150px;
        height:40px;
        margin:auto;
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(117,110,128)),
        color-stop(0, rgb(173,173,173)),
        color-stop(0.75, rgb(199,199,199))
    );
    background-image: -moz-linear-gradient(
        center bottom,
        rgb(117,110,128) 0%,
        rgb(173,173,173) 0%,
        rgb(199,199,199) 75%
    );
    }
    
    .signup_button:active {
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(199,199,199)),
        color-stop(0.5, rgb(173,173,173))
    );
    background-image: -moz-linear-gradient(
        center bottom,
        rgb(199,199,199) 0%,
        rgb(173,173,173) 50%
    );
    
    }
    
    .signup_button p {
        line-height:40px;
    }

  2. #2
    You should visit: w3schools.com. If you are interested to improve your designing. Here you will get step by step guidance and new tactics for designing.

  3. #3
    Join Date
    May 2011
    Location
    California, USA
    Posts
    208
    Quote Originally Posted by nancysmith View Post
    You should visit: w3schools.com. If you are interested to improve your designing. Here you will get step by step guidance and new tactics for designing.
    I have read through W3School's tutorials extensively. I just wanted to know if the COMMUNITY had any suggestions to improve it.

  4. #4
    Join Date
    May 2011
    Location
    UT,US
    Posts
    204
    I think it looks good. Unless you are looking for additional functionality, I think it will do the job nicely. What do you think is messy about it?

  5. #5
    Quote Originally Posted by nancysmith View Post
    You should visit: w3schools.com. If you are interested to improve your designing. Here you will get step by step guidance and new tactics for designing.
    Whilst an okay starting point, not everyone agrees that it should be used to learn markup at all. The best option in my opinion is to buy a good book.

    Quote Originally Posted by ryansworld10 View Post
    I have read through W3School's tutorials extensively. I just wanted to know if the COMMUNITY had any suggestions to improve it.
    - Remove multiple ID attributes.
    - Incorrect use of tables and table headings, change to DIV for structural layout. Designs should be linear when CSS is turned off
    - Incorrect use of H* tags, check semantics of heading hierarchy

    Quote Originally Posted by T-Junk View Post
    I think it looks good. Unless you are looking for additional functionality, I think it will do the job nicely. What do you think is messy about it?
    Tables for layout will create a whole host of problems for people using different devices, for example screen readers.
    ServeYourSite
    Web hosting done right
    ██ Shared, Reseller and Dedicated web hosting
    An Easy Web Presence Company

  6. #6
    Join Date
    May 2011
    Location
    California, USA
    Posts
    208
    Quote Originally Posted by stripeyteapot View Post
    Whilst an okay starting point, not everyone agrees that it should be used to learn markup at all. The best option in my opinion is to buy a good book.



    - Remove multiple ID attributes.
    - Incorrect use of tables and table headings, change to DIV for structural layout. Designs should be linear when CSS is turned off
    - Incorrect use of H* tags, check semantics of heading hierarchy



    Tables for layout will create a whole host of problems for people using different devices, for example screen readers.
    I think you should have looked at what this actually is, as this is a pricing table. Perfectly Legitimate use of tables.

    And thanks to the other replies. It seemed messy to me because it is the first time I have really had a use for tables and with all the design elements I was trying, the CSS just started to look extremely cluttered (especially with all the !important's I had to use) But thank you!

  7. #7
    Ah so it is, a little oversight on my part - I was fooled by the paragraph tags saying "CONTENT" - As opposed to data or feature. That said you may want to define THEAD, TBODY and TFOOT to structure the table. Even so it still stands that the H* tag hierarchy is poorly formed. If you have a page title for example, your H1 might be "Compare Shared Web Hosting Packages". Therefore making your table titles H2 and H3 etc.
    ServeYourSite
    Web hosting done right
    ██ Shared, Reseller and Dedicated web hosting
    An Easy Web Presence Company

  8. #8
    Well for starters I see a lot of table tags.

  9. #9
    Join Date
    May 2011
    Location
    California, USA
    Posts
    208
    Quote Originally Posted by Zoom Active View Post
    Well for starters I see a lot of table tags.
    Well it IS a table...

Similar Threads

  1. Advance Onpage Optimization Service - PRO Optimization
    By Extremeseo in forum SEO Job Offers
    Replies: 0
    Last Post: 01-31-2011, 07:36 AM
  2. MySQL optimization, my.cnf optimization, MySQL from RAM
    By zoli in forum Hosting Software and Control Panels
    Replies: 0
    Last Post: 09-30-2010, 05:18 PM
  3. Invalid response code received from server code: 451,
    By xserverx in forum Hosting Security and Technology
    Replies: 5
    Last Post: 07-17-2007, 05:40 AM
  4. Replies: 0
    Last Post: 07-25-2006, 03:25 AM
  5. Optimization and Code Questions
    By devanium in forum Programming Discussion
    Replies: 4
    Last Post: 03-08-2005, 06:00 PM

Posting Permissions

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