Html thead
Postado: 19 de junho de 2022
Tempo de Leitura: < 1 Minuto
Html thead
Neste tutorial HTML veremos como usar o elemento HTML chamado de tag <thead>
A tag <thead> em HTML é usada para dar um cabeçalho ao grupo de conteúdo do corpo. Essa tag é usada em tabelas HTML como head e body que é conhecida como thead e tbody.
O elemento html <thead> é usado em conjunto com os elementos <tbody> e <tfoot> para especificar cada parte de uma tabela como cabeçalho, corpo e rodapé.
OBS: O elemento <thead> deve ter uma ou mais tags <tr> dentro.
A tag <thead> deve ser usada no seguinte contexto: Como filho de um elemento <table> , após qualquer elemento <caption> e <colgroup> e antes de qualquer elemento <tbody> , <tfoot> e <tr> .
Dica: Os elementos <thead>, <tbody> e <tfoot> não afetarão o layout da tabela por padrão. No entanto, você pode usar CSS para estilizar esses elementos.
Veja o exemplo abaixo!
<!DOCTYPE html>
<html>
<head>
<style>
thead {color:red;}
tbody {color:blue;}
tfoot {color:#333;}
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Estilizando a Tabela com CSS</h1>
<table>
<thead>
<tr>
<th>Front-end</th>
<th>Back-end</th>
</tr>
</thead>
<tbody>
<tr>
<td>Html5</td>
<td>PHP</td>
</tr>
<tr>
<td>CSS3</td>
<td>MySql</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>JavaScript</td>
<td>Python</td>
</tr>
</tfoot>
</table>
</body>
</html>
Veja outro exemplo
Alinhar conteúdo à esquerda na tag <thead> com Css.
<table style="width:100%">
<thead style="text-align:left">
<tr>
<th>Front-end</th>
<th>Back-end</th>
</tr>
</thead>
<tbody>
<tr>
<td>Html5</td>
<td>PHP</td>
</tr>
<tr>
<td>CSS3</td>
<td>MySql</td>
</tr>
</tbody>
</table>
Configurações padrão de CSS
A maioria dos navegadores exibirá o elemento <thead> com os seguintes valores padrão:
thead {
display: table-header-group;
vertical-align: middle;
border-color: inherit;
}
Neste artigo abordamos sobre a tag Html thead.
Publicado por: Loop Nerd
326 Visualizações
Deixe um comentário