A tabela
é o conceito mais bonito no html.
Nos dias
de hoje, a maioria dos websites são criados utilizando a estrutura da tabela.
O conceito de tabela é muito simples, apenas linhas e
colunas.
Vamos
dividir a janela em tantos números de linhas e colunas conforme necessário.
Esta
etiqueta não pode agir sozinha. Necessita das etiquetas "tr" e "td" também.
Código de Exemplo:
<table>
</table>
Como
sabemos que a tabela é um conjunto de linhas e colunas, apresentamos as linhas
dentro da tabela usando <tr>
</tr>. Também cada linha pode ter qualquer número de colunas. uma a
x..., então introduzimos as colunas dentro de linhas utilizando as etiquetas <td> </td>
Portanto colocando tudo em conjunto definimos uma
tabela com uma linha e coluna da seguinte forma:
<table align="" border="0"
cellspacing="0" cellpadding="3" width="100%"
height="100%" class="mceEditable">
<tbody>
<tr>
<td>Coluna 1</td>
<td>Coluna 2</td>
</tr>
<tr>
<td> Coluna 3</td>
<td >Coluna 4</td>
</tr>
</tbody>
</table>
Resultado:
| Coluna 1 | Coluna 2 |
| Coluna 3 | Coluna 4 |
PASSO 1: Configurar as bordas:
Código de Exemplo:
<table align="" border="0"
cellspacing="0" cellpadding="3" width="100%"
height="100%" class="mceEditable">
<tbody>
Ø
Borda
border="0"
O zero (0) significa
sem borda
Ø
Espaço entre as
células
cellspacing="0"
O zero (0) significa
sem espaço
Ø
Margens da célula
cellpadding="3"
O três (3) é a margem
Ø
Largura da tabela.
width="100%"
Ø
Altura da tabela.
height="100%"
PASSO 2: configurar a tabela
Código de Exemplo:
<tr>
<td>Coluna
1</td>
<td>Coluna
2</td>
</tr>
Este
código é para uma tabela com uma linha e duas colunas, para colocar mais uma
coluna é só acrescentar o código <td>Coluna
1</td> antes código </tr>.
Código de Exemplo:
<tr>
<td>Coluna
1</td>
<td>Coluna
2</td>
<td>Coluna 1</td>
</tr>
NOTA: pode acrescentar as colunas que quiser.
Para
criar mais uma linha é só acrescentar o código da linha inicial em baixo.
Código de Exemplo:
<tr>
<td>Coluna
1</td>
<td>Coluna
2</td>
</tr>
<tr>
<td>Coluna
1</td>
<td>Coluna
2</td>
</tr>
Nota 1: em preto é linha 1 e em azul é a linha 2
Nota 2: pode acrescentar as linhas que quiser.
Sem comentários:
Enviar um comentário