Multiply

<!--Shavit Borisov-->
<!--25.12.14-->
<!--http://pastebin.com/5dELdETw-->

<!DOCTYPE html>
<html style="direction: rtl">
    <head>

        <meta charset="UTF-8">
        <title>Multiplication Table</title>

        <style type="text/css">
            #header {color: brown}
            #date {color: green}
            #mainDiv {float:right; margin: 3px 80px; padding-right: 10px; width:25em; height:35em; border: 3px solid brown}
            label {color: brown}
            #tableDiv {float:right; margin: 3px 95px; width:35em; height:35em; border: 3px solid brown}
            #table {border-collapse: collapse; border-color: black; width: 100%; height: 100%; table-layout: fixed; text-align: center; direction: ltr}
            .side {background-color: gray}
            .mainDiagonal {background-color: blue}
            .subDiagonal {background-color: green}
        </style>

        <script type="text/javascript">

            function getDate() {
                var element = document.getElementById("date");
                var date = new Date();
                var h = date.getHours();
                var mi = date.getMinutes();
                var s = date.getSeconds();
                var d = date.getDate();
                var mn = date.getMonth() + 1;
                var y = date.getFullYear();

                var fullDate = h + ":" + mi + ":" + s + " - " + d + "/" + mn + "/" + y;
                element.innerHTML = fullDate;
            }


            function createTable() {
                var size = document.getElementById("size").value;
                var table = document.getElementById("table");

                var side = " class='side'>";
                var mainDiagonal = " class='mainDiagonal'>";
                var subDiagonal = " class='subDiagonal'>";

                table.innerHTML = "";

                var full = "";
                for(var i = 0; i <= size; ++i) {
                    full += "<tr>";
                    for(var j = 0; j <= size; ++j) {
                        if(i == 0 && j == 0)
                            full += "<td" + mainDiagonal;
                        else if((j == 0 && i == size) || (j == size && i == 0))
                            full += "<td" + subDiagonal + size;
                        else if(j == 0)
                            full += "<td" + side + i;
                        else if(i == 0)
                            full += "<td" + side + j;
                        else if(i == j)
                            full += "<td" + mainDiagonal + i * j;
                        else if(i == size - j)
                            full += "<td" + subDiagonal + i * j;
                        else
                            full += "<td>" + i * j;
                        full += "</td>";
                    }

                    full +=  "</tr>";
                }
                table.innerHTML += full;
            }
        </script>

    </head>
    <body>
        <div id="mainDiv">
            <h1 id="date"></h1>
            <h1 id="header">לוח הכפל כבקשתך</h1>
            <br>
            <label for="size">גודל הלוח:</label>
            <input type="number" id="size" min="1" max="20">
            <br><br><br>
            <button onclick="createTable()">הצג את הלוח</button>
        </div>
        <div id="tableDiv">
            <table id="table" border="1" >
                <caption id="cap" align="bottom"></caption>
            </table>
        </div>
    <script>
        setInterval(getDate, 1000);
    </script>
    </body>
</html>