è solo che ho letto che non è consigliabile fare menù o submenù usando una tabella
Direi piuttosto che è sconsigliato usare le tabelle per uno scopo diverso da quello per cui sono state create, cioè la rappresentazione di dati in maniera tabellare. Da evitare quindi il loro uso per uno scopo puramente stilistico, decorativo.
In questo caso potrei dire che siamo al confine tra i due casi. In effetti non stai facendo altro che rappresentare dei dati, anche se si tratta di voci di un menu; è vero però che il fattore "tabella", in questo caso, non è poi così necessario.
A mio parere dovresti lasciare le voci libere, anche per permettere una migliore disposizione automatica delle stesse che magari, pensando di affrontare anche un discorso responsive, possano liberamente disporsi su più righe; e magari migliorare giusto l'aspetto grafico, che so, per le voci impostare opportunamente dei bordi (come da tua richiesta), definirne una grafica per l'hover, ecc., cioè tutti elementi che chiaramente servono a migliorare la qualità di interazione col fruitore.
Se ritieni però che la rappresentazione tabellare possa fornire qualche particolare beneficio in questo particolare caso, usa tranquillamente una tabella (IMHO).
Soluzioni alternative, per ottenere un layout simile ma senza tabelle, possono essere l'impostazione da css con regole tipo display:table, display:cell, che puoi applicare ad elementi diversi da quelli di una tabella (ma a me sembra una forzatura; dato che comunque si tratta di rappresentare dei dati, a quel punto perché non usare direttamente una tabella?), o ancora, display:grid che però non è pienamente supportata dai vari browser, quindi bisognerebbe eventualmente valutare degli opportuni fallback per i browser che non la supportano.
Qui un esempio veloce di grid:
codice:
<!DOCTYPE HTML>
<html>
<head>
<title>Esempio</title>
<meta charset="utf-8">
<style>
nav {
border: 1px solid black;
}
nav ul {
position: relative;
background-color: green;
text-align: center;
padding: 15px 0;
}
nav ul li a {
text-decoration: none;
font-family: 'Times New Roman', sans-serif;
color: white;
font-size: 30px;
font-weight: bold;
letter-spacing: 5px;
}
nav ul ul {
position: relative;
}
nav ul ul li {
display: inline;
}
nav li:not(:hover)>ul {
display: none;
}
ul.menu-grid {
display: grid;
grid-template-columns: repeat(10, auto);
margin: 0 auto;
background-color: gold;
border-collapse:collapse;
}
ul.menu-grid > li{
border: 1px solid green;
}
ul.menu-grid > li > a {
display: inline-block;
width: 100%;
font-size: 26px;
letter-spacing: 0;
padding: 10px;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">REGIONI</a>
<ul class="menu-grid">
<li><a href="regioni/abruzzo/abruzzo.html">ABRUZZO</a></li>
<li><a href="regioni/basilicata/basilicata.html">BASILICATA</a></li>
<li><a href="regioni/calabria/calabria.html">CALABRIA</a></li>
<li><a href="regioni/campania/campania.html">CAMPANIA</a></li>
<li><a href="regioni/emiliaromagna/emiliaromagna.html">EMILIAROMAGNA</a></li>
<li><a href="regioni/friuli/friuli.html">FRIULI</a></li>
<li><a href="regioni/lazio/lazio.html">LAZIO</a></li>
<li><a href="regioni/liguria/liguria.html">LIGURIA</a></li>
<li><a href="regioni/lombardia/lombardia.html">LOMBARDIA</a></li>
<li><a href="regioni/marche/marche.html">MARCHE</a></li>
<li><a href="regioni/molise/molise.html">MOLISE</a></li>
<li><a href="regioni/piemonte/piemonte.html">PIEMONTE</a></li>
<li><a href="regioni/puglia/puglia.html">PUGLIA</a></li>
<li><a href="regioni/sardegna/sardegna.html">SARDEGNA</a></li>
<li><a href="regioni/sicilia/sicilia.html">SICILIA</a></li>
<li><a href="regioni/toscana/toscana.html">TOSCANA</a></li>
<li><a href="regioni/trentino/trentino.html">TRENTINO</a></li>
<li><a href="regioni/umbria/umbria.html">UMBRIA</a></li>
<li><a href="regioni/valledaosta/valledaosta.html">VALLE D'AOSTA</a></li>
<li><a href="regioni/veneto/veneto.html">VENETO</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
Vedi tu che fare.