Criar uma tabela e alinhar conteúdo na célula (CSS inline) + Tutorial vídeo (10 min.)

Criar uma tabela e alinhar o texto na célula

Vamos utilizar:

• • a propriedade CSS text-align

  • as tags HTML: <table>, <tr>, <td> e <th>

  • Não devemos utilizar o atributo align (mais informação em www.w3schools.com/tags/att_td_align.asp)

Exemplo:

Incorreto

O atributo align deve ser evitado porque deixou de ser suportado no HTML5:

<table>

<tr>

<th>Mês</th>

<th>Poupanças</th>

</tr>

<tr>

<td>Janeiro</td>

<td align="right">100 euros</td>

</tr>

</table>

Correto

Em HTML5 para alinhar conteúdo na célula devemos utilizar CSS inline, através do código: style="text-align: right"

<table style="width:100%">

<tr>

<th>Mês</th>

<th>Poupanças</th>

</tr>

<tr>

<td>Janeiro</td>

<td style="text-align: right">100 Euros</td>

</tr>

<tr>

<td>Fevereiro</td>

<td style="text-align: right">80 Euros</td>

</tr>

</table>

Playlist completa (43 videos): www.youtube.com/playlist?list=PL0eyrZgxdwhwNC5ppZo_dYGVjerQY3xYU

Tabelas em HTML

• Tudo sobre tabelas: www.w3schools.com/html/html_tables.asp