Veamos la primera propuesta de solución, por Aitor.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Prueba CSS</title>
<style>
/* Estilos para los enlaces */
a.enlace {
color: #0000D9;
display: block; /* Ocupa todo el espacio del contenedor */
text-decoration: none;
}
a.enlace:hover {
background-color: #77AADD; /* Color de fondo al pasar el mouse */
}
/* Estilos para la tabla */
table {
border: 1px solid red;
width: 20%;
margin: auto; /* Centrar la tabla horizontalmente */
}
/* Estilos para las celdas de la tabla */
td {
text-align: center; /* Alinear texto al centro correctamente */
border: 1px solid red;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<a class="enlace" href="#">Enlace 1</a>
</td>
</tr>
<tr>
<td>
<a class="enlace" href="#">Enlace 2</a>
</td>
</tr>
</table>
</body>
</html>
En el artículo llamado Realizar un rollover sólo con CSS y utilizando imágenes de DesarrolloWeb.com se muestra como hacer enlaces que ocupen todo el espacio donde están situados
Aitor de la Puente Salán