03 Nested Tables

HTML Tables homework - task03

HTML

<div class="forecast-parameters right">
    <table class="forecas-content">
        <tr>
            <td><div>Forecast</div></td>
        <td>
            <table class="forecast-table">
                <tr>
                    <td>IMAGE</td>
                </tr>
                <tr>
                    <td>
                        <div class="forecast-day-wrapper">
                            <div class="forecast-content-wrapper">
                                <img src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" width="100"/>
                                 <p class="forecast-day-name-wrapper">IMAGE</p>
                                 <p class="forecast-temperature-wrapper">12</p>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>IMAGE</td>
                </tr>
            </table>
        </td>
    </tr>
 </table>
</div>

CSS

html{    
    font-family: Arial, Helvetica, sans-serif;
    font-size:64px; 
}

table{
    margin: 0 0;
}
th, td{
    margin: 0px 0px;
    padding-right: 20px;
}

.current-temperature {
     font-size: 146px;
    line-height: 170px;
}

.current-temperature-celsius {
    font-size: 44px; 
    margin: 0px 0px;
    padding: 0px 0px;
    width: auto;
    line-height: 70px;
    display: block;
    float: left;
}

.sub-celsius {
     font-size: 30px;
    top: -20px;
    display: block;
    float: left;
}

.conditions {
    margin-top: 0px;
     font-size: 40px;
    border: 1px #444 solid;
}

.parameters-table {
     font-size: 30px;   
}

.parameters-table > tbody > tr > td {
     margin-bottom: 15px;   
}

.right {
    float: right;

}

.left {
     float: left;   
}

.forecast-day-wrapper {
    background-image: url(http://st.houzz.com/simgs/be51aafa0223845c_4-8285/traditional-clocks.jpg);
    height: 200px;
    width: 200px;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    
}

.forecast-content-wrapper {
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 200px;
}

.forecast-day-name-wrapper {
    font-size: 20px;
    margin-bottom: 0px;
}

.forecast-temperature-wrapper {
     font-size: 20px; 
    margin-top: 0px;
}
.imydz {
     display: block;   
}
.forecast-title-wrapper {
    float: left;
    display: block;
}
}