TABELAS HTML

UTILIZAÇÃO DE TABELAS

a) TABLE
Uma tabela é divida em linhas (com a tag <tr>), e cada linha é dividida em células de dados
(com a tag <td>). Ela representa "os dados da tabela," e mantém o conteúdo de uma célula de dados. A tag <td> pode conter texto, links, imagens, listas, formulários, etc.

Um exemplo de uma tabela:

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>


Representação:

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

1. tr, td, th
<tr>: Define a linha em uma tabela.

Exemplo de uma tabela HTML simples, contendo duas colunas e duas linhas:

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>


Representação:

Month	Savings
January	$100

<td>: Define uma coluna em uma tabela.

Exemplo de uma tabela HTML simples, com duas células:

<table border="1">
  <tr>
    <td>Cell A</td>
    <td>Cell B</td>
  </tr>
</table>

Representação:

Cell A

Cell B

<th>: Define o cabeçalho de uma tabela.

Exemplo de uma tabela em HTML com duas células do cabeçalho e duas células
de dados:

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

Representação:

Month	Savings
January	$100

2. caption
<caption>: Define a legenda da tabela.

Uma tabela com legenda:

<table border="1">

  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

Representação:

Monthly savings

Month	Savings
January	$100

3. thead, tfoot, body
<thead>: Define linhas que fazem parte do cabeçalho da tabela.
<tfoot>: Define linhas que fazem parte do rodapé da tabela.
<tbody>: Corpo da tabela, onde se encontram os dados.

Uma tabela com os elementos <thead>, <tfoot>, e <tbody>:


<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>


Representação:

Month	Savings
Sum	$180
January	$100
February	$80

Link: http://www.w3schools.com/html/html_tables.asp