Lo mejor es siempre ser lo más explícito posible al hacer una consulta.
En el segundo ejemplo que te he puesto, que comentas que has tenido que quitar el 100%, porque evidentemente ocupará todo el ancho del body, no es el 100% de las tablas lo que hace que ocupen todo el ancho del body, sino que los dos divs tienen un 50% cada uno, y sobre todo que el div principal no tiene tamaño definido; simplemente mateniendo el margin: auto y dando el porcentaje o el tamaño que quieras al contenedor principal (primer div), tendrías las tablas al ancho que te interese y centradas en la página.
Las tablas tienen cada una el 100% de su contenedor, que puede tener el tamaño que quieras.
Prueba esto:
Código:
<body>
<div style="border: 5px solid green; margin: auto; width: 30%;">
<div style="float: left; width: 50%;">
<table border="1" width="100%" style="background:#aabbcc;">
<tr>
<td>11111111111111<br />
11111111111111<br />
11111111111111<br />
11111111111111<br />
11111111111111<br />
11111111111111<br />
</td>
</tr>
</table>
</div>
<div style="float: left; width: 50%;">
<table border="1" width="100%" style="background:pink;">
<tr>
<td>222222222222<br />
222222222222<br />
222222222222<br />
222222222222<br />
</td>
</tr>
</table>
</div>
<div style="clear: both;"></div>
</div>
</body>
Y el problema de la alineación vertical está resuelto. Pero tampoco estoy seguro de que sea esto lo que quieres conseguir. Ya me dirás.
Mikel.