Tutorial HTML

HTML HOME Introdução HTML Editores de HTML HTML básico Elementos HTML Atributos HTML Títulos HTML Parágrafos HTML Estilos HTML Formatação HTML Cotações HTML Comentários HTML Cores HTML HTML CSS Links HTML Imagens HTML HTML Favicon Tabelas HTML Listas HTML Bloco HTML e Inline Classes HTML Código HTML Iframes HTML JavaScript HTML Caminhos de arquivo HTML Cabeçalho HTML Esquema HTML HTML Responsivo Código de computador HTML Semântica HTML Guia de estilo HTML Entidades HTML Símbolos HTML Emojis HTML Conjunto de caracteres HTML Codificação de URL HTML HTML vs. XHTML

Formulários HTML

Formulários HTML Atributos de formulário HTML Elementos de formulário HTML Tipos de entrada HTML Atributos de entrada HTML Atributos do formulário de entrada HTML

Gráficos HTML

Tela HTML HTML SVG

Mídia HTML

Mídia HTML Vídeo HTML Áudio HTML Plug-ins HTML HTML YouTube

APIs HTML

Geolocalização HTML Arrastar/Soltar HTML Armazenamento Web HTML Trabalhadores da Web HTML HTML SSE

Exemplos HTML

Exemplos HTML Questionário HTML Exercícios HTML Certificado HTML Resumo HTML Acessibilidade HTML

Referências HTML

Lista de tags HTML Atributos HTML Atributos Globais HTML Suporte ao navegador HTML Eventos HTML Cores HTML Tela HTML Áudio/vídeo HTML Tipos de documento HTML Conjuntos de caracteres HTML Codificação de URL HTML Códigos HTML Lang Mensagens HTTP Métodos HTTP PX to EM Converter Atalhos do teclado

Tamanhos de tabela HTML


As tabelas HTML podem ter tamanhos diferentes para cada coluna, linha ou toda a tabela.


     
     
     
     
     
     
     
     

Use o styleatributo com as propriedades widthou height para especificar o tamanho de uma tabela, linha ou coluna.


Largura da Tabela HTML

Para definir a largura de uma tabela, adicione o style atributo ao <table>elemento:

Exemplo

Defina a largura da tabela para 100%:

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Nota: Usar uma porcentagem como unidade de tamanho para uma largura significa quão largo este elemento será comparado ao seu elemento pai, que neste caso é o <body> elemento.


Largura da Coluna da Tabela HTML

     
     
     

Para definir o tamanho de uma coluna específica, adicione o style atributo em um <th>ou <td>elemento:

Exemplo

Defina a largura da primeira coluna para 70%:

<table style="width:100%">
  <tr>
    <th style="width:70%">Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>


Altura da linha da tabela HTML

     
     
     

Para definir a altura de uma linha específica, adicione o style atributo em um elemento de linha da tabela:

Exemplo

Defina a altura da segunda linha para 200 pixels:

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr style="height:200px">
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Exercícios HTML

Teste-se com exercícios

Exercício:

Use estilos CSS para fazer a tabela com 300 pixels de largura.

<tabela >
  <tr>
    <th>Nome</th>
    <th>Sobrenome</th>
    <th>Pontos</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith< /td>
    <td>50</td>
  </tr>
</table>