Tag HTML <td>
A tag <td> define uma célula de dados padrão em uma tabela HTML. Deve ser usada como elemento filho de <tr>, que define uma linha na tabela.
A tag <td> especifica uma célula de dados padrão em uma tabela HTML. Ela deve ser usada como elemento filho de <tr>, que define uma linha na tabela. Para definir uma célula de cabeçalho, utiliza-se a tag <th>.
A tag <td> pode conter texto, formulários, imagens, tabelas, entre outros. O conteúdo dentro dela é alinhado à esquerda por padrão.
Se você apresentar dados tabulares em tabelas, cada célula de dados deve ser adicionada individualmente como um elemento <td>.
Todas as linhas da tabela contêm um número igual de células, equivalente ao número de células na linha mais longa. Se houver menos células em uma linha, o navegador preencherá automaticamente a linha, colocando células vazias no final.
Se precisar enfatizar que não há dados em outras células, crie células sem conteúdo onde for necessário.
As células adicionadas pelo navegador não têm bordas, e se aparecerem consecutivamente, serão exibidas como uma única célula integrada.
Sintaxe
A tag <td> vem em pares. O conteúdo é escrito entre as tags de abertura (<td>) e fechamento (</td>).
Tag HTML <td>
<table>
<tr>
<td>...</td>
</tr>
</table>Exemplo da tag HTML <td>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
tr {
background-color: lightgrey;
}
tr:first-child {
background-color: #1c87c9;
color: #fff;
}
th,
td {
padding: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Date</th>
</tr>
<tr>
<td>March</td>
<td>10.09.2018</td>
</tr>
<tr>
<td>June</td>
<td>18.07.2018</td>
</tr>
</table>
</body>
</html>Neste exemplo, usamos a tag <tr> para definir as linhas da tabela, <th> para definir células de cabeçalho e <td> para definir células de dados padrão.
Abrangendo colunas e linhas
Os atributos colspan e rowspan são frequentemente usados com a tag <td> para permitir que uma única célula se estenda por várias colunas ou linhas.
colspandefine quantas colunas uma célula ocupa. O valor deve ser um inteiro positivo; o padrão é1. Uma célula comcolspan="2"ocupa o espaço horizontal de duas células normais, portanto a linha à qual pertence deve conter um<td>a menos que as demais linhas.rowspandefine quantas linhas uma célula ocupa. O valor deve ser um inteiro positivo; o padrão é1. Uma célula comrowspan="2"se estende para a linha seguinte, de modo que essa linha seguinte deve omitir o<td>que estaria abaixo dela.
Tenha cuidado para não criar um abrangimento maior do que a tabela permite. Se um colspan ou rowspan ultrapassar a borda da tabela, os navegadores o cortam para as colunas ou linhas disponíveis, em vez de adicionar novas. Por outro lado, se você esquecer de remover as células que um abrangimento sobrepõe, a linha acaba com células demais e o layout da tabela quebra.
Exemplo da tag HTML <td> com o atributo colspan:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
tr {
background-color: #e6ebef;
}
tr:first-child {
background-color: #1c87c9;
color: #fff;
}
tr:last-child {
height: 60px;
}
tr:last-child td {
background-color: #a3cced;
vertical-align: bottom;
}
tr:last-child span {
font-size: 14px;
}
th,
td {
padding: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<table>
<tr>
<th>Company e-mail</th>
<th>Date</th>
</tr>
<tr>
<td>
<a href="#">[email protected]</a>
</td>
<td>01.09.2017</td>
</tr>
<tr>
<td colspan="2">[email protected];
<strong>01.09.2017 </strong>
<span>(received date)</span>
</td>
</tr>
</table>
</body>
</html>Resultado
Exemplo da tag HTML <td> com o atributo rowspan:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
th, td {
padding: 10px;
border: 1px solid #666;
}
thead tr {
background-color: #1c87c9;
color: #fff;
}
tbody td {
background-color: #e6ebef;
}
.year {
background-color: #a3cced;
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Month</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>March</td>
<td class="year" rowspan="2">2014</td>
</tr>
<tr>
<td>April</td>
</tr>
</tbody>
</table>
</body>
</html>Associando células a cabeçalhos para acessibilidade
Em uma tabela simples, leitores de tela conseguem relacionar cada célula de dados ao seu cabeçalho de coluna e de linha automaticamente. Em uma tabela complexa — com múltiplos níveis de cabeçalhos ou com células mescladas — essa associação automática falha. Para manter essas tabelas legíveis por tecnologias assistivas, atribua um id a cada <th> e liste os ids relevantes no atributo headers de cada <td> relacionado. Uma célula pode referenciar vários cabeçalhos separando seus ids com espaços.
Exemplo da tag HTML <td> com o atributo headers:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
border-collapse: collapse;
margin: 30px auto;
}
th, td {
padding: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<table>
<tr>
<th id="name">Name</th>
<th id="hours">Hours</th>
<th id="rate">Rate</th>
</tr>
<tr>
<td headers="name">Ann</td>
<td headers="hours">38</td>
<td headers="rate">$25</td>
</tr>
<tr>
<td headers="name">Bob</td>
<td headers="hours">40</td>
<td headers="rate">$30</td>
</tr>
</table>
</body>
</html>Aqui, cada célula de dados aponta para o cabeçalho que a descreve, de modo que um leitor de tela pode anunciar, por exemplo, "Taxa: $25" em vez de apenas "$25".
Problemas de layout com <td>
Por padrão, cada célula de dados se alinha verticalmente com as células na mesma coluna das outras linhas. Adicionar um <td> extra a apenas uma linha desalinha esse layout, pois cada célula seguinte naquela linha se desloca uma coluna.
Por exemplo, esta linha possui três células enquanto o restante da tabela tem duas, fazendo com que as células não se alinhem sob os cabeçalhos:
<tr>
<th>Month</th>
<th>Total</th>
</tr>
<tr>
<td>March</td>
<td>Q1</td>
<td>120</td>
</tr>A solução é mesclar células com colspan em vez de adicionar uma coluna extra. Aqui, a célula "March" abrange as duas colunas acima dos totais, mantendo a grade alinhada:
<tr>
<th>Month</th>
<th>Total</th>
</tr>
<tr>
<td colspan="2">March (Q1)</td>
</tr>
<tr>
<td>April</td>
<td>120</td>
</tr>Atributos
| Atributo | Valor | Descrição |
|---|---|---|
| abbr | text | Define uma versão abreviada do conteúdo de uma célula, ou um texto alternativo. (Agentes de usuário, como leitores de voz, podem apresentar essa descrição antes do próprio conteúdo). Não suportado em HTML 5. |
| align | left right center justify char | Alinha o conteúdo em uma célula. Não suportado em HTML 5. |
| axis | category_name | Categoriza células com conteúdo semelhante. Não suportado em HTML 5. |
| background | background | Define o plano de fundo em uma célula. Não suportado em HTML 5. |
| bgcolor | rgb(x,x,x) #xxxxxx colorname | Define a cor de fundo de uma célula. Não suportado em HTML 5. |
| bordercolor | bordercolor | Define a cor da borda. Não suportado em HTML 5. |
| char | character | Alinha o conteúdo de uma célula a um caractere. Usado apenas se o atributo align="char". Não suportado em HTML 5. |
| charoff | number | Define o número de caracteres que o conteúdo será alinhado a partir do caractere especificado pelo atributo char. Usado apenas se o atributo align="char". Não suportado em HTML 5. |
| colspan | number | Define o número de colunas que uma célula deve abranger. O valor do atributo deve ser um inteiro positivo. O valor padrão é 1. |
| headers | header_id | Especifica uma ou mais células de cabeçalho (definidas pela tag <th>) às quais uma célula padrão está relacionada. |
| height | % pixels | Define a altura de uma célula. Não suportado em HTML 5. |
| nowrap | nowrap | Especifica que o conteúdo dentro de uma célula não deve ser quebrado em linhas. Não suportado em HTML 5. |
| rowspan | number | Especifica o número de linhas que uma célula deve abranger. O valor do atributo deve ser um inteiro positivo. O valor padrão é 1. Não é recomendado usar valores superiores a 65534, pois serão limitados a 65534. |
| valign | top middle bottom baseline | Especifica o alinhamento vertical do conteúdo dentro de uma célula. Não suportado em HTML 5. Use a propriedade CSS vertical-align em vez disso. |
| width | % pixels | Define a largura de uma célula. Não suportado em HTML 5. |
A tag <td> suporta os Atributos Globais e os Atributos de Evento.
O atributo scope não é válido em <td>; ele pertence ao elemento <th>, onde declara se um cabeçalho se aplica a uma coluna ou a uma linha. Use headers em um <td> para apontar de volta para suas células de cabeçalho.
Como estilizar uma tag HTML <td>
Os estilos mais comuns para <td> controlam espaçamento, bordas e alinhamento. Aplique td junto com th para que células de cabeçalho e de dados compartilhem uma aparência consistente:
table {
border-collapse: collapse;
}
td {
padding: 10px;
border: 1px solid #666;
text-align: left;
vertical-align: middle;
}
td:hover {
background-color: #f1f7fb;
}Tags relacionadas
<table>— o contêiner que agrupa todas as linhas e células.<tr>— define uma linha da tabela; todo<td>deve estar dentro de uma.<th>— define uma célula de cabeçalho, associada a<td>por meio do atributoheaders.