Tabelas HTML

24 março 2013

Antigamente os layouts eram feitos em tabelas, mas dependendo da resolução da tela o site desconfigurava e com isso surgiu à necessidade de algo mais útil e que desse para visualizar em diferentes tipos de resolução, o tableless.
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
Exemplo 1
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
Exemplo 2
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>
Fonte: O que é tableless?
Related Posts Plugin for WordPress, Blogger...

Nenhum comentário:

Postar um comentário

Modelo Travel do Blogger, modificado por Bruna Leite. Tecnologia do Blogger.