Align titles in html

Asked

Viewed 100 times

0

I have this image where I want to align all titles surrounded by red at the same level: inserir a descrição da imagem aqui

Code:

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

  • missing add the css

  • I have already added to the question

  • For better answers put the HTML generated by PHP

3 answers

2

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

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

This misalignment happens when the height of the 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>

By the structure of your table, you should put valign="top" in the following locations:

In the first row:

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

...

  • it may seem that I was inspired by some answer, but I was already working on it from my comment on the AP question and when I went to publish my answer already had two answers. I didn’t think I should throw away my work and I published it anyway!!!

  • Of good... it’s worth

2

You can also directly align with 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


Place a class in the cells that must be aligned at the top class="verticalAlignTop"

Code with the 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 on 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>

  • How I vertically align the titles within the cells where it has for example "Creche I Utentes"?

Browser other questions tagged html

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