06-Keyboard

HTML Tables homework - task 06

by Polina Petrova

HTML

<table>
        <colgroup>
            <col />
            <col />
            <col />
            <col />
        </colgroup>
        <thead>
            <tr>
                <th colspan="4">
                    <input type="button" value="SOFTWARE UNIVERSITY" class="big-font">
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="2" height="100">
                    <input type="button" value="GOOGLE" class="normal-font">
                </td>
                <td colspan="2">
                    <input type="button" value="GitHub" class="normal-font">
                </td>
            </tr>
            <tr>
                <td height="100">
                    <input type="button" value="Facebook" class="normal-font">
                </td>
                <td>
                    <input type="button" value="GMail" class="normal-font">
                </td>
                <td>
                    <input type="button" value="YouTube" class="normal-font">
                </td>
                <td>
                    <input type="button" value="2048" class="normal-font">
                </td>
            </tr>
            <tr>
                <td height="100">
                    <input type="button" value="Food" class="normal-font">
                </td>
                <td colspan="2">
                    <input type="button" value="Game" class="normal-font">
                </td>
                <td>
                    <table>
                        <tr>
                            <td>
                                <input type="button" value="Social Life" class="small-font">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="button" value="Sleep" class="small-font">
                            </td>
                        </tr>
                    </table>
               ...

CSS

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

table{
    margin: 0 auto;     
    border:1px solid #000;   
    border-spacing: 2px;
    border-collapse: separate;        
}
input{
    color:blue;
    width:100%;
    height:100px;    
}
col{
    width:110px;
}
th, td{
    border-collapse:separate;
    border:1px solid #000;   
    padding:5px;
}
td table,
td table tr td {
    border:none;
    padding:0;
    margin:0;
    width:100%;
}
td table tr td input{
    height:45px;    
}
td table tr td input:first-of-type{
    margin-bottom:5px;   
}
.big-font{
    font-size:28px;  
    font-weight:bold;  
}
.normal-font{
    font-size:20px;      
}
.small-font{
    font-size:12px;      
}