0

Tenho esta imagem onde pretendo alinhar todos os títulos rodeados a vermelho ao mesmo nível: inserir a descrição da imagem aqui

Código:

echo '<div><table border="1"><th colspan="2">Infância</th><th colspan="3">Sénior</th><tr><td>';
echo '<div><table border="1" style="width:150px"> <td style="width:20px; text-align: center; background:#58ACFA"><h5><strong>Creche I Utentes</strong></h5></td> ';
echo $tabela1;
echo '<div><table border="1" style="width:150px"> <td style="width:20px; text-align: center; background:#58ACFA"><h5><strong>Creche II Utentes</strong></h5></td> ';
echo $tabela2;

echo "</td><td>";

echo '<div><table border="1" style="width:150px"> <td style="width:20px; text-align: center; background:#58ACFA"><h5><strong>Infância Utentes</strong></h5></td> ';
echo $tabela3;
echo '<div><table border="1" style="width:150px"> <td style="width:20px; text-align: center; background:#FFFF00"><h5><strong>Jardim de Infância/Creche Colaboradores</strong></h5></td> ';
echo $tabela4;
echo '<div><table border="1" style="width:150px"> <td style="width:20px; text-align: center; background:#FF8000"><h5><strong>Total de Refeições</strong></h5></td> ';
echo $tabela9;

echo "</td><td>";

echo '<table border="1" style="width:150px"> <td style="width:20px; text-align: center; background:#58ACFA"><h5><strong>Centro de Dia Utentes</strong></h5></td> ';
echo $tabela5;
echo '<table border="1" style="width:150px"> <td style="width:20px; text-align: center; background:#FFFF00"><h5><strong>Centro de Dia Colaboradores</strong></h5></td> ';
echo $tabela6;
echo '<table border="1" style="width:150px"> <td style="width:20px; text-align: center; background:#FF8000"><h5><strong>Total de Refeições</strong></h5></td> ';
echo $tabela10;

echo "</td><td>";

echo '<table border="1" style="width:150px"> <td style="width:20px; text-align: center; background:#58ACFA"><h5><strong>Lar Utentes</strong></h5></td> ';
echo $tabela7;
echo '<table border="1" style="width:150px"> <td style="width:20px; text-align: center; background:#FFFF00"><h5><strong>Lar Colaboradores</strong></h5></td> ';
echo $tabela8;

echo "</td><td>";

echo '<table border="1" style="width:150px"> <td style="width:20px; text-align: center; background:#FF8000"><h5><strong>Total de Refeições</strong></h5></td> ';
echo $tabela11;

echo '</td></tr></table></div>';

CSS:

<style type="text/css">
    table {
     width:150px;
    _width:150px;
    border:2px solid #CCC;
    border-spacing: 15 px;
    text-align: center;
    margin: 20;
    font-size: 12px;
    }
    th {
    color: #8B0000;
    font-family: Arial;
    font-size: 10px;
    }
     td {
    color: #000000;
    font-family: Arial;
    font-size: 11px;
    text-align: center;
}

</style>
3
  • falta adicionar ai o css Commented 3/05/2018 às 11:43
  • já adicionei à pergunta
    – Bruno
    Commented 3/05/2018 às 11:44
  • Para obter melhores respostas coloque o HTML gerado pelo PHP
    – user60252
    Commented 3/05/2018 às 12:14

3 Respostas 3

2

Coloque uma classe nas células que devem ser alinhadas no topo class="verticalAlignTop"

Código com as classes

echo '<div><table border="1"><th colspan="2">Infância</th><th colspan="3">Sénior</th><tr><td class="verticalAlignTop">';
echo '<div><table border="1" style="width:150px"> <td style="width:20px; text-align: center; background:#58ACFA"><h5><strong>Creche I Utentes</strong></h5></td> ';
echo $tabela1;
echo '<div><table border="1" style="width:150px"> <td style="width:20px; text-align: center; background:#58ACFA"><h5><strong>Creche II Utentes</strong></h5></td> ';
echo $tabela2;

echo "</td><td class="verticalAlignTop">";

echo '<div><table border="1" style="width:150px"> <td style="width:20px; text-align: center; background:#58ACFA"><h5><strong>Infância Utentes</strong></h5></td> ';
echo $tabela3;
echo '<div><table border="1" style="width:150px"> <td style="width:20px; text-align: center; background:#FFFF00"><h5><strong>Jardim de Infância/Creche Colaboradores</strong></h5></td> ';
echo $tabela4;
echo '<div><table border="1" style="width:150px"> <td style="width:20px; text-align: center; background:#FF8000"><h5><strong>Total de Refeições</strong></h5></td> ';
echo $tabela9;

echo "</td><td>";

echo '<table border="1" style="width:150px"> <td style="width:20px; text-align: center; background:#58ACFA"><h5><strong>Centro de Dia Utentes</strong></h5></td> ';
echo $tabela5;
echo '<table border="1" style="width:150px"> <td style="width:20px; text-align: center; background:#FFFF00"><h5><strong>Centro de Dia Colaboradores</strong></h5></td> ';
echo $tabela6;
echo '<table border="1" style="width:150px"> <td style="width:20px; text-align: center; background:#FF8000"><h5><strong>Total de Refeições</strong></h5></td> ';
echo $tabela10;

echo "</td><td class="verticalAlignTop">";

echo '<table border="1" style="width:150px"> <td style="width:20px; text-align: center; background:#58ACFA"><h5><strong>Lar Utentes</strong></h5></td> ';
echo $tabela7;
echo '<table border="1" style="width:150px"> <td style="width:20px; text-align: center; background:#FFFF00"><h5><strong>Lar Colaboradores</strong></h5></td> ';
echo $tabela8;

echo "</td><td>";

echo '<table border="1" style="width:150px"> <td style="width:20px; text-align: center; background:#FF8000"><h5><strong>Total de Refeições</strong></h5></td> ';
echo $tabela11;

echo '</td></tr></table></div>';

e no css adicione

.verticalAlignTop {
    vertical-align: top;
}

Exemplo para simples teste - clique em Executar

     width:150px;
    _width:150px;
    border:2px solid #CCC;
    border-spacing: 15 px;
    text-align: center;
    margin: 20;
    font-size: 12px;
    }
    th {
    color: #8B0000;
    font-family: Arial;
    font-size: 10px;
    }
     td {
    color: #000000;
    font-family: Arial;
    font-size: 11px;
    text-align: center;
}

.verticalAlignTop {
	vertical-align: top;
}
<div><table border="1"><th colspan="2">Infância</th><th colspan="3">Sénior</th><tr><td class="verticalAlignTop">
<div><table border="1" style="width:150px"> <td style="text-align: center; background:#58ACFA"><h5><strong>Creche I Utentes</strong></h5></td> 
		<table border="1" width="100%">
			<tr>
				<td>aaaa</td>
				<td>ssss</td>
			</tr>
			<tr>
				<td>dddd</td>
				<td>ffff</td>
			</tr>
			<tr>
				<td>ggggg</td>
				<td>hhhhh</td>
			</tr>
			<tr>
				<td>kkkkk</td>
				<td>lllll</td>
			</tr>
			<tr>
				<td>zzzzz</td>
				<td>xxxxxx</td>
			</tr>
			<tr>
				<td>ccccc</td>
				<td>bbbbb;</td>
			</tr>
		</table>
<div><table border="1" style="width:150px"> <td style="text-align: center; background:#58ACFA"><h5><strong>Creche II Utentes</strong></h5></td> 
		<table border="1" width="100%">
			<tr>
				<td>aaaa</td>
				<td>ssss</td>
			</tr>
			<tr>
				<td>dddd</td>
				<td>ffff</td>
			</tr>
			<tr>
				<td>ggggg</td>
				<td>hhhhh</td>
			</tr>
		</table>

</td><td class="verticalAlignTop">

<div><table border="1" style="width:150px"> <td style="text-align: center; background:#58ACFA"><h5><strong>Infância Utentes</strong></h5></td> 
		<table border="1" width="100%">
			<tr>
				<td>aaaa</td>
				<td>ssss</td>
			</tr>
			<tr>
				<td>dddd</td>
				<td>ffff</td>
			</tr>

		</table>
<div><table border="1" style="width:150px"> <td style="text-align: center; background:#FFFF00"><h5><strong>Jardim de Infância/Creche Colaboradores</strong></h5></td> 
		<table border="1" width="100%">
			<tr>
				<td>aaaa</td>
				<td>ssss</td>
			</tr>
			<tr>
				<td>dddd</td>
				<td>ffff</td>
			</tr>
			<tr>
				<td>ggggg</td>
				<td>hhhhh</td>
			</tr>
			<tr>
				<td>kkkkk</td>
				<td>lllll</td>
			</tr>
			<tr>
				<td>zzzzz</td>
				<td>xxxxxx</td>
			</tr>
			<tr>
				<td>ccccc</td>
				<td>bbbbb;</td>
			</tr>
		</table>
<div><table border="1" style="width:150px"> <td style="text-align: center; background:#FF8000"><h5><strong>Total de Refeições</strong></h5></td> 
		<table border="1" width="100%">
			<tr>
				<td>aaaa</td>
				<td>ssss</td>
			</tr>
			<tr>
				<td>dddd</td>
				<td>ffff</td>
			</tr>
			<tr>
				<td>ggggg</td>
				<td>hhhhh</td>
			</tr>

			<tr>
				<td>ccccc</td>
				<td>bbbbb;</td>
			</tr>
		</table>

</td><td>

<table border="1" style="width:150px"> <td style="text-align: center; background:#58ACFA"><h5><strong>Centro de Dia Utentes</strong></h5></td> 
		<table border="1" width="100%">
			<tr>
				<td>aaaa</td>
				<td>ssss</td>
			</tr>
			<tr>
				<td>dddd</td>
				<td>ffff</td>
			</tr>
			<tr>
				<td>ggggg</td>
				<td>hhhhh</td>
			</tr>

			<tr>
				<td>zzzzz</td>
				<td>xxxxxx</td>
			</tr>
			<tr>
				<td>ccccc</td>
				<td>bbbbb;</td>
			</tr>
		</table>
<table border="1" style="width:150px"> <td style="text-align: center; background:#FFFF00"><h5><strong>Centro de Dia Colaboradores</strong></h5></td> 
		<table border="1" width="100%">
			<tr>
				<td>aaaa</td>
				<td>ssss</td>
			</tr>
			<tr>
				<td>dddd</td>
				<td>ffff</td>
			</tr>
			<tr>
				<td>ggggg</td>
				<td>hhhhh</td>
			</tr>


		</table>
<table border="1" style="width:150px"> <td style="text-align: center; background:#FF8000"><h5><strong>Total de Refeições</strong></h5></td> 
		<table border="1" width="100%">
			<tr>
				<td>aaaa</td>
				<td>ssss</td>
			</tr>
			<tr>
				<td>dddd</td>
				<td>ffff</td>
			</tr>
			<tr>
				<td>ggggg</td>
				<td>hhhhh</td>
			</tr>
			<tr>
				<td>kkkkk</td>
				<td>lllll</td>
			</tr>
			<tr>
				<td>zzzzz</td>
				<td>xxxxxx</td>
			</tr>
			<tr>
				<td>ccccc</td>
				<td>bbbbb;</td>
			</tr>
		</table>

</td><td  class="verticalAlignTop">

<table border="1" style="width:150px"> <td style="text-align: center; background:#58ACFA"><h5><strong>Lar Utentes</strong></h5></td> 
		<table border="1" width="100%">
			<tr>
				<td>aaaa</td>
				<td>ssss</td>
			</tr>
			<tr>
				<td>dddd</td>
				<td>ffff</td>
			</tr>
			<tr>
				<td>ggggg</td>
				<td>hhhhh</td>
			</tr>
			<tr>
				<td>kkkkk</td>
				<td>lllll</td>
			</tr>
			<tr>
				<td>zzzzz</td>
				<td>xxxxxx</td>
			</tr>
			<tr>
				<td>ccccc</td>
				<td>bbbbb;</td>
			</tr>
		</table>
<table border="1" style="width:150px"> <td style="text-align: center; background:#FFFF00"><h5><strong>Lar Colaboradores</strong></h5></td> 
		<table border="1" width="100%">
			<tr>
				<td>aaaa</td>
				<td>ssss</td>
			</tr>
			<tr>
				<td>dddd</td>
				<td>ffff</td>
			</tr>
			<tr>
				<td>ggggg</td>
				<td>hhhhh</td>
			</tr>
			<tr>
				<td>kkkkk</td>
				<td>lllll</td>
			</tr>
			<tr>
				<td>zzzzz</td>
				<td>xxxxxx</td>
			</tr>
			<tr>
				<td>ccccc</td>
				<td>bbbbb;</td>
			</tr>
		</table>

</td><td>

<table border="1" style="width:150px"> <td style="text-align: center; background:#FF8000"><h5><strong>Total de Refeições</strong></h5></td> 
		<table border="1" width="100%">
			<tr>
				<td>aaaa</td>
				<td>ssss</td>
			</tr>
			<tr>
				<td>dddd</td>
				<td>ffff</td>
			</tr>
			<tr>
				<td>ggggg</td>
				<td>hhhhh</td>
			</tr>
			<tr>
				<td>kkkkk</td>
				<td>lllll</td>
			</tr>
			<tr>
				<td>zzzzz</td>
				<td>xxxxxx</td>
			</tr>
			<tr>
				<td>ccccc</td>
				<td>bbbbb;</td>
			</tr>
		</table>

</td></tr></table></div>

1
  • Como alinho verticalmente os títulos dentro das células onde tem por exemplo "Creche I Utentes"?
    – Bruno
    Commented 3/05/2018 às 15:02
2

Também é possível alinhar direto pelo CSS

.topo {
  vertical-align: top;
}
.base {
  vertical-align: bottom;
}
<table height="100" border="1">
  <tr>
      <td class="topo">
        alinhado ao topo
      </td>
      <td class="base">
        alinhado a base
      </td>
  </tr>
</table>

2

Para alinhar o conteúdo ao topo de uma coluna em tabelas, use valign="top":

<td valign="top">
    conteúdo
</td>

Esse desalinhamento acontece quando a altura da td é maior que o seu conteúdo e o valor padrão de valign é middle.

Exemplo:

<table height="100" border="1">
   <tr>
      <td valign="top">
         alinhado ao topo
      </td>
      <td>
         não alinhado
      </td>
      <td valign="top">
         alinhado ao topo
      </td>
   </tr>
</table>

Pela estrutura da sua tabela, você deve colocar valign="top" nos seguintes locais:

Na 1ª linha:

echo '<div><table border="1">...Sénior</th><tr><td valign="top">';
                                                      ↑

Nessas duas intersecções do meio:

...
echo $tabela9;

echo "</td><td valign='top'>"; ←

echo '<table border="1" style="width:150px"> <td style="width:20px; text-align: center; background:#58ACFA"><h5><strong>Centro de Dia Utentes</strong></h5></td> ';
echo $tabela5;
echo '<table border="1" style="width:150px"> <td style="width:20px; text-align: center; background:#FFFF00"><h5><strong>Centro de Dia Colaboradores</strong></h5></td> ';
echo $tabela6;
echo '<table border="1" style="width:150px"> <td style="width:20px; text-align: center; background:#FF8000"><h5><strong>Total de Refeições</strong></h5></td> ';
echo $tabela10;

echo "</td><td valign='top'>"; ←

...
2
  • pode parecer que me inspirei em alguma resposta, mas eu já estava trabalhando nela a partir do meu comentário na pergunta do AP e quando fui publicar minha resposta já tinha duas resposta. Não achei que devia jogar fora meu trabalho e publiquei assim mesmo!!!
    – user60252
    Commented 3/05/2018 às 13:18
  • De boas... tá valendo
    – Sam
    Commented 3/05/2018 às 13:19

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .