Lições
Iniciar
Começar a aprender
CodeGym /Cursos /Frontend SELF PT /Estilização de tabelas

Estilização de tabelas

Frontend SELF PT
Nível 5 , Lição 4
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
Comentários
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION