<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
div{
display: inline-block;
text-align: center;
width: 20px;
}
</style>
</head>
<body>
<script>
var i, j, k, m, n;
var k = 6, l = 13, m = 16;
for(i=1; i<=5; i++)
{
for(j=1; j<=5; j++)
{
if(i == 1)
document.write("<div>"+ j +"</div>");
else if(j == 5)
document.write("<div>"+ k++ +"</div>");
else if(i == 5)
document.write("<div>"+ l-- +"</div>");
else if(j == 1)
document.write("<div>"+ m-- +"</div>");
else
document.write(" ");
}
document.write("<br>");
}
</script>
<p><strong>Note</strong>: In this example, the structure of the pattern is more important. So little <a href="/css" target="_blank">CSS</a> is added.</p>
</body>
</html>