i css è il codice più semplice in circolazione con cui si possono fare cose anche molto complicate, se fai una ricerca trovi molto materiale ora ti cerco quache codice che ho postato che sicuramente ne ho più d'uno:

questo è anche grazioso

<html>
<head>
<title>Untitled</title>
<style type="text/css">
* {margin:0;padding:0}
html, body {height:100%}
body {color:white;
overflow:auto;
font-size:90%;
}
.esterna {height:100%;
background:silver;
width:100%;
text-align:center;
}
.esterna td {border:10px solid gray}
.interna {background:aqua;
width:80%;
text-align:center;
margin:auto;
}
div {background:gray;
width:50%;
margin:auto;}
div:first-letter {font-size:2em;
font-style:italic;
color:fuchsia
}
.griglia {height:80%;
width:80%;
position:absolute;
top:10%;
left:10%;
border-collapse:collapse;
text-align:center;
font-family:monospace;
font-weight:bold;
font-size:1.4em!important;
font-size:.9em
}
.griglia td {border:1px solid gray}
</style>
</head>
<body>
<table class="esterna">
<tr>
<td><table class="interna">
<tr>
<td><div>Giochi di Tabelle</div></td>
</tr>
</table>
</td>
</tr>
</table>
<table class="griglia">
<tr>
<td>t</td>
<td>a</td>
<td>b</td>
<td>e</td>
</tr>
<tr>
<td>e</td>
<td>l</td>
<td>l</td>
<td>e</td>
</tr>
<tr>
<td>n</td>
<td>o</td>
<td>g</td>
<td>r</td>
</tr>
<tr>
<td>a</td>
<td>z</td>
<td>i</td>
<td>e</td>
</tr>
</table>
</body>
</html>

se poi proprio non digerisci i css devi mettere una tabella dentro un altra e a quella esterna dare height e width 100% e quella interna verrà automaticamente allineata centralmente in verticale