Hola mcr. Con tablas es una solución. Pero si quieres prescindir de ellas, puedes hacerlo solo con listas y css. Hay dos maneras:
1- Creando dos clases para dos etiquetas <ol> diferentes. Ala primera, supongamos que la llamas "nombres" y le das los siguientes atributos:
.nombres{
margin:5em 50px 0 0;
padding: 0;
float:left;
}
A la segunda supongamos que la llamas "puntajes", y le das lo siguiente:
.puntajes{
margin:5em 0 0 0;
padding: 0;
}
Lo que estoy haciendo es poner la segunda lista a la derecha de la primera dandole la propiedad float:left a la primera y separándolas con un margen de 50px. Fijate que los valores de margin puedes ponerlos todos en la misma declaración, en sentido de las agujas del reloj empezando por top.
Ciudado que el margin-top de 5em que le estás agregando puede traerte problemas en etse caso. Si quieres que queden alineadas arriba recomiendo que soluciones ese margen de otra manera.
2- Si sabes cual es el elemento que está antes de tus listas, o dentro de que contenedor están, te puedes ahorrar el hecho de crear clases, concatenando simplemente las etiquetas.
Por ejemplo, si tu lista está en un div cuyo id es "main", puedes declarar lo siguiente para la primera lista:
#main ol{
margin:5em 50px 0 0;
padding: 0;
float:left;
}
Y para la segunda:
#main ol + ul{
margin:5em 0 0 0;
padding: 0;
}
El espaciado entre #main y ol, indica que las declaraciones se apliquen para todo elemento ol dentro del div main. La concatenación "+" entre ol y ul (si es que la segunda lista es ul) indica que las declaraciones se apliquen a todos los elementos ul que estén inmediatamente seguidos a cualquier ol que a su vez esté dentro del div main. ¿Me explico????
De esta maneera te ahorras la creación de clases y te aseguras de que lo que declares sólo se aplicará para ese caso específico y no para todas las demás ul y ol.
Espero que siva de algo.
Salute!