Exemplo Tabela HTML
| Número | Primeiro nome | Último nome | Pontos |
|---|---|---|---|
| 1 | Eve | Jackson | 94 |
| 2 | John | Doe | 80 |
| 3 | Adam | Johnson | 67 |
| 4 | Jill | Smith | 50 |
Definindo tabelas HTML
Exemplo
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table> Tente você mesmo " Exemplo explicado:
Tabelas são definidas com o <table> tag.
Tabelas são divididos em linhas da tabela com o <tr> tag.
As linhas da tabela são divididos em dados da tabela com o <td> tag.
A linha da tabela também pode ser dividida em títulos de tabela com o <th> tag.
Os dados da tabela <td> são os recipientes de dados da tabela.
Eles podem conter todos os tipos de elementos HTML como texto, imagens, listas, outras tabelas, etc.
Uma tabela HTML com um atributo border
Se você não especificar uma borda para a tabela, ele será exibido sem fronteiras.
A fronteira pode ser adicionado usando a border atributo:
Exemplo
<table border="1" style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table> Tente você mesmo " A border atributo está no seu caminho para fora do padrão HTML! É melhor usar CSS.
Para adicionar bordas, use a propriedade border CSS:
Lembre-se de definir as fronteiras, tanto para a mesa e as células da tabela.
Uma tabela HTML com Borders Collapsed
Se você quiser as fronteiras a entrar em colapso em uma beira, adicione CSS border-collapse :
Uma tabela HTML com estofamento celular
preenchimento da célula especifica o espaço entre o conteúdo celular e de suas fronteiras.
Se você não especificar um preenchimento, as células da tabela serão exibidos sem estofamento.
Para definir o preenchimento, use o CSS padding propriedade:
Exemplo
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
} Tente você mesmo " HTML títulos de tabelas
Títulos da tabela são definidos com o <th> tag.
Por padrão, todos os principais navegadores exibir títulos de tabela, como negrito e centralizado:
Exemplo
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table> Tente você mesmo " Para alinhar à esquerda os títulos de tabela, use o CSS text-align propriedade:
Uma tabela HTML com espaçamento de borda
espaçamento da borda especifica o espaço entre as células.
Para definir o espaçamento da borda de uma mesa, use o CSS border-spacing propriedade:
Se a tabela entrou em colapso fronteiras, border-spacing não tem efeito.
Células da tabela que abrangem muitas colunas
Para fazer um intervalo de células mais de uma coluna, utilize o colspan atributo:
Exemplo
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table> Tente você mesmo " Células da tabela que se estendem por várias linhas
Para fazer um intervalo de células mais de uma linha, use o rowspan atributo:
Exemplo
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table> Tente você mesmo " Uma tabela HTML com uma legenda
Para adicionar uma legenda a uma tabela, use o <caption> tag:
Exemplo
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table> Tente você mesmo " O <caption> tag deve ser inserido imediatamente após o <table> tag.
Um estilo especial para uma tabela
Para definir um estilo especial para uma mesa especial, adicionar um id atributo para a tabela:
Exemplo
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>Agora você pode definir um estilo especial para esta tabela:
table#t01 {
width: 100%;
background-color: #f1f1c1;
} Tente você mesmo " E adicionar mais estilos:
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
} Tente você mesmo " Resumo do capítulo
- Use o HTML <table> elemento para definir uma tabela
- Use o HTML <tr> elemento para definir uma linha da tabela
- Use o HTML <td> elemento para definir uma tabela de dados
- Use o HTML <th> elemento para definir um cabeçalho da tabela
- Use o HTML <caption> elemento para definir uma legenda da tabela
- Use o CSS border propriedade para definir uma fronteira
- Use o CSS border-collapse propriedade a entrar em colapso bordas de célula
- Use o CSS padding propriedade para adicionar preenchimento às células
- Use o CSS text-align propriedade para alinhar o texto da célula
- Use o CSS border-spacing propriedade para definir o espaçamento entre as células
- Use o colspan atributo para fazer um intervalo de células muitas colunas
- Use o rowspan atributo para fazer um intervalo de células muitas linhas
- Use o id atributo para definir exclusivamente uma tabela
Teste-se com exercícios!
Exercício 1 » exercício 2» exercício 3 » exercício 4» exercício 5 » exercício 6»
HTML Tabela Etiquetas
| etiqueta | Descrição |
|---|---|
| <table> | Define uma tabela |
| <th> | Define uma célula de cabeçalho numa mesa |
| <tr> | Define uma linha em uma tabela |
| <td> | Define uma célula em uma tabela |
| <caption> | Define uma legenda da tabela |
| <colgroup> | Especifica um grupo de uma ou mais colunas numa tabela para formatação |
| <col> | Especifica propriedades da coluna para cada coluna dentro de um <colgroup> elemento |
| <thead> | Grupos do conteúdo do cabeçalho em uma tabela |
| <tbody> | Grupos o conteúdo do corpo de uma tabela |
| <tfoot> | Grupos do conteúdo do rodapé em uma tabela |