CABEÇALHOS DE TABELA HTML5
Th é o elemento do
cabeçalho da tabela . th representa o elemento da célula da tabela.
<html>
<style>
table, th, td {
border:1px solid black;
border-collapse: collapse;
}
</style>
<body>
<h2>TABELA COM 100%</h2>
<table
style="width:100%">
<tr>
<th>NOME</th>
<th>SOBRE NOME</th>
<th>IDADE</th>
</tr>
<tr>
<td>José</td>
<td>Sousa</td>
<td>25</td>
</tr>
<tr>
<td>Maria</td>
<td>Silva</td>
<td>65</td>
</tr>
<tr>
<td>João</td>
<td>Paulo</td>
<td>50</td>
</tr>
</table>
</body>
</html>
CABEÇALHOS DA TABELA HTML NA VERTICAL
A primeira coluna é os cabeçalhos da tabela. a primeira célula em cada linha como um th
elemento.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid
black;
border-collapse:
collapse;
}
</style>
</head>
<body>
<h2>TABELA COM CABEÇALHOS NA VERTICAL</h2>
<table style="width:100%">
<tr>
<th>NOME</th>
<td>João</td>
<td>Eva</td>
</tr>
<tr>
<th>SOBRE
NOME</th>
<td>Silva</td>
<td>Sousa</td>
</tr>
<tr>
<th>IDADE</th>
<td>20</td>
<td>30</td>
</tr>
</table>
</body>
</html>
ALINHAR CABEÇALHOS DA TABELA.
Para alinhar cabeçalhos a esquerda usa text-align: left
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
border-collapse: collapse;
}
th {
text-align: left;
}
</style>
<body>
<h2>TABELA COM 100%</h2>
<table style="width:100%">
<tr>
<th>NOME</th>
<th>SOBRE NOME</th>
<th>IDADE</th>
</tr>
<tr>
<td>José</td>
<td>Sousa</td>
<td>25</td>
</tr>
<tr>
<td>Maria</td>
<td>Silva</td>
<td>65</td>
</tr>
<tr>
<td>João</td>
<td>Paulo</td>
<td>50</td>
</tr>
</table>
</body>
</html>
CABEÇALHO PARA VÁRIAS COLUNA
Um cabeçalho vai servi para duas ou mais colunas.
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
border-collapse: collapse;
}
</style>
<body>
<h2>TABELA </h2>
<table style="width:100%">
<tr>
<th colspan="2">NOME</th>
<th>IDADE</th>
</tr>
<tr>
<td>José</td>
<td>Sousa</td>
<td>25</td>
</tr>
<tr>
<td>Maria</td>
<td>Silva</td>
<td>65</td>
</tr>
<tr>
<td>João</td>
<td>Paulo</td>
<td>50</td>
</tr>
</table>
</body>
</html>
LEGENDA DA TABELA
Para adicionar uma legenda para toda tabela usa tag
<caption>
GASTO DO ANO </caption>
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid
black;
border-collapse:
collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2> TABELA COM LEGENDA</h2>
<table style="width:100%">
<caption>
gasto do ano</caption>
<tr>
<th>Mês</th>
<th>Despesa </th>
</tr>
<tr>
<td>Janeiro</td>
<td>R$
2000,00</td>
</tr>
<tr>
<td>Fervereiro</td>
<td>R$
2500,00</td>
</tr>
</table>
</body>
</html>
OBSERVAÇÃO: COPIE OS CODIGO NO BLOCO NOTA E DEPOIS SALVA
QUALQUER NOME .HTML
E VEJA RESULTADO DE SEU APRENDIZADO.