HTML5 Form_ Power Node Java College

A função da tabela é exibir os dados de duas vezes. , será introduzido mais tarde). O seguinte apresenta principalmente elementos HTML para fazer tabelas.

Os elementos básicos do formulário incluem: Tabela, TR e TD.

A tabela representa a tabela no documento HTML que suporta o atributo de fronteira para definir a largura do quadro do quadro;

TR representa a linha na tabela;

TD representa as células da tabela, incluindo os seguintes atributos:

1) Colspan: o número de colunas que as células podem cruzar;

2) linhas: o número de linhas que as células podem atravessar;

3) Cabeçalhos: padrões o cabeçalho relacionado à cabeça da célula.

 <table> <tr> <td> maçãs </td> <td> verde </td> <td> média </td> </tr> <td> laranjas </td> <td> laranja </td> <td> grande </td> </tr> </ table>

O acima define uma tabela de duas linhas e três colunas.

O uso do atributo de borda do elemento de tabela pode adicionar bordas à tabela.

 <tabela borda = 1> <tr> <td> maçãs </td> <td> verde </td> </tdium </td> </tr> <td> laranjas </td> <td> laranja </ td> <td> grande </td> </tr> </table>

A borda padrão do navegador não é muito bonita e geralmente precisa usar o CSS para definir o estilo de quadro para vários elementos.

Usando os atributos de Colspan e linhas da célula pode criar tabelas irregulares, para que algumas linhas ou colunas da tabela abrangem várias células.

 <Tabela borda = 1> <ter> <th> mês </th> <th> economia </th> </tr> <td colorpan = 2> janeiro </td> </tr> <ter> <td colorpan = 2> fevereiro </td> </tr> </ table>

A seguir, é apresentado um exemplo de uma célula que atravessa várias linhas:

 <Tabela Border = 1> <ter> <th> mês </th> <th> economia </th> </tr> <td> janeiro </td> <td> $ 100,00 </td> <td rowspan = 2> $ 50 </td> </tr> <td> fevereiro </td> <td> $ 10.00 </td> </ table>

O elemento TH é usado para adicionar um cabeçalho ao formulário, que pode ser usado para distinguir dados e explicações dos dados. O elemento suporta os seguintes atributos:

1) Colspan: o número de colunas que as células podem cruzar;

2) linhas: o número de linhas que as células podem atravessar;

3) Escopo: Defina o método de associar os dados da cabeça aos dados da unidade;

3) Cabeçalhos: a lista de identificação do cabeçalho separada pelo espaço é fornecida com informações sobre o cabeçalho da célula de dados.

 <table> <ter> <th> classificação </th> <th> nome </th> <th> cor </th> </th> </tr> <th> favorita: não/td> <td> Laranja </td> <td> grande </td> </tr> <ter> <h> 3rd favorito: </th> <td> Pomegraanato </td> <td> um tipo de Greeny-Red </ Td> <td> varia de médio a grande </td> </tr> </ table>

TH e TD podem ser usados ​​em uma linha.

O uso dos atributos dos cabeçalhos do TD pode ser associado às células. O atributo dos cabeçalhos pode ser o valor do atributo de identificação de uma ou mais células TH:

 <Borda da tabela = 1 width = 100%> <ter> <th id = nome> nome </th> <th id = email> email </th> <th id = telefone> telefone> telefone </th> <th Id = endereço> Endereço </th> </tr> <ter> <td cabeçalhos = nome> george bush </td> <td cabeçalhos = e -mail> alguém @example.com </td> <td cabeçalhos = telefone> + 789451236 </td> <td cabeçalhos = endereço> Quinta avenida Nova York, EUA </td> </tr> </ table>

O uso de atributos de Colspan e linhas de colheita de TH pode construir tabelas complexas.

 <Tabela Border = 1> <tr> <th colspan = 2> Companhia nos EUA > Apple, Inc. </td> <td> 1 loop infinito Cupertino, CA 95014 </td> </tr> <td> Google, Inc. </tr> </tabela>

Você pode usar os elementos THEAD, TBody e TFOT para adicionar estruturas ao formulário, para que você possa adicionar um estilo CSS a cada parte do formulário para se tornar mais fácil.

1) Tema da tabela

O elemento TBody representa toda a linha do tema do formulário, excluindo o cabeçalho (representação do elemento do Thead) e a scooter (representação do elemento TFOOT).

Observe que a maioria dos navegadores inserirá automaticamente o elemento TBody ao processar elementos da tabela.

2) Cabeçalho de formulário

O elemento Thead é usado para marcar a linha de título do formulário. Se não houver um elemento, todos os elementos TR serão considerados parte do assunto do formulário.

3) Adicione a nota de rodapé

Os elementos dos pés são usados ​​para marcar as linhas de formação. Antes de HTML5, os elementos do TFOT só podem aparecer diante do elemento TBody e, no HTML5, o elemento TFOOT é permitido colocar o elemento TFOT após o Tody.

Abaixo está um exemplo abrangente, que usa elementos TBody, Thead e Tfoot.

 <TABLE> <D> <ter> <th> classificação </th> <th> nome </th> <th> cor </th> <th> size </th> </thead> </tead> < TFOT> <ter> <th> classificação </th> <th> nome </th> <th> cor </th> </th> </tr> </tfoot> <tr> <ter> <th> Favorito: <th> <td> maçãs </td> <td> verde </td> <em> médio </td> </tr> <tr> <h> 2º favorito: </th> <td> laranjas </td> <td> laranja </td> <td> grande </td> </tr> <tr> <th> 3rd favorito: </th> <td> Pomegraanato </td> <td> Um tipo de Greeny-Red </td> <td> varia de médio a grande </td> </tr> </tbody> </ table>

O uso do elemento de legenda pode definir um título para o formulário e associá -lo ao formulário.

 <Tabela> <ingtion> Resultados da Pesquisa de Frutas de 2011 </gendion> <Tead> <tr> </th> <th> nome </th> </th> <th> tamanho </th> </tr> </sead> <tfoot> <ter> <th> rank </th> <th> nome </th> <th> cor </th> <th> size </th> não> <ter> <th> 2º favorito: </th> <td> laranja </td> <td> laranja </td> <td> grande </td> </tr> <trd favorito: </th> <td> Pomegranato </td > <td> Uma espécie de Greeny-Red </td> <td> varia de médio a grande </td> </tbody> </ table>

Um formulário pode conter apenas um elemento de legenda, não o primeiro elemento do formulário, mas sempre é exibido acima da tabela.

Na tabela, como a tabela é formada pela linha, a operação da coluna não é conveniente, como um estilo de definição de uma coluna do formulário. Você pode usar o elemento ColGroup para especificar o grupo.

 <html> <head> <estilo> #colryp1 {background-color: vermelho} #colryp2 {background-color: verde; = 1> <colorp id = colorp1 span = 2> </colorp> <colorp id = colorp2> </colorp> <ter> </th> </th> </th> não td> <td> meu primeiro CSS </td> <td> $ 47 </td> </tr> </tabela> </body> </html>

O exemplo acima especifica o grupo de duas colunas. O atributo de span de ColGroup especifica as extensões.

 <html> <head> <estilo> #colryp1 {background-color: vermelho} #col3 {background-color: verde; Border = 1> <Colgroup ID = colorp1> <col ID = col1 e 2 span = 2/> <col id = color3/> </colorp> <ter> </th> <th> title </th> <th> Preço </th> </tr> <l> <td> 3476896 </td> <td> meu primeiro html </td> <td> $ 53 </td> </tr> <td> 2489604 </td> <td> meu primeiro CSS </td> <td> $ 47 </td> </tabela> </body> </html>

O acima é todo o conteúdo deste artigo.