HTML: Tabela - Criar uma tabela e alinhar conteúdo na célula (CSS inline) + Tutorial video (10 min.)

Publicado a 25/01/2019, 01:54 por Luis Pitta -org-   [ atualizado a 18/03/2019, 15:51 ]



Criar uma tabela e alinhar o texto na célula

Vamos utilizar:

Exemplo:

 Incorreto 
O atributo align deve ser evitado porque deixou de ser suportado em 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 HTML 5 para alinhar conteúdo na célula devemos utilizar CSS inlinestyle="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>



Criar e formatar uma tabela com formatação CSS
Tutorial video de 10 min. que cria uma tabela em HTML a partir do editor Atom utilizando formatação em CSS externo:






Tabelas em HTML

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