Tengo los siguientes códigos HTML
document.write('<p>Estadisticas centro medico ñuñoa</p>');
let obj = {
Radiologia: [
{
HORA: "11:00",
ESPECIALISTA: "IGNACIO SCHULZ",
PACIENTE: "FRANCISCA ROJAS",
RUT: "9878782-1",
PREVISION: "FONASA"
},
{
HORA: "11:30",
ESPECIALISTA: "FEDERICO SUBERCASEAUX",
PACIENTE: "PAMELA ESTRADA",
RUT: "15345241-3",
PREVISION: "ISAPRE"
},
{
HORA: "15:00",
ESPECIALISTA: "FERNANDO WURTHZ",
PACIENTE: "ARMANDO LUNA",
RUT: "16445345-9",
PREVISION: "ISAPRE"
},
{
HORA: "15:30",
ESPECIALISTA: "ANA MARIA GODOY",
PACIENTE: "MANUEL GODOY",
RUT: "17666419-0",
PREVISION: "FONASA"
},
{
HORA: "16:00",
ESPECIALISTA: "PATRICIA SUAZO",
PACIENTE: "RAMON ULLOA",
RUT: "14989389-K",
PREVISION: "FONASA"
}
],
}
function rellenarTabla(obj) {
let tbody = document.getElementById('mTableBody');
obj.Radiologia.forEach((c) => {
let filaNueva = '<tr>' +
'<td>' + c.HORA + '</td>' +
'<td>' + c.ESPECIALISTA + '</td>' +
'<td>' + c.PACIENTE + '</td>' +
'<td>' + c.RUT + '</td>' +
'<td>' + c.PREVISION + '</td>' +
'</tr>';
tbody.innerHTML += filaNueva;
});
}
rellenarTabla(obj);
let objUno = {
Traumatologia: [
{
HORA: "8:00",
ESPECIALISTA: "MARIA PAZ ALTUZARRA",
PACIENTE: "PAULA SANCHEZ",
RUT: "15554774-5",
PREVISION: "FONASA"
},
{
HORA: "10:00",
ESPECIALISTA: "RAUL ARAYA",
PACIENTE: "ANGÉLICA NAVAS",
RUT: "15444147-9",
PREVISION: "ISAPRE"
},
{
HORA: "10:30",
ESPECIALISTA: "MARIA ARRIAGADA",
PACIENTE: "ANA KLAPP",
RUT: "17879423-9",
PREVISION: "ISAPRE"
},
{
HORA: "11:00",
ESPECIALISTA: "ALEJANDRO BADILLA",
PACIENTE: "FELIPE MARDONES",
RUT: "1547423-6",
PREVISION: "ISAPRE"
},
{
HORA: "11:30",
ESPECIALISTA: "CECILIA BUDNIK",
PACIENTE: "DIEGO MARRE",
RUT: "16554741-K",
PREVISION: "FONASA"
},
{
HORA: "12:00",
ESPECIALISTA: "ARTURO CAVAGNARO",
PACIENTE: "CECILIA MENDEZ",
RUT: "9747535-8",
PREVISION: "ISAPRE"
},
{
HORA: "12:30",
ESPECIALISTA: "ANDRES KANACRI",
PACIENTE: "MARCIAL SUAZO",
RUT: "11254785-5",
PREVISION: "ISAPRE"
}
],
}
function rellenarTraumat(objUno) {
let tbody = document.getElementById('TableTraumatologia');
objUno.Traumatologia.forEach((c) => {
let filaNueva = '<tr>' +
'<td>' + c.HORA + '</td>' +
'<td>' + c.ESPECIALISTA + '</td>' +
'<td>' + c.PACIENTE + '</td>' +
'<td>' + c.RUT + '</td>' +
'<td>' + c.PREVISION + '</td>' +
'</tr>';
tbody.innerHTML += filaNueva;
});
}
rellenarTraumat(objUno);
let objDos = {
Dental: [
{
HORA: "8:30",
ESPECIALISTA: "ANDREA ZUÑIGA",
PACIENTE: "MARCELA RETAMAL",
RUT: "11123425-6",
PREVISION: "ISAPRE"
},
{
HORA: "11:00",
ESPECIALISTA: "MARIA PIA ZAÑARTU",
PACIENTE: "ANGEL MUÑOZ",
RUT: "9878789-2",
PREVISION: "ISAPRE"
},
{
HORA: "11:30",
ESPECIALISTA: "SCARLETT WITTING",
PACIENTE: "MARIO KAST",
RUT: "7998789-5",
PREVISION: "FONASA"
},
{
HORA: "13:00",
ESPECIALISTA: "FRANCISCO VON TEUBER",
PACIENTE: "KARIN FERNANDEZ",
RUT: "18887662-K",
PREVISION: "FONASA"
},
{
HORA: "13:30",
ESPECIALISTA: "EDUARDO VIÑUELA",
PACIENTE: "HUGO SANCHEZ",
RUT: "17665461-4",
PREVISION: "FONASA"
},
{
HORA: "14:00",
ESPECIALISTA: "RAQUEL VILLASECA",
PACIENTE: "ANA SEPULVEDA",
RUT: "14441281-0",
PREVISION: "ISAPRE"
}
]
}
function rellenarDental(objDos) {
let tbody = document.getElementById('TableDental');
objDos.Dental.forEach((c) => {
let filaNueva = '<tr>' +
'<td>' + c.HORA + '</td>' +
'<td>' + c.ESPECIALISTA + '</td>' +
'<td>' + c.PACIENTE + '</td>' +
'<td>' + c.RUT + '</td>' +
'<td>' + c.PREVISION + '</td>' +
'</tr>';
tbody.innerHTML += filaNueva;
});
}
rellenarDental(objDos);
x=obj.Radiologia[0].PACIENTE;
y=obj.Radiologia[0].PREVISION;
console.log(x +"-" +y);
ultimopac=obj.Radiologia[4].PACIENTE;
ultimoprev=obj.Radiologia[4].PREVISION;
console.log(ultimopac +"-" +ultimoprev);
a=objUno.Traumatologia[0].PACIENTE;
b=objUno.Traumatologia[0].PREVISION;
console.log(a +"-" +b);
finalpac=objUno.Traumatologia[6].PACIENTE;
finalprev=objUno.Traumatologia[6].PREVISION;
console.log(finalpac +"-" +finalprev);
d=objDos.Dental[0].PACIENTE;
e=objDos.Dental[0].PREVISION;
console.log(d +"-" +e);
terminopac=objDos.Dental[5].PACIENTE;
terminoprev=objDos.Dental[5].PREVISION;
console.log(terminopac +"-" +terminoprev);
document.querySelector(".infoR").innerHTML = x +"-" +y;
table {
color: black;
margin-bottom: 20px;
width: 50%;
}
.consulta{
margin:0 auto;
}
.container {
display: flex;
margin-top: 30px;
justify-content: center;
}
.infoR{
display: block;
}
<body>
<div class="container">
<div>
<table border="1" class="consulta">
<thead class="tituloCrear2b">
<tr>
<th id="fechaI">Hora</th>
<th id="fechaCa">Especialidad</th>
<th id="resultado">Paciente</th>
<th id="anotacion">Rut</th>
<th id="anotacion">Previsión</th>
</tr>
</thead>
<tbody id="mTableBody">
</tbody>
<div class="infoR">eee</div></table>
</div>
<div>
<table border="1" class="consulta">
<thead class="tituloCrear2b">
<tr>
<th id="fechaI">Hora</th>
<th id="fechaCa">Especialidad</th>
<th id="resultado">Paciente</th>
<th id="anotacion">Rut</th>
<th id="anotacion">Previsión</th>
</tr>
</thead>
<tbody id="TableTraumatologia">
</tbody>
</table>
</div>
<div class="infoT"></div>
<div>
<table border="1" class="consulta">
<thead class="tituloCrear2b">
<tr>
<th id="fechaI">Hora</th>
<th id="fechaCa">Especialidad</th>
<th id="resultado">Paciente</th>
<th id="anotacion">Rut</th>
<th id="anotacion">Previsión</th>
</tr>
</thead>
<tbody id="TableDental">
</tbody>
</table>
</div>
<div class="infoD"></div>
<script src="arreglos.js"></script>
</div>
</body>
Este código está destinado a llenar unas tablas en html usando un archivo jason , el archivo jason se encuentra dentro del archivo de javascript. Lo he recorrido sin dificultad en javascript, ante lo que requiero orientación en el css para que se pueda ver de la forma requerida. Necesito codigo css para que el título estadísticas centro medico de ñuñoa quede al centro y sobre las tablas. También requiero que el nombre Francisca Rojas - Fonasa se escriba bajo la primera tabla . Después colocaré otros nombres bajo la segunda y la tercera tabla