Alberto test: TABELAS

Tabelas HTML são uma das formas mais comuns de conteúdo alinhando tabular em linhas e colunas.

O rótulo geral, que inclui todos os
<TABLE> </TABLE>

<TABLE>
    [resto de etiquetas]
</TABLE>

No próximo nível, dentro do limite são as etiquetas para cada forma de linha (table row) na tabela, que são <tr> </tr> e . Deve ser repetido tantas vezes quantas as que deseja ter as linhas da tabela. Ou seja, para uma tabela com duas linhas:

<TABLE>
    <TR>
        [etiquetas das celas primeira fila]
    </TR>
    <TR>
        [etiquetas das celas segonda fila]
    </TR>
</TABLE>

No último nível (no acima) são as etiquetas para cada célula (table data), que são <TD> e </ TD> e (table header) cabeçalho de tabela, que são <TH> e </ TH>

Dentro das tags TH colocar o conteúdo (texto, imagens, etc.) E tags TH dentro de um texto que, por padrão, são exibidas em negrito.

O rótulo deve ser repetido quantas vezes queremos ter células nessa linha:

<TABLE>
    <TR>
        <TH>
            TITULO OU CABEÇALHO
        </TH>
    </TR>
    <TR>
        <TD>
            CONTEUDO
        </TD>
    </TR>
</TABLE>

Uma etiqueta alternativa, para adicionar um título geral para toda a tabela, acima deste texto, indicando o seu conteúdo. Você fica marcado <CAPTION> </ CAPTION>:

<TABLE>
    <CAPTION>
        TITULO DA TABELA
    </CAPTION>
    [resto das etiquetas]
</TABLE>

Finalmente, um número de etiquetas opcionais que são usados para agrupar outras etiquetas.

COL (coluna em uma tabela) e COLGROUP (grupo de colunas em uma tabela) são usados para agrupar colunas, enquanto o THEAD (cabeçalho da tabela), TFOOT (pé de mesa) e TBODY (corpo da tabela) são usados para agrupar linhas .

Este exemplo é uma tabela simples com duas linhas e três colunas com um cabeçalho. Dentro de cada célula contém um texto:

<TABLE>
    <CAPTION>
        EXEMPLO DUMA TABELA
    </CAPTION>
    <TR>
        <TH>
            COLUNA 1
        </TH>
        <TH>
            COLUNA 2
        </TH>
        <TH>
            COLUNA 3
        </TH>
    </TR>
    <TR>
        <TD>
            fila1-cela1
        </TD>
        <TD>
            fila1-cela2
        </TD>
        <TD>
            fila1-cela3
        </TD>
    </TR>
    <TR>
        <TD>
            fila2-cela1
        </TD>
        <TD>
            fila2-cela2
        </TD>
        <TD>
            fila2-cela3
        </TD>
    </TR>
</TABLE>

este é o Exemplo duma tabela simples

EXEMPLO DUMA TABELA
COLUNA 1	COLUNA 2	COLUNA 3
fila1-celula1	fila1-celula2	fila1-celula3
fila2-celula1	fila2-celula2	fila2-celula3

E se colocar um número diferente de células nas fileiras? O navegador chama a tabela e complete com espaços em branco.

No exemplo acima, podemos eliminar a linha1-cel2 e para vê-lo claramente, vamos adicionar uma borda e expandir a largura das células

EXEMPLO DUMA TABELA
COLUNA 1	COLUNA 2	COLUNA 3
fila1-celula1	fila1-celula3
fila2-celula1	fila2-celula2	fila2-celula3

Como visto, este não é o espaço vazio no meio, mas no final da linha.

Até agora, os exemplos, as células continham apenas texto, mas você pode colocar qualquer elemento HTML, incluindo imagens, links, lista, etc. Mesmo, você também pode obter outra tabela:

<TABLE BORDER=1>
    <TR>
        <TD>
            <IMG SRC="URLimagen">
        </TD>
        <TD>
            <TABLE BORDER=1>
                <TR>
                    <TD>1</TD><TD>2</TD>
                </TR>
                <TR>
                    <TD>3</TD><TD>4</TD>
                </TR>
            </TABLE>
        </TD>
    </TR>
</TABLE>

1	2
3	4

Cada etiqueta de uma tabela tem um número de atributos que dão uma grande flexibilidade.
Estes sao os mais utilizados

align=alinheamento	posiçao da tabela respeito da janela
background=imagem	imagem do fundo
bgcolor=color	côr do fundo das celas
border=valor	controla a largura do marco que rodeia uma tabela
cellpadding=valor	espaço no interior das celas
cellspacing=valor	espaço de celas
frame=dato	qué partes do marco mostrar
height=valor	altura duma cela
rules=dato	línheas de diviçao de filas y colunas
width=valor	largura da cela

Vamos ver alguns dos mais utilizados.

Uma das característica mais evidente é as tabelas de dados pode ser enquadrada por uma borda. Para isso, adicione o atributo BORDER para a tag TABLE, e colocar um valor que indica a largura:

<TABLE BORDER=largo>

O valor padrão é de 1 BORDER-lo, a menos que o vemos, nós escrevemos BORDER = 0.

Tipicamente é o navegador que é responsável para o dimensionamento do tamanho total da tabela de acordo com o número de linhas e colunas e fundamentealmente, de acordo com o conteúdo das células, a espessura das bordas, etc. No entanto, é por vezes necessário para forçar o bordo tem dimensões totais maiores ou menores do que o operador, em largura e altura. Isto é feito adicionando dentro da tabela WIDTH e HEIGHT dando-lhes um valor que pode ser um percentual ou um valor expresso em pixels.

<TABLE WIDTH=400 HEIGHT=200>

Por defeito, as tabelas são transparentes, mas pode ter uma cor de fundo para isso usamos o atributo BGCOLOR = "# xxyyzz".

<TABLE BGCOLOR="#000000">

Você também pode usar uma imagem de fundo para usar esta FUNDO atributo = "URLimagem".

<TABLE BACKGROUND="URLimagem">

Por defeito, a separação entre as diferentes células de uma tabela é de dois pixels, mas que pode mudar com o atributo CellSpacing. Da mesma forma, por padrão, a separação entre a fronteira eo conteúdo dentro das células é de um pixel, mas você pode mudar a CellPadding atributo

<TABLE CELLSPACING=10 CELLPADDING=5>

Estes são os atributos do elemento TR:

align=left\|center\|right\|justify\|char	alinheamento
bgcolor=cor	cor de fundo duma fila
char=carater	caráter de alinheamento, p.ex. char=':'
charoff=valor	offset para caráter de alinheamento
valign=top\|middle\|bottom\|baseline	alineaçao vertical das celulas

E estes são os atributos do elemento TH e TD

abbr=texto	abreviatura da celula do cabeçalho
align=left\|center\|right\|justify\|char	alinheamento
axis=dato	lista de cabeçalhos relacionados separados por vírgulas
background=imagem	imagem de fundo
bgcolor=cor	cor de fundo de una celda
char=carater	carácter de alinheamento, p.ej. char=':'
charoff=valor	deslocamento dos caracteres alinhamento
colspan=quantidad	número de colunas abrangidas pela célula
headers=dato	lista de ID para células de cabeçalho
height=valor	altura de uma célula
nowrap	suprimir ajuste automático de línheas
rowspan=quantidad	número de linhas abrangidas pela célula
scope=dato	âmbito de uma célula de cabeçalho
valign=top\|middle\|bottom\|baseline	alinhamento vertical nas células
width=valor	largo da celula

Alguns dos atributos das células são semelhantes aos do elemento TABLE a largura ea altura pode ser ajustado adicionando Width e Height.

<TD WIDTH=400 HEIGHT=200>

Eles também podem ter uma cor ou uma imagem de fundo:

<TD BGCOLOR="#000000">
<TD BACKGROUND="URLimagen">

1	2
3	4

Normalmente, o conteúdo de uma célula é alinhado à esquerda, o atributo ALIGN é usado para modificar. Estes valores são comumente utilizados:

<TD ALIGN="left">alinheado a esquerda</TD>
<TD ALIGN="right">alinheado a direita</TD>
<TD ALIGN="center">centrado</TD>
<TD ALIGN="justify">texto justificado</TD>

Um par de atributos que permitem que uma célula para "expandir" abraçando outros. COLSPAN Medainte estendê-la horizontalmente e verticalmente ROWSPAN:
Este é o modelo de uma mesa com seis células, duas linhas e três colunas:

<TABLE BORDER=1>
    <TR>
        <TD>CELULA 1</TD>
        <TD>CELULA 2</TD>
        <TD>CELULA 3</TD>
    </TR>
    <TR>
        <TD>CELULA 4</TD>
        <TD>CELULA 5</TD>
        <TD>CELULA 6</TD>
    </TR>
</TABLE>

CELULA 1	CELULA 2	CELULA 3
CELULA 4	CELULA 5	CELULA 6

Agora, vamos estender para cobrir célula a célula 1 2:

<TABLE BORDER=1>
    <TR>
        <TD COLSPAN="2">CELULA1</TD>
        <TD>CELULA 3</TD>
    </TR>
    <TR>
        <TD>CELULA 4</TD>
        <TD>CELULA 5</TD>
        <TD>CELULA 6</TD>
    </TR>
</TABLE>

CELULAS 1 y 2		CELULA 3
CELULA 4	CELULA 5	CELULA 6

Ea célula 4 também se estendem para cobrir as células 5 e 6:

<TABLE BORDER=1>
    <TR>
        <TD COLSPAN="2">CELULA 1</TD>
        <TD>CELULA 3</TD>
    </TR>
    <TR>
        <TD COLSPAN="3">CELULA 4</TD>
    </TR>
</TABLE>

CELULAS 1 y 2		CELULA 3
CELULA 4, 5 y 6

Na outra direção, nós estendemos a célula 1 para cobrir as células 4

<TABLE BORDER=1>
    <TR>
        <TD ROWSPAN="2">CELULA1</TD>
        <TD>CELULA 2</TD>
        <TD>CELULA 3</TD>
    </TR>
    <TR>
        <TD>CELULA 5</TD>
        <TD>CELULA6</TD>
    </TR>
</TABLE

CELULAS 1 y 4	CELULA 2	CELULA 3
CELULAS 1 y 4	CELULA 5	CELULA 6

Finalmente, combinar ambos os atributos e estender a célula 5 para cobrir a célula 6:

<TABLE BORDER=1>
    <TR>
        <TD ROWSPAN="2">CELULA 1</TD>
        <TD>CELULA 2</TD>
        <TD>CELULA 3</TD>
    </TR>
    <TR>
        <TD COLSPAN="2">CELULAS 5 y 6</TD>
    </TR>
</TABLE>

CELULAS 1 y 4	CELULA 2	CELULA 3
	CELULAS 5 y 6

Estes são os atributos dos elementos que COL e COLGROUP discutidos abaixo:

span=valor	atributos COL afectam N colunas
width=valor	largura de la coluna
align=left\|center\|right\|justify\|char	alinheamento
valign=top\|middle\|bottom\|baseline	alinheamento vertical das celulas
char=carater	caráter de alinheamento, p.ej. char=':'
charoff=valor	offset para caráter de alinhamento

Esses são os atributos do elementos, TBODY TFOOT e THEAD

align=left\|center\|right\|justify\|char	alinheamento
valign=top\|middle\|bottom\|baseline	alinheamento vertical das celulas
char=caracter	carater de alinheamento, p.ej. char=':'
charoff=valor	offset para carater de alinheamento

Finalmente, o elemento tem apenas um atributo CAPTION: aling= alinhamento.