A primeira tag que indica o inicio de uma tabela é a tag <table> ela possui o atributo border cujo os valores variam de acordo com o tamanho da borda desejada .
A tag que indica a abertura de uma linha é a <tr>.
A que indica a abertura de uma cédula é a <td> que pode receber o atributo colspan para mesclar a cédula e o atributo rowspan para mesclar a linha os valores desse atributo variam de acordo com a quantidade de linhas ou cédulas que se quer mesclar.
A tag <th> é usada para o titulo da tabela, visualmente notamos seu uso pois o texto inserido entre ela fica em negrito.
A tag <caption> insere uma legenda para a tabela e deve ser colocado logo após a abertura da tabela (tag <table>).
existem ainda as tags de blocos de conteúdo das tabelas são elas:
<thead> usada para indicar título.
<tbody> para o corpo da tabela.
<tfoot> para o rodapé.
Essas tags contribuem para a acessibilidade das tabelas pois em tabelas extensas que ocupam mais de uma página o cabeçalho e o rodapé aparecerão em todas as páginas, o uso delas é super importante pois pode facilitar a vida de usuários que utilizam dispositivos móveis com telas reduzidas pois , dependendo do navegador o cabeçalho e o rodapé ficam fixos e somente o corpo da tabela rola.
exemplo:
<!DOCTYPE>
<html lang=pt-br>
<head>
</head>
<body>
<table border="1">
<caption> Tabela teste</caption>
<thead>
<tr>
<th>Nome</th><th>premios</th><th>qualquer numero</th>
</tr>
</thead>
<tbody>
<tr>
<td>matt</td><td>3</td><td>20</td>
<tr>
<td>joão</td><td>4</td><td>30</td>
</tr
<tr>
<td rowspan="2">lucas</td><td>3</td><td>40</td>
</tr>
<tr>
<td>6</td><td>20</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">essas são as pessoas</td>
</tr>
</tfoot>
</table>
</body>
</html>
Nenhum comentário:
Postar um comentário