Align titles in html

Navigation
1

I have this image where I want to align all the titles surrounded in red to the same level:

Code:

echo'<div><tableborder="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>
    
asked by anonymous 03.05.2018 / 13:38

3 answers

2
  

Place a class in the cells that should be aligned on top class="verticalAlignTop"

Code with 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>';
  

and in css add 

.verticalAlignTop {
    vertical-align: top;
}

Example for simple test - click% with% 

     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>
    
03.05.2018 / 15:01
3

To align the contents to the top of a column in tables, use valign="top" : 

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

This misalignment happens when the height of td is greater than its content and the default value of valign is middle .

Example: 

<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>

From your table structure, you should put valign="top" in the following places:

On the 1st line: 

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

At these two middle intersections: 

...
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'>"; ←

...
    
03.05.2018 / 13:56
2

You can also align directly through 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>
    
03.05.2018 / 14:12
Program that warns a secret number using bisection search Recursive function to return string in reverse