Outro dia me deparei com uma ferramenta interessante capaz de fazer tabelas em HTML automaticamente, o Yahoo! GeoCities - HTML Table Maker. Até então nada demais, afinal, você pode criar uma tabela em html sem maiores problemas com um simples editor de texto como o notepad. E, como o post é sobre tabelas e não sobreo HTML Table Maker, vamos a um tutorial:
No geral, basta inserir o seguinte código e terás uma tabela de seis células (duas colunas, duas linhas e títulos) com borda de 1px:
| Título 1 | Título 2 |
|---|---|
| coluna 1, célula 1 | coluna 1, célula 2 |
| coluna 2, célula 1 | coluna 2, célula 2 |
<table border=”1″>
<tr>
<th>Título 1</th>
<th>Título 2</th>
</tr>
<tr>
<td>coluna 1, célula 1</td>
<td>coluna 1, célula 2</td>
</tr>
<tr>
<td>coluna 2, célula 1</td>
<td>coluna 2, célula 2</td>
</tr>
</table>
Os atributos de uma tabela padrão, como o exemplo acima, são:
- <table> - Define a tabela
- <th> - Define o título da tabela
- <tr> - Define a coluna da tabela
- <td> - Define a célula da tabela
- <thead> - Define o cabeçalho da tabela
- <tbody> - Define o corpo da tabela
- <tfoot> - Define pé da tabela
Como atributos opcionais você pode inserir as seguintes tags:
- align (left, center ou right) - para alinhar a tabela (recomendável fazer isso pelo css);
- bgcolor (rgb(x,x,x) ou #xxxxxx) - altera o fundo da tabela (recomendável fazer isso pelo css);
- border (pixels) - altera a largura da borda;
- cellpadding (pixels ou %) - altera o espaço entre as paredes das células e também o conteúdo;
- cellspacing (pixels ou %) - Altera o espaço entre as células;