Arranging tds within tr

Asked

Viewed 67 times

0

Good morning! Guys, I still need to improve my Skills on HTMl and CSS. I’m making a meeting minutes and I’m having a hard time getting some TD's inside a table a TD is appearing on the side of TR follows 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>

css html5

  • Young lady, which TD is in the wrong place? Overall looks well organized the layout, could give more details of where the problem is and how you want things to stay ?

  • Cara could better detail where it is wrong! Or add an example of how you expect it to look.

1 answer

0

As it was not specified which table you are having problem, but analyzing I understood that you are having problem in the table with "Fixed Participants" and "Invited Participants". If this is really your problem (unable to align th with trs in this table) the problem can be solved like this:

<table class="tabela3">
  <tr class="tr4">
    <th>Participantes Fixos:</th>
    <th>Participantes Convidados:</th>
  </tr>
  <tr class="tr5">
  <td>Leandro Netto Scatolin
    <br> Cristiano Consule
    <br> Joyce Maria Worschech Gabrielli
    <br> Evelyn Scaramal Raphaloski
    <br>
  </td>
  </tr>
</table>

In case that’s really the problem was that you put one of th in the wrong tr and the rowspans were getting in the way too. I hope I helped :D

Browser other questions tagged css html5

You are not signed in. Login or sign up in order to post.