4. Características Gerais das Tabelas do HTML

Transcrição

1 4. Características Gerais das Tabelas do HTML Curso de Extensão em HTML PUCRS A criação de uma tabela começa pelo tag e termina pelo tag. Antes do texto de cada linha da tabela você deve inserir o tag e ao final de cada linha você deve inserir. Linha de cabeçalho: cada sentença de cabeçalho deve começar pelo tag <TH> e terminar pelo tag </TH>. Conteúdo de cada célula da tabela: o conteúdo deve iniciar com o tag <TD> e terminar com o tag </TD>. <TH> Estado </TH> <TH> Capital </TH> <TH> Melhor time de Futebol </TH> <TD> RS </TD> <TD> Poa </TD> <TD> Inter </TD> Tarefa: Inserir uma tabela na sua página Web. Se desejar, você pode inserir uma imagem em uma célula de uma tabela. Para tanto, você deve utilizar o tag <IMG SRC =?>, colocando no lugar do? a indicação de onde se encontra o arquivo que contém a imagem. <TH> Estado </TH> <TD> <IMG SRC= foto_rs.jpg > </TD> Tarefa: Inserir uma imagem em uma tabela.

2 Atributos de Tabelas Principais atributos de formatação de tabelas: Bordas: permite colocar bordas em uma tabela. Para tanto, você deve utilizar o comando BORDER. <TABLE BORDER> <TABLE BORDER=10> Tarefa: Inserir bordas na tabela. Centralização: permite centralizar a tabela em relação a página. Utilize o tag <CENTER> antes de iniciar a tabela e </CENTER> após finalizar a tabela. <CENTER> </CENTER> Tarefa: Centralizar a tabela. Título da tabela: para inserir um título em uma tabela, utilize o tag <CAPTION> e </CAPTION>. <CAPTION> teste </CAPTION> Tarefa: Inserir um título na tabela. Salto de linha: você pode forçar que um texto de uma célula seja inscrito em uma só linha, não permitindo a quebra de linha. Para tanto utilize o comando <NOWRAP>.

3 <TH NOWRAP> texto em uma só linha </TH> <TD NOWRAP> texto em uma só linha </TD> Tarefa: Inserir um texto na tabela e utilizar o comando NOWRAP. União: você pode unificar várias células da sua tabela. A unificação pode ser tanto de colunas como de linhas. Para unificar colunas, utilize o tag <COLSPAN =?>, substituindo? pelo número de colunas que deseja unificar. Este comando deve ser inserido junto com o comando <TH> ou <TD>. Para unificar linhas, utilize o tag <ROWSPAN =?>, substituindo? pelo número de linhas que deseja unificar. <TH COLSPAN=3> texto </TH> <TD ROWSPAN=2> texto </TD> Tarefa: Inserir os comandos COLSPAN e ROWSPAN na sua tabela. Alinhamento: permite alinhar a direita, a esquerda ou centralizar o texto de uma célula da tabela. O alinhamento pode ser tanto horizontal como vertical. Para alinhar horizontalmente o conteúdo de uma célula ou conjunto de células, insira o tag <ALIGN =?>, substituindo? por right (direita), left (esquerda) ou center (centralizado). Para alinhar verticalmente o conteúdo de uma célula ou conjunto de células, insira o tag <VALIGN =?>, substituindo? por top (em cima), bottom (embaixo) ou middle (centralizado). <TR ALIGN=right> texto <TR VALIGN=middle> texto Tarefa: Inserir os comandos VALIGN e ALIGN em sua tabela

4 Cores: assim como é possível determinar a cor de fundo de uma página Web e aplicar uma imagem de fundo nesta página, você também pode determinar a cor de fundo de uma célula ou conjunto de células de uma tabela ou aplicar uma imagem de fundo à tabela. Para inserir uma cor de fundo utilize o comando BGCOLOR e para aplicar uma imagem de fundo utilize o comando BACKGROUND. O comando BGCOLOR pode ser utilizado em conjunto com os tags <TH>, <TD>, ou, dependo do resultado final esperado. Já o comando BACKGROUND só pode ser utilizado com o tag. <TABLE BGCOLOR=red> ou <TABLE BACKGROUND= imagem.jpg > Tarefa: Inserir cor e imagem de fundo em sua tabela. Redimensionamento de uma tabela ou célula: você pode alterar o tamanho original de uma tabela ou de um conjunto de células. Para alterar o tamanho original de uma tabela, utilize o comando WIDTH =? (para largura) ou HEIGHT =? (para altura), substituindo? pelo valor em pontos (exemplo: 600) ou sob a forma de porcentagem da largura original da janela (exemplo: 50%). Estes comandos podem ser utilizados em conjunto com o tag, para alterar o tamanho da tabela, ou com os tags <TD> ou <TH> para alterar o tamanho de células. <TABLE WIDTH=500 HEIGHT=30%> <TH WIDTH=200> texto </TH> Tarefa: Alterar a largura e altura das células de sua tabela. Espaçamento entre as células: você pode definir o espaço entre cada célula da tabela. Para tanto, utilize a opção CELLSPACING =?, substituindo? pelo espaçamento desejado. Por definição, o espaçamento é igual a 2. Você pode definir também a distância entre o texto e a borda de cada célula. Utilize a opção CELLPADDING =?, substituindo? pelo espaçamento desejado. <TABLE border=5 cellspacing=10 cellpadding=15> Tarefa: Defina o espaçamento das células e o espaçamento entre a borda e o texto de cada célula da sua tabela.

5 Tarefa: Insira uma tabela e utilize os recursos de formatação de tabela vistos fazendo uso das facilidades do 1st page. Dica: utilizar o menu tables na barra de ferramentas.