CodeGym/Cursos/Frontend SELF PT/Estilização de tabelas

Estilização de tabelas

Disponível

9.1 Uso de atributos

Estilização de tabelas em HTML pode ser feita de várias maneiras. Uma delas é usando atributos diretamente na tag da tabela e seus elementos. Embora os desenvolvedores web modernos geralmente prefiram usar CSS para estilização, entender os atributos HTML é útil para estilização básica.

Atributos principais da tabela

Atributo border

Define a espessura da borda da tabela. Geralmente o valor é especificado em pixels.

HTML
<table border="1">
  <tr>
    <th>Nome</th>
    <th>Nota</th>
  </tr>
  <tr>
    <td>Ivan</td>
    <td>91</td>
  </tr>
  <tr>
    <td>Maria </td>
    <td>94</td>
  </tr>
  <tr>
    <td>Nina</td>
    <td>89</td>
  </tr>
</table>

Atributo cellpadding:

Define o espaçamento interno das células (espaçamento dentro das células a partir de suas bordas).

HTML
<table cellpadding="10">
  <tr>
    <th>Nome</th>
    <th>Nota</th>
  </tr>
  <tr>
    <td>Ivan</td>
    <td>91</td>
  </tr>
  <tr>
    <td>Maria</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Nina</td>
    <td>89</td>
  </tr>
</table>

Atributo cellspacing:

Define a distância entre as células.

HTML
<table cellspacing="5">
  <tr>
    <th>Nome</th>
    <th>Nota</th>
  </tr>
  <tr>
    <td>Ivan</td>
    <td>91</td>
  </tr>
  <tr>
    <td>Maria</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Nina</td>
    <td>89</td>
  </tr>
</table>

Atributos width e height:

Definem a largura e a altura da tabela. Esses atributos também podem ser usados nas tags <td> e <th> para definir o tamanho das células.

HTML
<table style="text-align: left;" width="100%" height="200">
  <tr>
    <th width="50%">Nome</th>
    <th width="25%">Projeto</th>
    <th width="25%">Cidade</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>25</td>
    <td>Paris</td>
  </tr>
</table>

Atributo align:

Define o alinhamento da tabela na página (left, right, center).

HTML
<table align="center">
  <tr>
    <th>Nome</th>
    <th>Nota</th>
  </tr>
  <tr>
    <td>Ivan</td>
    <td>91</td>
  </tr>
  <tr>
    <td>Maria</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Nina</td>
    <td>89</td>
  </tr>
</table>

Atributo bgcolor:

Define a cor de fundo da tabela ou das células.

HTML
<table bgcolor="#f0f0f0">
  <tr>
    <th>Nome</th>
    <th>Nota</th>
  </tr>
  <tr>
    <td>Ivan</td>
    <td>91</td>
  </tr>
  <tr>
    <td>Maria</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Nina</td>
    <td>89</td>
  </tr>
</table>

9.2 Atributos para células da tabela

Atributos para células da tabela

Atributo colspan:

Une células horizontalmente.

HTML
<td colspan="2">Célula combinada</td>

Atributo rowspan:

Une células verticalmente.

HTML
<td rowspan="2">Célula combinada</td>

Atributo align:

Define o alinhamento horizontal do conteúdo da célula (left, right, center).

HTML
<td align="center">Texto centralizado</td>

Atributo valign:

Define o alinhamento vertical do conteúdo da célula (top, middle, bottom).

HTML
<td valign="top">Texto no topo</td>

Atributo bgcolor:

Define a cor de fundo para a célula.

HTML
<td bgcolor="#ffcc00">Fundo colorido</td>

9.3 Exemplo completo

Exemplo completo de estilização de tabela com atributos:

HTML
<table border="1" cellpadding="10" cellspacing="5" width="80%" align="center" bgcolor="#e0e0e0">
  <caption>Lista de estudantes e suas notas</caption>
  <thead bgcolor="#c0c0c0">
    <tr>
      <th align="left">Nome</th>
      <th align="center">Idade</th>
      <th align="right">Cidade</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ivan</td>
      <td align="center">30</td>
      <td align="right">Londres</td>
    </tr>
    <tr>
      <td colspan="2" align="center">Maria e Pedro</td>
      <td align="right">Liverpool</td>
    </tr>
    <tr>
      <td rowspan="2" valign="middle">Ana</td>
      <td>25</td>
      <td>Manchester</td>
    </tr>
    <tr>
      <td>27</td>
      <td>Leeds</td>
    </tr>
  </tbody>
  <tfoot>
    <td colspan="3" align="center">Fim da tabela</td>
  </tfoot>
</table>

Explicação do exemplo

  • border="1": define uma borda de tabela de 1 pixel de espessura
  • cellpadding="10": define um espaçamento interno de 10 pixels para todas as células da tabela
  • cellspacing="5": define uma distância de 5 pixels entre as células da tabela
  • width="80%": define a largura da tabela em 80% da largura do elemento pai
  • align="center": centraliza a tabela na página
  • bgcolor="#e0e0e0": define a cor de fundo da tabela
  • <caption>: adiciona um título à tabela
  • <thead> e <tbody>: agrupam os cabeçalhos e o corpo da tabela. A cor de fundo para os cabeçalhos é definida com bgcolor="#c0c0c0"
  • <th> e <td>: são usados para definir células de cabeçalho e de dados
  • <align> e <valign>: definem o alinhamento horizontal e vertical do conteúdo das células
  • <colspan> e <rowspan>: unem células horizontal e verticalmente
1
Tarefa
Frontend SELF PT,  nível 5lição 4
Bloqueado
cellpadding e cellspacing
cellpadding e cellspacing
1
Tarefa
Frontend SELF PT,  nível 5lição 4
Bloqueado
Alinhamento da tabela
Alinhamento da tabela
Comentários
  • Populares
  • Novas
  • Antigas
Você precisa acessar para deixar um comentário
Esta página ainda não tem nenhum comentário