Tableless é um site que não utiliza tabelas para estruturar o seu layout e segue os padrões web.
Portanto, hoje em dia tabelas são usadas principalmente para apresentar dados em linhas e colunas de forma lógica.
<table> - É a tabela
<th> - É utilizada para titulo na tabela
<tr> - É a linha da tabela
<td> - É a coluna “dados” da tabela
<caption> - É a legenda da tabela
Dentro da tag td e th podemos colocar acrescentar duas tags para “alongar” a coluna. São elas:
<colspan> - aumenta na horizontal
<rowspan> - aumenta na vertical
Exemplo
| 1º Exemplo | |||
|---|---|---|---|
| S I T E |
A B | C | |
| D | E | F | |
| G H I | |||
<table border="1">
<caption>Exemplo 1</caption>
<tr>
<th colspan="4"> 1º Exemplo </th>
</tr>
<tr>
<td rowspan="3">S <br> I <br> T <br>E</td>
<td colspan="2">A B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
<td colspan="3">G H I</td>
</tr>
</table>
Podemos também definir um cabeçalho, corpo e rodapé para a tabela com as seguintes tags thead, tbody e tfoot.
<thead> - É o cabeçalho
<tbody> - É o corpo
<tfoot> - É o rodapé
Exemplo
| 2º exemplo | |||
|---|---|---|---|
| Exemplo | de | cabeçalho | |
| Exemplo | de | corpo | |
| Exemplo | de | corpo | |
| Exemplo | de | corpo | |
| Exemplo de Rodape | |||
<table border="1">
<caption>Exemplo 2</caption>
<thead>
<tr>
<th colspan="4">2º exemplo</th>
</tr>
<tr>
<th>Exemplo</th>
<th>de</th>
<th>cabeçalho</th>
</tr>
</thead>
<tbody>
<tr>
<td>Exemplo</td>
<td>de</td>
<td>corpo</td>
</tr>
<tr>
<td>Exemplo</td>
<td>de</td>
<td>corpo</td>
</tr>
<tr>
<td>Exemplo</td>
<td>de</td>
<td>corpo</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3"> Exemplo de Rodape</td>
</tr>
</tfoot>
</table>
Nenhum comentário:
Postar um comentário