Buenas soy nuevo programando, he terminado hace poco el ciclo formativo y me estoy encontrando con los primeros problemas en el mundo laboral.
Tengo un jsp con dos tablas que se rellenan de forma dinámica (estas aparecen en paralelo), por lo tanto su tamaño es variable, quiero ponerle un título encima de las tablas para que no quede tan soso. El resultado total no tiene que quedar centrado en la pantalla del monitor, debe aparecer en la esquina superior izquierda.
El problema lo tengo a la hora de centrar el encabezado con las dos tablas resultantes, lo he intentado con una etiqueta <div id="contenedor"> que contiene todos los elementos de la página de modo que su tamaño sea automático para que se adapte al tamaño del contenido y que todo en su interior quede centrado, pero me ocurre que el texto del encabezado se me desplaza al centro de la pantalla, mientras las tablas quedan en la parte superior izquierda. Esto tiene que se así, porque me lo han pedido de esa manera, es decir todo el contenido que comience desde esa esquina.
Os dejo un pequeño ejemplo con dos tablas y el encabezamiento con el que he estado probando para luego trasladar el resultado al jsp:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dos tablas alineadas</title>
<style type="text/css">
#contenedor {
width:auto;
height:auto;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#encabezado {
color: #B4886B;
font-weight: bold;
}
div#tabla_uno{
width:300px;
position:relative;
float: left;
height: auto;
margin-right: 10px;
}
div#tabla_dos{
width:300px;
position:relative;
float: left;
height: auto;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="encabezado">
<label>Prueba Con Tabla</label>
</div>
<div id="tabla_uno">
<table width="300" border="1" cellspacing="1" cellpadding="1">
<tr>
<td scope="col">z</td>
<td scope="col">z</td>
<td scope="col">z</td>
</tr>
<tr>
<td><div align="center">z</div></td>
<td><div align="center">z</div></td>
<td><div align="center">z</div></td>
</tr>
</table>
</div>
<div id="tabla_dos">
<table width="300" border="1" cellspacing="1" cellpadding="1">
<tr>
<td scope="col">z</td>
<td scope="col">z</td>
<td scope="col">z</td>
</tr>
<tr>
<td><div align="center">z</div></td>
<td><div align="center">z</div></td>
<td><div align="center">z</div></td>
</tr>
</table>
</div>
</div>
</body>
</html>
Si alguien puede echarme una mano lo agradezco.
Muchas gracias.