05 Life at SoftUni

HTML Tables homework - task 05

by Polina Petrova

HTML

<table>
        <colgroup>
            <col />
            <col />
            <col />
            <col />
        </colgroup>        
        <thead>
            <tr>
                <th colspan="4"><h1>SoftUni LIFE</h1></th>
            </tr>            
        </thead>        
        <tbody>
            <tr>
                <td colspan="2" valign="top" height="100">Google</td>
                <td colspan="2" valign="top" align="right">GitHub</td>
            </tr>
            <tr>
                <td valign="top" height="100" align="center">FB</td>
                <td valign="middle" align="center">Gmail</td>
                <td valign="bottom" align="center">YouTube</td>
                <td valign="middle" align="center">2048</td>
            </tr>
            <tr>
                <td height="100" valign="bottom" align="right">Food</td>
                <td colspan="2" valign="bottom" align="left">Game</td>
                <td>
                    <table>
                        <tr><th height="50">Social Life</th></tr>
                        <tr><th height="50">Sleep</th></tr>
                    </table>
                </td>                
            </tr>
            <tr>
                <td colspan="3" height="100" class="big-font">Beer &gt;</td>
                <td>WC</td>                
            </tr>
        </tbody>
    </table>

CSS

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

table{
    margin: 0 auto;     
    border:1px solid #000;   
    border-spacing: 2px;
    border-collapse: separate;        
}
col{
    width:110px;
}
th, td{
    border-collapse:separate;
    border:1px solid #000;   
    padding:5px;
}
td table tr th {
    font-size:12px; 
    padding:0.5em 1em;
}
.big-font{
    font-size:36px;
    text-align:right;
}