Como alinhar 2 tabela uma do lado da outra e ao centro?

Algo assim:

https://jsfiddle.net/ededev/tnk3wkc7/8/

[uPDATE]

Espere, esqueci de gravar, já actualizo

Novo link

O código mostrado pelo codercss ficará mais flexível se você retirar a declaração width: 70% do elemento body e passar para o elemento article.

>
O código mostrado pelo codercss ficará mais flexível se você retirar a declaração width: 70% do elemento body e passar para o elemento article.

Esse pormenor é apenas uma questão de semântica? Porque o que faço inicialmente é mexer no elemento pai (body) mas o que sugere é mexer no elemento filho! O que tem lógica, porque se precisar de introduzir mais elementos eles não serão afectados pelas características do body que deveriam ser apenas para o elemento article.

[uPDATE]

Aqui vai exemplo da minha explicação e do que penso que queria dizer: https://jsfiddle.net/ededev/tnk3wkc7/10/

>
Esse pormenor é apenas uma questão de semântica?

...

Aqui vai exemplo da minha explicação e do que penso que queria dizer: https://jsfiddle.net/ededev/tnk3wkc7/10/

1-) Não! Não é questão de semântica, pois semântica refere-se ao correto emprego dos elementos HTML na marcação e nada tem a ver com definição de regras de estilos.

Limitar a largura do elemento body impede que se aproveite a 'sobra' (no seu caso os 30% restantes) para qualquer outro uso no layout da página, inclusive para definir background.

2-) No exemplo que você colocou no JSFiddle a tabela com fundo verde e a imagem são dispensáveis para esclarecer o que foi perguntado: "Como alinhar 2 tabela uma do lado da outra e ao centro?" , contudo notar que agora a cor de fundo vermelha ocupa todo a largura de body e não somente 70%.