Designing Roomes rates Tables (show rowspan and colspan).

HTML

<div id="contents">
    <h2>Rooms Rates :</h2>
        <div class="CSSTableGenerator" >
            <table >
                <tr>
                    <td>Room Type</td>
                    <td >Weekdays (RM- nett)</td>
                    <td>Weekends (RM- nett)</td>
                    <td>S/Peak (RM- nett)</td>
                </tr>
                <tr>
                    <td >SUPERIOR</td>
                    <td colspan="3">129.00</td>
                </tr>
                <tr>
                    <td >DELUXE</td>
                    <td rowspan="2">158.00</td>
                    <td rowspan="2" colspan="2">168.00</td>
                    
                </tr>
                <tr>
                    <td >DELUXE SUITE</td>
                </tr>
                <tr>
                    <td >SUPER DELUXE</td>
                    <td>168.00</td>
                    <td>188.00</td>
                    <td>198.00</td>
                </tr>
                <tr>
                    <td >FAMILY SUPERIOR</td>
                    <td>199.00</td>
                    <td>219.00</td>
                    <td>239.00</td>
                </tr>
                <tr>
                    <td >SUPER DELUXE</td>
                    <td>189.00</td>
                    <td>209.00</td>
                    <td>219.00</td>
                </tr>
            </table>
        </div>
        <p>
            ** THE ABOVE RATE ARE INCLUSIVE OF BREAKFAST
        </p>
</div>      

CSS

.CSSTableGenerator 
{
    margin:0px auto;
    width:900px;
    margin-bottom:15px;
    box-shadow: 10px 10px 5px #888888;
    border:1px solid #000000;
    border-radius:5px;
}

.CSSTableGenerator table
{
    border-collapse: collapse;
    width:100%;
    height:100%;
    margin:0px;padding:0px;
}


.CSSTableGenerator tr:nth-child(odd)
{ 
    background-color:#ffffff; 
}

.CSSTableGenerator tr:nth-child(even)   
{ 
    background-color:#D3D3D3;
}
 
 .CSSTableGenerator tr:first-child td
{
        
    background-color:#9370DB;
    border:0px solid #000000;
    text-align:center;
    border-width:0px 0px 1px 1px;
    font-size:14px;
    font-family:Arial;
    font-weight:bold;
    color:#ffffff;
}

 .CSSTableGenerator td
{
    vertical-align:middle;
    border:1px solid #000000;
    border-width:0px 1px 1px 0px;
    text-align:center;
    padding:7px;
    font-size:12px;
    font-family:Arial;
    font-weight:normal;
    color:#000000;
}

Images hover showing the info
HTML

<div id="contents">                     
    <div class="body">
        <h1>Food</h1>
        <ul id="foods">
            <li>
                <h2><a href="foods.html">Food Culture</a></h2>
                <div class="infos">
                    <a href="foods.html"><img src="images/curture_food.jpg" alt="Img" height="169" width="780"><span class="cover"></span></a>
                    <p>
                        <span style="font-style:italic ; font-size:30px;">Satay</span> I'm a product overview. Here you can write more information about your product. Buyers like to know ...
                    </p>
                </div>
            </li>
            <li>
                <h2><a href="foods.html">Sumptuous Desserts</a></h2>
                <div class="infos">
                    <a href="foods.html"><img src="images/desserts.jpg" alt="Img" height="169" width="780"><span class="cover"></span></a>
                    <p>
                        <span style="font-style:italic ; font-size:30px;">Choco Ice Cream Sandwich</span> I'm a product overview. Here you can write more information about your product. Buyers like to know ...
                    </p>
                </div>
            </li>
        </ul>
    </div>
</div>

CSS

#foods li div.infos
 {
    height: 169px;
    width: 780px;
    position: relative;
}

#foods li div.infos p 
{
    background: url(images/bg-foodDetail.png) repeat;
    color: #316e66;
    display: none;
    height: 60px;
    width: 740px;
    padding: 6px 20px 0;
    position: absolute;
    left: 0;
    bottom: 0;
}

#foods li div.infos p span 
{
    display: block;
    font: 22px/22px "Times New Roman";
}

#foods li div.infos:hover span.cover 
{
    background: url(images/bg-foodInfos.png) repeat;
    display: inline-block;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
}

#foods li div.infos:hover p
{
    display: block;
}