HTML: Tabelas

HTML: Tabelas

Tabelas – atributos

A estrutura básica de uma Tabela é simples:  iniciamos a Tabela com o comando <TABLE> e terminamos com </TABLE>; dentro da Tabela iniciamos cada linha com <TR> e terminamos com </TR> e dentro de cada linha iniciamos uma coluna com <TD> e terminamos com </TD>.
Uma Tabela 2 X 2 seria então:
<TABLE >
<TR>
<TD> a </TD> <TD> b </TD>
</TR>
<TR>
<TD> c </TD> <TD> d </TD>
</TR>
</TABLE>
a
b
c
d
Se quisermos que a Tabela tenha bordas acrescentamos o atributo BORDER no começo da Tabela, podemos também especificar a espessura da borda em pixels, por exemplo, se quisermos uma borda de 5 pixels de espessura fazemos BORDER=5 veja:
<TABLE BORDER=5>
<TR>
<TD> a </TD> <TD> b </TD>
</TR>
<TR>
<TD> c </TD> <TD> d </TD>
 </TR>
</TABLE>
a
b
c
d

No lugar de <TD> </TD> para definir uma célula podemos usar <TH> </TH>, que indica que esta célula é uma cabeçalho (header).] O texto dentro de uma célula definida como cabeçalho é mostrado em negrito e centalizado. Um outro atributo é <CAPTION> </CAPTION>, que define a legenda da tabela:
<TABLE BORDER=0>
<CAPTION> Exemplo </CAPTION>
<TR>
<TH> Título 1 </TH> <TH> Título 2 </TH>
</TR>
<TR> <TD> c </TD> <TD> d </TD> </TR>
</TABLE>
Exemplo
Título 1
Título 2
c
d

Podemos mudar os atributos de cada célula dentro de uma Tabela com os seguintes comandos:
Atributo
Descrição
ALIGN (LEFT, CENTER, RIGHT)
Alinhamento horizontal da célula
VALIGN (TOP, MIDDLE, BOTTOM)
Alinhamento vertical da célula
COLSPAN=n
Número (n) de colunas que uma célula ocupa
ROWSPAN=n
Número de linhas que uma célula ocupa
BGCOLOR=
Cor a ser usada para preencher a célula
WIDTH=
Largura da célula
CELLPADDING
Espaço a ser acrescentado entre uma coluna e outra

Exemplo:
<CENTER>
<TABLE BORDER=10 WIDTH="80%" CELLPADDING=5>
<TR> <TD COLSPAN=2 ALIGN=CENTER> aaa </TD>
<TD BGCOLOR="#00CCCC"> bbb </TD> </TR>
<TR> <TD ROWSPAN=2 VALIGN=BOTTOM> ccc </TD> 
<TD ALIGN=RIGHT> ddd </TD>
<TD> eee </TD> </TR>
<TR> <TD> fff </TD> 
<TD> ggg </TD> </TR>
</TABLE>
</CENTER>

Que resulta em:
aaa
bbb
ccc
ddd
eee
fff
ggg


Tabelas – Mesclando Linhas e Colunas

Mesclando células na horizontal:

Para mesclar células na horizontal (Em uma mesma linha), basta usarmos um parâmetro da tag <td> Chamado colspan. 

Exemplo:
<title>Mesclando na hotizontal</title>
</head>
<body>
<table border=1>
<TR> <td colspan=”3”>Tabeça de produtos</td>
</TR> <td>Categoria</td> <td>Produto</td> <td>Preço</td> </TR>
<TR> <td>Multimídia</td><td>Heardphone</td> <td>6</td> </TR>
<TR> <td>Multimídia</td> <td>Webcam</td> <td>13</td> </TR>
<TR> <td>Multimídia</td><td>Placa de vídeo 512 mb</td><td>85</td></TR>
</table>
</body>
</html>

Aqui, criamos a tabela contando 5 linhas e 3 colunas. Perceba agora, que a primeira linha (Primeiro <TR>) contém apenas uma célula (um <td>). Repare que nesse <td>, definimos o parâmetro colspan com valor “3”, com isso, informamos que a célula deve ser masclada com as próximas duas células da mesma linha (Célula atual + duas próximas células=3).


Mesclando células na vertical

Para mesclar células na vertical(Em uma mesma coluna), basta usarmos o parâmetro tag <td> chamado rowspan. 

EX:
<html>
<head>
<title>Mesclando Células na Vertical</title>
</head>
<body>
<h1>Tabela de Produtos</h1>
<table border="1">
<tr>
<td>Categoria</td>
<td>Produto</td>
<td>Preço</td>
</tr>
<tr>
<td rowspan="3">Multimídia</td>
<td>Headphone</td>
<td>6</td>
</tr>
<tr>
<td>WebCam</td>
<td>13</td>
</tr>
<tr>
<td>Placa de Vídeo 512 MB</td>
<td>85</td>
</tr>
</table>
</body>
</html>

No código acima, é criada uma tabela com três colunas e quarto linhas. Definindo o parâmetro rowspan com valor “3” assim como foi feito com o parâmetro colspan. Informamos assim, que essa célula será mesclada com as primeiras próximas duas linhas abaixo. (Célula atual + duas células = 3).