Tabelas. table <table>...</table>

Transcrição

1 Tabelas table <table>...</table> Explicação: Indica o início e o final de uma determinada tabela. Todas as demais marcas referentes a tabelas - linhas e células - somente serão consideradas se incluidas entre <table> e </table>. Pode conter os elementos caption, colgroup, thead, tfoot, tbody. <table> <td>texto A</td> <td>texto B</td> </table> Atributos de table Atributo: border Explicação: Especifica a largura em pixels da borda da tabela. Para tabela sem bordas, deve-se definir esse atributo como 0. <table border="4"> Atributo: cellspacing Explicação: Indica quanto espaço, em pixels, deve ser inserido entre as células da tabela. <table border= 1" cellspacing="10"> Atributo: cellpadding Explicação: Indica quanto espaço, em pixels, deve ser inserido entre as bordas das células e seu conteúdo. <table border= 1" cellpadding="5"> 23

2 Atributo: width Explicação: Indica a largura da tabela. Usa-se como medida o número de pixels desejado ou uma porcentagem da largura do documento. <table border= 1" width="300"> Atributo: rules Explicação: Indica quais linhas internas a tabela deve apresentar. Pode assumir os valores: "rows (somente as linhas horizontais), "cols (somente as linhas verticais), "none (nenhuma) e "all (todas), groups (aplica aos grupos título, corpo e rodapé). <table border= 1" rules="rows"> Atributo: frame Explicação: Indica quais bordas externas a tabela deve apresentar. Pode assumir os valores: "void (nenhuma), "above (topo da tabela), "below (base da tabela), "hsides (topo e base da tabela), "lhs (lado direito da tabela), "vsides (esquerda e direita da tabela) e "box (todas). <table border= 1 frame="below"> Todos os atributos de uma tabela são opcionais. Uma tabela padrão não possui bordas e sua altura e largura são as mínimas necessárias para suportar seu conteúdo. As linhas de uma tabela podem ser agrupadas em três seções: título (thead), rodapé (tfoot) e corpo (tbody). O elemento de corpo da tabela contém os dados da tabela. Os elementos de cabeçalho e rodapé contêm informações sobre as colunas. O elemento tfoot vem antes do elemento tbody, para permitir que os browsers apresentem o rodapé antes de exibir as células de dados da tabela. caption <caption>...</caption> Explicação: Legenda que descreve a tabela correspondente. 24

3 colgroup <colgroup>...</colgroup> Explicação: Esse elemento contém os elementos col e permite que sejam especificadas propriedades default para as colunas contidas. Esse elemento deverá ser listado antes dos elementos padrão da tabela (thead, tbody, tfoot, tr). Atributos de colgroup Atributo: align Explicação: Especifica o alinhamento horizontal dos dados em uma célula. Os valores podem ser: left (alinhamento à esquerda), right (alinhamento à direita), center (dados centralizados na célula), justify (dados alinhados a esquerda e direita). Atributo: valign Explicação: Especifica o alinhamento vertical dos dados em uma célula. Os valores podem ser: top (alinhamento superior), bottom (alinhamento inferior), middle (dados centralizados verticalmente na célula), baseline (primeira linha de dados alinhados). Atributo: width Explicação: Indica a largura para todas as colunas do grupo. Usa-se como medida o número de pixels desejado. col <col /> Explicação: Esse elemento define uma coluna de tabela dentro do elemento colgroup. Atributos de col Atributo: align Explicação: Especifica o alinhamento horizontal dos dados em uma célula. Os valores podem ser: left (alinhamento à esquerda), right (alinhamento à direita), center (dados centralizados na célula), justify (dados alinhados a esquerda e direita). 25

4 Atributo: valign Explicação: Especifica o alinhamento vertical dos dados em uma célula. Os valores podem ser: top (alinhamento superior), bottom (alinhamento inferior), middle (dados centralizados verticalmente na célula), baseline (primeira linha de dados alinhados). Atributo: width Explicação: Indica a largura da coluna. Usa-se como medida o número de pixels desejado ou uma porcentagem da largura da tabela. <table border="1"> <colgroup align= right > <col width="80" /> <col width="100" /> <col width="80" /> </colgroup> <td> cel 1 </td> <td> cel 2 </td> <td> cel 3 </td> <td> cel 4 </td> <td> cel 5 </td> <td> cel 6 </td> </table> tbody <tbody>...</tbody> Explicação: Elemento que contém os dados da tabela. Possui como elemento internos tr. Atributos de tbody Atributo: align Explicação: Especifica o alinhamento horizontal dos dados em uma célula. Os valores podem ser: left (alinhamento à esquerda), right (alinhamento 26

5 à direita), center (dados centralizados na célula), justify (dados alinhados a esquerda e direita). Atributo: valign Explicação: Especifica o alinhamento vertical dos dados em uma célula. Os valores podem ser: top (alinhamento superior), bottom (alinhamento inferior), middle (dados centralizados verticalmente na célula), baseline (primeira linha de dados alinhados). tr... Explicação: Indica o início e o final de uma determinada linha da tabela (Table Row). Possui como elemento interno td. Atributos de tr Atributo: align Explicação: Especifica o alinhamento horizontal dos dados em uma célula. Os valores podem ser: left (alinhamento à esquerda), right (alinhamento à direita), center (dados centralizados na célula), justify (dados alinhados a esquerda e direita). Atributo: valign Explicação: Especifica o alinhamento vertical dos dados em uma célula. Os valores podem ser: top (alinhamento superior), bottom (alinhamento inferior), middle (dados centralizados verticalmente na célula), baseline (primeira linha de dados alinhados). td <td>...</td> Explicação: Indica um elemento (célula) da tabela, vindo do inglês "Table Data". Os elementos contêm os dados da tabela, sejam eles texto, links, imagens, etc. Atributos de td Atributo: align Explicação: Especifica o alinhamento horizontal dos dados em uma célula. Os valores podem ser: left (alinhamento à esquerda), right (alinhamento 27

6 à direita), center (dados centralizados na célula), justify (dados alinhados a esquerda e direita). Atributo: valign Explicação: Especifica o alinhamento vertical dos dados em uma célula. Os valores podem ser: top (alinhamento superior), bottom (alinhamento inferior), middle (dados centralizados verticalmente na célula), baseline (primeira linha de dados alinhados). <table border= 1 > <caption>minha tabela</caption> <thead> <th>coluna um</th> <th>coluna dois</th> <th>coluna tres</th> </thead> <tfoot> <td>final um</td> <td>final dois</td> <td>final tres</td> </tfoot> <tbody align="center" valign= middle > <td>cel um </td> <td>cel dois</td> <td>cel tres</td> <td>cel quatro</td> <td>cel cinco</td> <td>cel seis</td> 28

7 <td>cel sete</td> <td>cel oito</td> <td>cel nove</td> </tbody> </table> Atributo: colspan Explicação: Indica quantas "células de largura" (colunas) a respectiva célula deve ocupar. <table border= 1 > <td colspan="2">texto A</td> <td>texto B</td> <td>texto B</td> </table> Atributo: rowspan Explicação: Indica quantas "células de altura" (linhas) a respectiva célula deve ocupar. <table border= 1 > <td rowspan="2">texto A</td> <td>texto B</td> <td>texto C</td> </table> 29

8 thead <thead>...</thead> Explicação: Elemento que contém o cabeçalho da tabela. Possui como elemento internos tr. Usualmente utiliza-se dentro do elemento tr de um cabeçalho o elemento th. Atributos de thead Possui os mesmos atributos de tbody th <th>...</th> Explicação: Idêntico ao elemento td, exceto que contém os cabeçalhos para uma determinada coluna. A maioria dos browsers exibe o conteúdo de um elemento th em negrito. tfoot <tfoot>...</tfoot> Explicação: Elemento que contém o rodapé da tabela. Possui como elemento internos tr. Atributos de tfoot Possui os mesmos atributos de tbody es Especiais e Acentuação As formas de representar caracteres especiais, através de uma notação específica, são chamadas de s. Existem s de e s s. ç ç ç c cedilha 30

9 (minúsculo) XHTML permite que caracteres especiais sejam representados por seqüências de escape, indicadas por três partes: um & (e (ê) comercial) inicial, um número ou cadeia de caracteres correspondente ao caracter desejado, e um ; (ponto e vírgula) final. ã ã ã a c/ til Um caracter bastante útil é o espaço não ignorável, o (Nonbreaking space). Este caracter é importante quando desejamos forçar o browser a não ignorar espaços em branco entre palavras. Non-breaking space Espaço não ignorável <body> <p>veja como fica com espaço não ignorável!</p> </body> Visualização pelo Browser: Veja como fica com espaço não ignorável! Os caracteres ASCII < (menor que), > (maior que), e & (e (ê) comercial) tem significados especiais para indicar um comando HTML. Mas por vezes queremos exibir estes símbolos na tela e são usados dentro de documentos seguindo a correspondência: 31

10 & & & E(ê) comercial < < < Menor que > > > Maior que Outras seqüências de escape suportam caracteres ISO Latin1. Temos aqui uma tabela com as entidades mais utilizados em Português: Tabela de es Especiais e Acentuação Tabulação Horizontal Espaço não ignorável " " " Aspas À À À A c/ crase Á Á Á A c/ acento agudo    A c/ acento à à à A c/ til Ç Ç Ç C cedilha (maiúsculo) É É É E c/ acento agudo Ê Ê Ê E c/ acento Í Í Í I c/ acento agudo Ó Ó Ó O c/ acento agudo Ô Ô Ô O c/ acento Õ Õ Õ O c/ til Ú Ú Ú U c/ acento agudo Ü Ü Ü U c/ trema à à à a c/ crase á á á a c/ acento agudo â â â a c/ acento ã ã ã a c/ til ç ç ç c cedilha (minúsculo) é é é e c/ acento agudo 32

11 ê ê ê e c/ acento í í í i c/ acento agudo ñ ñ ñ n c/ til ó ó ó o c/ acento agudo ô ô ô o c/ acento ò õ õ o c/ til ú ú ú u c/ acento agudo ü ü ü u c/ trema Comentários! <! > Atributo: Não possui atributos Explicação: Nada do que for escrito dentro deste TAG será interpretado pelo browser. Comentários são extremamentes úteis para facilitar a manutenção das páginas, que muitas vezes poderá ser feita por uma pessoa diferente daquela que a escreveu pela primeira vez. Através dos comentários, se explica o que se deseja com cada comando. <!-- Comentário --> Veja outras entidades numéricas: Tabela de es Especiais e Acentuação # # Tralha $ $ Cifrão % % Percente 33