Tag <table> HTML

Definição e uso

<table> A definição de etiqueta define a tabela HTML.

Uma tabela HTML é composta por um <table> um ou mais <tr>e<th> e <td> Elementos compostos por:

Uma tabela HTML pode conter os seguintes elementos:

Veja também:

Tutorial de HTML:Tabela HTML

Manual de Referência do DOM HTML:Objeto Table

Tutorial de CSS:Definir estilo da tabela

Exemplo

Exemplo 1

Uma tabela HTML simples, contendo duas colunas e duas linhas:

<table>
  <tr>
    <th>Mês</th>
    <th> Poupança</th>
  </tr>
  <tr>
    <td> Janeiro</td>
    <td>￥3400</td>
  </tr>
</table>

Experimente você mesmo

Exemplo 2

Como adicionar bordas dobráveis à tabela (usando CSS):

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>
<table>
  <tr>
    <th>Mês</th>
    <th> Poupança</th>
  </tr>
  <tr>
    <td> Janeiro</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td> Fevereiro</td>
    <td>￥4500</td>
  </tr>
</table>
</body>
</html>

Experimente você mesmo

Exemplo 3

Como alinhar a tabela à direita (usando CSS):

<table style="float:right">
  <tr>
    <th>Mês</th>
    <th> Poupança</th>
  </tr>
  <tr>
    <td> Janeiro</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td> Fevereiro</td>
    <td>￥4500</td>
  </tr>
</table>

Experimente você mesmo

Exemplo 4

Como alinhar a tabela no centro (usando CSS):

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
table.center {
  margin-left: auto;
  margin-right: auto;
}
</style>
</head>
<body>
<table class="center">
  <tr>
    <th>Mês</th>
    <th> Poupança</th>
  </tr>
  <tr>
    <td> Janeiro</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td> Fevereiro</td>
    <td>￥4500</td>
  </tr>
</table>

Experimente você mesmo

Exemplo 5

Como adicionar cor de fundo à tabela (usando CSS):

<table style="background-color:#00FF00">
  <tr>
    <th>Mês</th>
    <th> Poupança</th>
  </tr>
  <tr>
    <td> Janeiro</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td> Fevereiro</td>
    <td>￥4500</td>
  </tr>
</table>

Experimente você mesmo

Exemplo 6

Como adicionar margem interna à tabela (usando CSS):

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
th, td {
  padding: 10px;
}
</style>
</head>
<body>
<table>
  <tr>
    <th>Mês</th>
    <th> Poupança</th>
  </tr>
  <tr>
    <td> Janeiro</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td> Fevereiro</td>
    <td>￥4500</td>
  </tr>
</table>
</body>
</html>

Experimente você mesmo

Exemplo 7

Como definir a largura da tabela (usando CSS):

<table style="width:400px">
  <tr>
    <th>Mês</th>
    <th> Poupança</th>
  </tr>
  <tr>
    <td> Janeiro</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td> Fevereiro</td>
    <td>￥4500</td>
  </tr>
</table>

Experimente você mesmo

Exemplo 8

Como criar cabeçalhos de tabela:

<table>
  <tr>
    <th>Nome</th>
    <th>E-mail</th>
    <th>Telefone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

Experimente você mesmo

Exemplo 9

Como criar uma tabela com cabeçalho:

<table>
  <caption>Poupança Mensal</caption>
  <tr>
    <th>Mês</th>
    <th> Poupança</th>
  </tr>
  <tr>
    <td> Janeiro</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td> Fevereiro</td>
    <td>￥4500</td>
  </tr>
</table>

Experimente você mesmo

Exemplo 10

Como definir células de tabela que ultrapassam várias linhas ou colunas:

<table>
  <tr>
    <th>Nome</th>
    <th>E-mail</th>
    <th colspan="2">Telefone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

Experimente você mesmo

Atributos globais

<table> A tag também suporta Atributos globais no HTML.

Atributos de evento

<table> A tag também suporta Atributos de evento no HTML.

Configurações CSS padrão

A maioria dos navegadores usará os seguintes valores padrão para exibir <table> Elemento:

table {
  display: tabela;
  border-collapse: separado;
  border-spacing: 2px;
  border-color: cinza;
}

Experimente você mesmo

Suporte ao navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte