HTML/CSS - Snake Game | pocket edition🐍 Online Editor and JavaScript Compiler

html

<!-- Created by YCS VENOM -->
<!-- Created by Oceanlight -->
<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
</head>
<body id="Bodys">
    <!-- add this to body tag to disable scrolling:
    scroll="no" style="overflow: hidden" -->
        <table id=Table>
        <tr>
            <th>
                <canvas id="canvas" width="370" height="300" ></canvas>
            </th>
        </tr>
        <tr>
            <th>
                <button id="up" onclick="up()" style="margin-bottom:20px">Up</button><br />
                <button class="first" id="left" onclick="left()" style="margin-right:0px">Left</button>
                <img class="mid" src="https://1.bp.blogspot.com/-qqUxJnW2wKQ/XgIuj7jr20I/AAAAAAAAADY/0uGsP72a6ngSUPjOrxGImH3qEtaG9jkGgCLcBGAsYHQ/s1600/VenomOcean.png" width="200px">
                <button class="last" id="right" onclick="right()" style="margin-left:0px">Right</button><br />
            </th>
        </tr>
        <tr>
            <th>

css

/* Created by YCS VENOM */
/* Created by Oceanlight */
body {
    text-align:center;
}
button {
    width:70px;
    height:50px;
    background-color: #050cef;
    border-radius:10px;
    color:#FFFFFF;
    text-align: center;
    font-size: 17px;
}
button {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
p {
   font-size:20px;
   font-family: fantasy;
   margin:0px;
}
table {
    border:solid 10px black;
    border-radius:30px;
    padding:10px;

BROWSER

Console