Good morning! Personally, I still need to improve my skills on HTMl
and CSS
. I am making a meeting minutes and I am having difficulty aligning TD's
that are inside a table TD
is appearing on the side of TR
follow code:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style>
.tabela1,
.th1,
.th2,
.th3,
.th4,
.th5,
.th6,
.th7,
.th8,
.th9,
.th10,
.th11 {
font-family: arial, sans-serif;
border: 1px solid black;
width: auto;
text-align: center;
border-collapse: collapse;
}
.tabela2 {
font-family: arial, sans-serif;
border: 1px solid black;
width: 100%;
}
.tabela3 {
font-family: arial, sans-serif;
border: 1px solid black;
width: 100%;
}
.tabela4 {
font-family: arial, sans-serif;
border: 1px solid black;
width: 100%;
text-align: center;
}
.tr1 {
border: 1px solid black;
text-align: left;
margin: ;
width: auto;
text-align: center;
height: auto;
}
.tr2 {
border: 1px solid black;
text-align: left;
padding: 8px;
width: auto;
background-color: #F0F8FF;
}
.tr3 {
border: 1px solid black;
text-align: left;
padding: 8px;
width: 100%;
border-collpase: collapse;
}
.tr4 {
border: 1px solid black;
text-align: left;
padding: 8px;
width: 100%;
border-collapse: collapse;
}
.tr5 {
border: 1px solid black;
text-align: left;
padding: 8px;
width: 100%;
border-collapse: collapse;
}
.tr6 {
border: 1px solid black;
text-align: center;
padding: 8px;
width: 100%;
}
.tr7 {
border: 1px solid black;
text-align: center;
padding: 8px;
width: 100%;
}
.tr8 {
border: 1px solid black;
text-align: center;
padding: 8px;
width: 100%;
border-collapse: collapse;
}
.h4 {
text-align: center;
font-weight: 100px;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
td {
border: 1px solid black;
padding: 18px;
height: auto;
width: auto;
text-align: center;
}
</style>
<img class="center" alt="Empresas do Grupo Barão de Mauá" src="https://intranet.baraodemaua.br/files/images/layout/topo.png"class="img-responsive">
<hr width="auto" size="1" color=DarkGreen>
<h4 class="h4"> ATA DE REUNIAO</h4>
<hr width="auto" size="5" color="DarkGreen">
<table class="tabela1">
<tr class="tr1">
<th class="th1">AREA EMITENTE</th>
<th class="th2">LOCAL</th>
<th class="th3">DATA</th>
<th class="th4">HORA</th>
</tr>
<tr class="tr2">
<td>TI-Sistemas</td>
<td>Reitoria - Sala de Reuniao</td>
<td>04/07/2018</td>
<td>14:30</td>
</tr>
</table>
<br>
<table class="tabela2">
<tr class="tr3">
<td class="td1"><strong>Agenda: Melhorias no Sistema de Fiscais para o proximo vestibular</strong>
</tr>
</table>
<br>
<table class="tabela3">
<tr class="tr4">
<th rowspan="2">Participantes Fixos:
<br>
</th>
</tr>
<tr class="tr5">
<td rowspan="2">Leandro Netto Scatolin
<br> Cristiano Consule
<br> Joyce Maria Worschech Gabrielli
<br> Evelyn Scaramal Raphaloski
<br>
</td>
<th>Participantes Convidados:</th>
</tr>
</table>
<br>
<hr width="auto%" size="2" color=DarkGreen>
<table class="tabela4">
<tr class="tr6">
<th rowspan="2"><strong> Assuntos discutidos</strong></th>
<br>
<th> <small>I= Informacao</small></th>
<th> <small>D= Decisao</small></th>
<th> <small>A = Acao</small></th>
</tr>
<tr class="tr7">
<th><strong>Responsavel pela</strong></th>
<th><small>Acao/Decisao/Informacao</small></th>
</tr>
<tr class="tr8">
<td> Criar mecanismo par indentificar fiscais que estavam
<br>na distribuicao e foram retirados, para permitir o envio de e-mail pelo sistema,
<br>avisando que o mesmo nao participara mais do vestibular.
<br> TI- Desenvolvimento
<br> Comite - Definicao de texto do e-mail</td>
<td>A</td>
<td>TI/COMITE</td>
<td> A definir</td>
</tr>
</table>
</html>