Tabelas. Uma célula de dados pode conter texto, imagens, listas, parágrafos, formulários, linhas horizontais, etc. <table> <tr>

Transcrição

1 Tabelas HTML

2 Tabelas Tabelas São definidas pela tag <table> </table> Uma tabela é dividida em linhas -com a tag <tr> Cada linha divida em células de dados (com a tag <td>). As letras td são um acronimo para "table data" o conteúdo da célula de dados.

3 Tabelas Uma célula de dados pode conter texto, imagens, listas, parágrafos, formulários, linhas horizontais, etc. <table> <tr> <td>linha 1, celula 1</td> <td>linha 1, celula 2</td> </tr> <tr> <td>linha 2, celula 1</td> <td>linha 2, celula 2</td> </tr> </table>

4 Atributo Border Tabelas Se não for especificado um atributo border, a tabela será exibida sem bordas. Isso pode ser útil as vezes, porém na maioria das vezes queremos que as bordas sejam exibidas

5 Tabelas Para exibir uma tabela com bordas: <table border="1"> <tr> <td>linha 1, celula 1</td> <td>linha 1, celula 2</td> </tr> </table>

6 Tabelas Títulos, linhas e elementos <CAPTION>...</CAPTION> define o título da tabela <TR>...</TR> delimita uma linha <TH>...</TH> define um cabeçalho para colunas ou linhas (dentro de <TR>) <TD>...</TD> delimita um elemento ou célula (dentro de <TR>)

7 Atributos Tabelas align Justifica o texto da célula da mesma forma que se fosse o de um parágrafo. valign Podemos escolher se queremos que o texto apareça acima (top), no centro (middle) ou abaixo (bottom) da célula. bgcolor Dá cor à célula ou escolha de linha. bordercolor Define a cor da borda.

8 Tabelas Outros atributos que podem ser unicamente atribuídos a uma célula e não ao um conjunto de células de uma linha são: background Permite-nos colocar um fundo para a célula a partir de um link a uma imagem. height Define a altura da célula em pixels ou porcentagem. width Define a largura da célula em pixels ou porcentagem

9 Rowspan Tabelas <table border=1 bgcolor='yellow'> <tr><td rowspan=2>1ª coluna - 1ª linha + 2ª linha</td> <td> 2ª coluna - 1ª linha</td></tr> <tr><td>2ª coluna - 2ª linha</td></tr> </table>

10 Colspan Tabelas <table border=1 bgcolor='yellow'> <tr><td colspan=2>1ª + 2ª coluna - 1ª linha</td></tr> <tr><td>1ª coluna - 2ª linha</td><td>2ª coluna - 2ª linha</td> </tr> </table>

11 Atividade criar as seguintes tabelas

12 Imagens Inserção de imagens O elemento IMG insere imagens que são apresentadas junto com os textos. Um atributo SRC deve estar presente, da seguinte forma: <IMG SRC="URL_imagem"> onde URL_imagem é o URL do arquivo que contém a imagem que se quer inserir;

13 Imagens Assim, escrevendo: <IMG SRC = "/icones/newred.gif"> inserimos a figura newred.gif, que se encontra na pasta Icones no documento. As imagens usadas na Web são armazenadas em arquivos com extensão *.gif, *.xbm, *.jpg (ou *.jpeg), *.png.

14 Imagens Atributos básicos de imagem ALT* Indica um texto alternativo, descrevendo brevemente a imagem, que é apresentado no lugar da imagem nos browsers texto, ou quando se desabilita o carregamento de imagens em browsers gráficos. É recomendável que esteja sempre presente. <img src="url_imagem" alt="descrição_da_imagem">

15 WIDTH e HEIGHT Imagens Atributos de dimensão da imagem, em pixels. Grande parte dos editores HTML coloca automaticamente os valores destes atributos, quando indicamos a inserção de uma imagem.

16 Imagens <IMG SRC="imagem" ALT="descrição" WIDTH="largura" HEIGHT="altura"> Uma das vantagens de se usar esses atributos é que o browser pode montar mais rapidamente as páginas, por saber de antemão o espaço que deverá ser reservado a elas.

17 BORDER Imagens Quando uma imagem faz as vezes de âncora, ganha uma borda que indica sua condição. Nem sempre interessa termos essa borda ao redor da imagem. Assim, com o atributo BORDER, podemos controlar esse detalhe.

18 Imagens Se quisermos uma borda mais larga... <A HREF="URL"><IMG SRC="imagem" ALT="descrição" BORDER=4></A> Se quisermos uma imagem sem borda... <A HREF="URL"><IMG SRC="imagem" ALT="descrição" BORDER=0></A>

19 ALIGN Imagens <IMG SRC="imagem" ALT="descrição" ALIGN=alinhamento> ALIGN pode alterar o alinhamento do texto em relação a imagem que foi inserida

20 Imagens ALIGN=TOP Alinha o texto adjacente com o topo da imagem, embora com linhas compridas o resultado não seja muito bom. ALIGN=MIDDLE Alinha o texto adjacente com o meio da imagem, embora com linhas compridas o resultado não seja muito bom ALIGN=BOTTOM Alinha o texto adjacente com a parte de baixo da imagem (default)

21 Imagens ALIGN=RIGHT Alinha imagem à direita, e tudo o que houver ao redor (texto, outras imagens) a partir do topo da imagem. ALIGN=LEFT Alinha imagem à esquerda, e tudo o que houver ao redor (texto, outras imagens) a partir do topo da imagem.

22 Imagens Para ter duas imagens, uma em cada margem, numa mesma linha, escreva: <IMG align=left SRC="imagem.gif" alt="imagem"> <IMG align=right SRC="imagem.gif" alt="imagem">...e insira o texto entre as imagens

23 Atividade Imagens Crie uma pagina HTML contendo o horário das suas aulas (utilizando tabelas) A tabela deve conter 1 linha de cabeçalho, com a frase Horário

24 Atividade Aprimore a página de contatos com os professores, inserindo um ícone (imagem) para o link de Na página de professores, coloque fotos dos professores. Cada foto deve ser um link para a página do perfil do professor na página da COINF. Certifique-se de que todas as imagens tenham o mesmo tamanho na página.