• HTML
• CSS
• JS

HTML

<center>
    <div class="contenedor">
        <form>
            <table>
                <tr>
                    <td colspan="4"><input class="text" name="display" id="campodetexto" type="text" value=""></td>
                </tr>    
                <tr>
                    <td><input class="columna1" id="7" type="button" value="7" onClick="addChar(this.form.display, '7')"></td>
                    <td><input class="columna1" id="8" type="button" value="8" onClick="addChar(this.form.display, '8')"></td>
                    <td><input class="columna1" id="9" type="button" value="9" onClick="addChar(this.form.display, '9')"></td>
                    <td><input class="columna2" id="suma" type="button" value="+" onClick="addChar(this.form.display, '+')"></td>
                </tr>
                <tr>
                    <td><input class="columna1" id="4" type="button" value="4" onClick="addChar(this.form.display, '4')"></td>
                    <td><input class="columna1" id="5" type="button" value="5" onClick="addChar(this.form.display, '5')"></td>
                    <td><input class="columna1" id="6" type="button" value="6" onClick="addChar(this.form.display, '6')"></td>
                    <td><input class="columna2" id="resta" type="button" value="-" onClick="addChar(this.form.display, '-')"></td>
                </tr> 
                <tr>
                    <td><input class="columna1" id="1" type="button" value="1" onClick="addChar(this.form.display, '1')"></td>
                    <td><input class="columna1" id="2" type="button" value="2" onClick="addChar(this.form.display, '2')"></td>
                    <td><input class="columna1" id="3" type="button" value="3" onClick="addChar(this.form.display, '3')"></td>
                    <td><input class="columna2" id="multiplicacion" type="button" value="*" onClick="addChar(this.form.display, '*')"></td>
                </tr>  
                <tr>
                    <td><input class="columna1" id="clear" type="button" value="CE" onClick="this.form.display.value = 0 "></td>
                    <td><input class="columna1" id="0" type="button" value="0" onClick="addChar(this.form.display, '0')"></td>
                    <td><input class="columna1" id="equals" type="button" value="=" onClick="if (checkNum(this.form.display.value))
                                                                                                      { compute(this.form) }"></td>
                    <td><input class="columna2" id="division" type="button" value="/" onClick="addChar(this.form.display, '/')"></td>
                </tr>
            </table>
        </form>
    </div>
</center>

CSS

*{
	margin: 0px;
	padding: 0px;
}
.contenedor{
	position: relative;
	top:40px;
}
.text{
	font-size: 30px;
	font-family: Arial,Helvetica;
	color: white;
	border: 0px;
	background: #808080;
	width: 325.8px;
	height: 80px;
}
.columna1{
	font-size: 30px;
	font-family: Arial,Helvetica;
	color: white;
	border: 0px;
	background: #1E90FF;
	width: 80px;
	height: 80px;
}
.columna2{
	font-size: 30px;
	font-family: Arial,Helvetica;
	color: white;
	border: 0px;
	background: #00BFFF;
	width: 80px;
	height: 80px;
}

JS

function addChar(input, character)
{
    if(input.value == null || input.value == "0")
        input.value = character
    else
        input.value += character
}
function deleteChar(input)
{
    input.value = input.value.substring(0, input.value.length - 1)
}
function changeSign(input)
{
    if(input.value.substring(0, 1) == "-")
        input.value = input.value.substring(1, input.value.length)
    else
        input.value = "-" + input.value
}
function compute(form) 
{
    form.display.value = eval(form.display.value)
}
function square(form) 
{
    form.display.value = eval(form.display.value) * eval(form.display.value)
}
function checkNum(str) 
{
    for (var i = 0; i < str.length; i++) {
        var ch = str.substring(i, i+1)
        if (ch < "0" || ch > "9") {
            if (ch != "/" && ch != "*" && ch != "+" && ch != "-" && ch != "(" && ch!= ")") {
                alert("invalid entry!")
                return false
            }
            
        }
        
    }
    return true
}