Neste tutorial vamos mostrar como trabalhar com tabelas HTML.
Vamos mostrar vários exemplos de tabelas e como montá-las.
Centralizar conteúdo da tabela HTML horizontal e vertical:
********************************* ********************************* | Para centralizar este conteúdo, basta você digitar: align="center" na célula em que você quer centralizar o conteúdo. | ********************************* ********************************* |
********************************* ********************************* | ********************************* ********************************* | ********************************* ********************************* |
Veja o exemplo do código abaixo:
<table border="1">
<tr>
<td>
*********************************</br></br>
*********************************</br></br>
</td>
<td align="center">
Para centralizar este conteúdo,<br/>
basta você digitar: align="center" <br/>
na célula em que você quer centralizar o conteúdo.
</td>
<td>
*********************************</br></br>
*********************************</br></br>
</td>
</tr>
<tr>
<td>
*********************************</br></br>
*********************************</br></br>
</td>
<td>
*********************************</br></br>
*********************************</br></br>
</td>
<td>
*********************************</br></br>
*********************************</br></br>
</td>
</tr>
</table>
Alinhar conteúdo da tabela HTML na horizontal a esquerda:
********************************* ********************************* | Para alinhar este conteúdo do lado esquerdo, basta você digitar: align="left" na célula em que você quer alinhar o conteúdo. | ********************************* ********************************* |
********************************* ********************************* | ********************************* ********************************* | ********************************* ********************************* |
Veja o exemplo do código abaixo:
<table border="1">
<tr>
<td>
*********************************</br></br>
*********************************</br></br>
</td>
<td align="left">
Para alinhar este conteúdo do lado esquerdo,<br/>
basta você digitar: align="left" <br/>
na célula em que você quer alinhar o conteúdo.
</td>
<td>
*********************************</br></br>
*********************************</br></br>
</td>
</tr>
<tr>
<td>
*********************************</br></br>
*********************************</br></br>
</td>
<td>
*********************************</br></br>
*********************************</br></br>
</td>
<td>
*********************************</br></br>
*********************************</br></br>
</td>
</tr>
</table>
Alinhar conteúdo da tabela HTML na horizontal a direita:
********************************* ********************************* | Para alinhar este conteúdo do lado direito, basta você digitar: align="RIGHT" na célula em que você quer alinhar o conteúdo. | ********************************* ********************************* |
********************************* ********************************* | ********************************* ********************************* | ********************************* ********************************* |
Veja o exemplo do código abaixo:
<table border="1">
<tr>
<td>
*********************************</br></br>
*********************************</br></br>
</td>
<td align="RIGHT">
Para alinhar este conteúdo do lado direito,<br/>
basta você digitar: align="RIGHT" <br/>
na célula em que você quer alinhar o conteúdo.
</td>
<td>
*********************************</br></br>
*********************************</br></br>
</td>
</tr>
<tr>
<td>
*********************************</br></br>
*********************************</br></br>
</td>
<td>
*********************************</br></br>
*********************************</br></br>
</td>
<td>
*********************************</br></br>
*********************************</br></br>
</td>
</tr>
</table>
Alinhar conteúdo da tabela HTML na vertical no topo:
********************************* ********************************* | Para alinhar este conteúdo no topo, basta você digitar: VALIGN="TOP" na célula em que você quer alinhar o conteúdo. | ********************************* ********************************* |
********************************* ********************************* | ********************************* ********************************* | ********************************* ********************************* |
Veja o exemplo do código:
<table border="1">
<tr>
<td>
*********************************</br></br>
*********************************</br></br>
</td>
<td VALIGN="TOP">
Para alinhar este conteúdo no topo,<br/>
basta você digitar: VALIGN="TOP" <br/>
na célula em que você quer alinhar o conteúdo.
</td>
<td>
*********************************</br></br>
*********************************</br></br>
</td>
</tr>
<tr>
<td>
*********************************</br></br>
*********************************</br></br>
</td>
<td>
*********************************</br></br>
*********************************</br></br>
</td>
<td>
*********************************</br></br>
*********************************</br></br>
</td>
</tr>
</table>
Alinhar conteúdo da tabela HTML na vertical embaixo:
********************************* ********************************* | Para alinhar este conteúdo embaixo, basta você digitar: VALIGN="BOTTOM" na célula em que você quer alinhar o conteúdo. | ********************************* ********************************* |
********************************* ********************************* | ********************************* ********************************* | ********************************* ********************************* |
Veja o exemplo do código da tabela HTML:
<table border="1">
<tr>
<td>
*********************************</br></br>
*********************************</br></br>
</td>
<td VALIGN="BOTTOM">
Para alinhar este conteúdo embaixo,<br/>
basta você digitar: VALIGN="BOTTOM" <br/>
na célula em que você quer alinhar o conteúdo.
</td>
<td>
*********************************</br></br>
*********************************</br></br>
</td>
</tr>
<tr>
<td>
*********************************</br></br>
*********************************</br></br>
</td>
<td>
*********************************</br></br>
*********************************</br></br>
</td>
<td>
*********************************</br></br>
*********************************</br></br>
</td>
</tr>
</table>
Estas são as formas básicas de alinhamento em tabela HTML. Com estas formas você pode montar toas outras. Exemplo:
Para centralizar, e colocar o conteúdo no topo da tabela:
********************************* ********************************* | Conteúdo | ********************************* ********************************* |
********************************* ********************************* | ********************************* ********************************* | ********************************* ********************************* |
Veja o exemplo do código HTML:
<table border="1">
<tr>
<td>
*********************************</br></br>
*********************************</br></br>
</td>
<td VALIGN="TOP" align="center">
Conteúdo
</td>
<td>
*********************************</br></br>
*********************************</br></br>
</td>
</tr>
<tr>
<td>
*********************************</br></br>
*********************************</br></br>
</td>
<td>
*********************************</br></br>
*********************************</br></br>
</td>
<td>
*********************************</br></br>
*********************************</br></br>
</td>
</tr>
</table>
Viu como é simples!
Nenhum comentário:
Postar um comentário