Tabelas A formatação de tabelas foi adotada bem antes de sua inclusão na definição de HTML. A manipulação de tabelas, mesmo em editores, é trabalhosa; a maior diferença entre tabelas em HTML e em editores como o MS Word, entretanto, é o fato das tabelas em HTML serem definidas apenas em termos de linhas e não de colunas. Mas isso será percebido no decorrer destas páginas. As tabelas foram uma grande conquista para os autores de documentos para a Web. Com elas é possível, por exemplo, termos estas páginas do tutorial organizadas em colunas, sendo uma delas reservada aos links de navegação dentro de cada seção. Tabelas implementam um conceito importante de layout: as “grades”, segundo as quais organizamos textos e ilustrações de maneira harmoniosa. Como já foi possível perceber, as tabelas contêm textos, listas, parágrafos, imagens, formulários e várias outras formatações - inclusive outras tabelas. Novas versões de HTML e de browsers populares vêm acrescentando diversos atributos às tabelas, e nosso objetivo aqui é saber lidar com a maioria desses recursos disponíveis. Elementos básicos de tabelas<TABLE>...</TABLE> delimita uma tabela. Um atributo básico é BORDER, que indica a apresentação da borda. <TABLE BORDER="borda"> ... </TABLE> 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>) Uma tabela simples: <TABLE BORDER=4> <CAPTION>Primeiro exemplo</CAPTION> <TR><TH>Coluna 1</TH><TH>Coluna 2</TH></TR> <TR><TD>linha1, coluna 1</TD><TD> linha 1, coluna 2</TD></TR> <TR><TD>linha 2, coluna 1</TD><TD>linha 2, coluna 2</TD></TR> </TABLE> Primeiro exemplo Coluna 1 Coluna 2 linha1, coluna 1 linha 1, coluna 2 linha 2, coluna 1 linha 2, coluna 2 Títulos compreendendo mais de uma coluna ou linhaÉ possível englobar colunas e linhas, através dos atributos COLSPAN (para colunas) e ROWSPAN (para linhas): <TABLE BORDER=1> <TR><TH COLSPAN=2>Colunas 1 e 2</TH></TR> <TR><TD>linha1, coluna 1</TD><TD> linha 1, coluna 2</TD></TR> <TR><TD>linha 2, coluna 1</TD><TD>linha 2, coluna 2</TD></TR> <TR><TH ROWSPAN=3>3 linhas</TH><TD>uma linha</TD></TR> <TR><TD>duas linhas</TD></TR> <TR><TD>tres linhas</TD></TR> </TABLE> Colunas 1 e 2 linha1, coluna 1 linha 1, coluna 2 linha 2, coluna 1 linha 2, coluna 2 3 linhas uma linha duas linhas tres linhasNeste exemplo, vemos que o cabeçalho Colunas 1 e 2 compreende duas colunas (COLSPAN=2); o cabeçalho 3 linhas compreende, por sua vez, 3 linhas (ROWSPAN=3). Tabelas sem borda As páginas deste tutorial foram construídas com tabelas sem borda. Para tanto, foi empregada a seguinte delaração: <TABLE BORDER="0"> ... </TABLE> Alinhamentos em tabelasEste exemplo servirá para estudarmos alinhamentos, controle de larguras e espaçamento em tabelas: Prédio principal do ICMC-USP O Instituto de Ciências Matemáticas e de Computação (ICMC-USP) é formado pelos Departamentos de Matemática e de Ciências de Computação e Estatística. O ICMC originou-se em 1953, como Departamento de Matemática da Escola de Engenharia de São Carlos (EESC-USP), fundado por renomados matemáticos italianos e brasileiros. Departamento de Matemática (SMA) Atualmente, o Departamento de Matemática oferece cursos de Licenciatura e Bacharelado em Matemática e de Bacharelado em Matemática Aplicada e Computação Científica. Departamento de Computação e Estatística (SCE) O Departamento de Computação e Estatística é responsável pelo Bacharelado em Ciência de Computação e pelo curso noturno de Bacharelado em Informática. Para maiores informações: Cursos de Graduação:
[email protected] Cursos de Pós-Graduação:
[email protected] O conteúdo é informativo, porém a apresentação não é agradável devido à disposição do texto na tabela. Primeiro, vamos mexer com os alinhamentos. Alinhamentos simples Os alinhamentos padrão em tabelas, como podemos ver no exemplo acima, são: no sentido horizontal: alinhamento à esquerda no sentido vertical: alinhamento no centro da célulaAs linhas e células podem ter alinhamentos definidos através dos atributos: ALIGN = alin_horizontal VALIGN = alin_vertical Vejamos como esses alinhamentos funcionam nas células: <TD ALIGN=alin_horizontal>Texto da célula</TD><TD VALIGN=alin_vertical>Texto da célula</TD> PadrãoALIGN=LEFT ALIGN=CENTER ALIGN=RIGHT PadrãoVALIGN=TOP VALIGN=MIDDLE VALIGN=BOTTOM Obs.: a tabela acima foi feita especialmente para mostrar as diferenças entre os alinhamentos. Uma tabela comum ajusta o tamanho de suas células ao conteúdo, desta forma: Padrão align=left align=center align=right Padrão valign=top valign=middle valign=bottom Alinhamentos combinados Uma mesma célula pode ter atributos ALIGN e VALIGN: <TD ALIGN=alin_horizontal VALIGN=alin_vertical>Texto da célula</TD> Por exemplo: PadrãoALIGN=LEFT, VALIGN=BOTTOM ALIGN=CENTER, VALIGN=TOP ALIGN=RIGHT, VALIGN=MIDDLE Alinhamentos de linhas O alinhamento pode ser aplicado a linhas inteiras, com: <TR ALIGN=alin_horizontal VALIGN=alin_vertical>Texto da célula</TR> Porém, o alinhamento declarado em uma célula prevalece sobre o alinhamento da linha, como se vê no exemplo: centercenter center TD ALIGN=RIGHT bottom TD VALIGN=TOP bottom bottom Isso pode ser interessante para algumas aplicações. Já conseguimos mexer um pouco na tabela inicial, inserindo alinhamentos combinados; serão necessários mais alguns passos para que a tabela fique realmente "apresentável" - o exemplo continua nos itens sobre larguras e espaçamentos Prédio principal do ICMC-USP O Instituto de Ciências Matemáticas e de Computação (ICMC-USP) é formado pelos Departamentos de Matemática e de Ciências de Computação e Estatística. O ICMC originou-se em 1953, como Departamento de Matemática da Escola de Engenharia de São Carlos (EESC-USP), fundado por renomados matemáticos italianos e brasileiros. Departamento de Matemática (SMA) Atualmente, o Departamento de Matemática oferece cursos de Licenciatura e Bacharelado em Matemática e de Bacharelado em Matemática Aplicada e Computação Científica. Departamento de Computação e Estatística (SCE) O Departamento de Computação e Estatística é responsável pelo Bacharelado em Ciência de Computação e pelo curso noturno de Bacharelado em Informática. Para maiores informações: Cursos de Graduação:
[email protected] Cursos de Pós-Graduação:
[email protected]
Atributos de larguraNo item anterior, foi comentado que uma tabela comum ajusta o tamanho de suas células ao conteúdo. Por exemplo:
janeiro
fevereiro
março
abril
maio
junho
Para apresentar uma tabela ocupando determinado espaço disponível na linha, usamos o atributo WIDTH. Esse atributo pode ser aplicado também a linhas e células.
Essa l
