Ir para conteúdo

Pesquisar na Comunidade

Mostrando resultados para as tags ''linha''.

  • Pesquisar por Tags

    Digite tags separadas por vírgulas
  • Pesquisar por Autor

Tipo de Conteúdo


Fóruns

  • xTibia - Notícias e Suporte
    • Regras
    • Noticias
    • Soluções
    • Projetos Patrocinados
    • Tutoriais para Iniciantes
    • Imprensa
  • OTServ
    • Notícias e Debates
    • OTServlist
    • Downloads
    • Recursos
    • Suporte
    • Pedidos
    • Show-Off
    • Tutoriais
  • OFF-Topic
    • Barzinho do Éks
    • Design
    • Informática

Encontrar resultados em...

Encontrar resultados que contenham...


Data de Criação

  • Início

    FIM


Data de Atualização

  • Início

    FIM


Filtrar pelo número de...

Data de Registro

  • Início

    FIM


Grupo


Sou

Encontrado 1 registro

  1. Confira também as duas primeiras aulas para não ficar perdido: http://www.xtibia.com/forum/topic/205838-aula-2-listas-ordenadas-listas-nao-ordenadas-listas-de-definicao/ Nesta terceira aula vou ensinar tabelas. Tabelas Tabelas são conjuntos de células, divididas em colunas e linhas, e servem para mostrar dados tabulados. Embora muitos ditos "desenvolvedores" usem tabelas pra fazer layouts dos sites, isso NÃO é recomendado e eu vou ensinar isso usando divs e CSS. Tabelas são definidas pela tag <table> e possuem vários elementos internos para organizar. Como exemplo, vamos construir uma tabelinha com os stages de um servidor. Dentro da tag table, nós usamos as tags <tr> (table row) para definir uma linha e, dentro dessa linha, <td> (table data) para definir uma célula. Também podemos usar o atributo "border" para definir a espessura da borda, em pixels, mas em breve vamos mudar isso. Assim: <table border="1"> <tr> <td>Level mínimo</td> <td>Level máximo</td> <td>Stage</td> </tr> <tr> <td>~~</td> <td>50</td> <td>100x</td> </tr> <tr> <td>100</td> <td>200</td> <td>50x</td> </tr> <tr> <td>200</td> <td>~~</td> <td>10x</td> </tr> </table> Bem básico né? Mas essa primeira linha não ficou legal... que tal se a gente dividir a tabela em uma linha de cabeçalho? Também é possível! As tabelas podem usar as tags <thead> (table head), <tfoot> (table footer) e <tbody> (table body) (NESTA ORDEM) para separar cabeçalhos, rodapés e corpo da tabela. Dentro do thead, usamos a tag <th> (table header) ao invés de tr para destacar o cabeçalho. Por exemplo: <table border="1"> <thead> <tr> <td>Level mínimo</td> <td>Level máximo</td> <td>Stage</td> </tr> </thead> <tbody> <tr> <td>~~</td> <td>50</td> <td>100x</td> </tr> <tr> <td>100</td> <td>200</td> <td>50x</td> </tr> <tr> <td>200</td> <td>~~</td> <td>10x</td> </tr> </tbody> </table> Além disso, nós também podemos usar a tag <caption> para definir a legenda/título de uma tabela! Ao invés de usar um heading fora da tabela, isso facilita nosso trabalho <table border="1"> <caption>Stages do servidor</caption> <thead> <tr> <th>Level mínimo</th> <th>Level máximo</th> <th>Stage</th> </tr> </thead> <tbody> <tr> <td>~~</td> <td>50</td> <td>100x</td> </tr> <tr> <td>100</td> <td>200</td> <td>50x</td> </tr> <tr> <td>200</td> <td>~~</td> <td>10x</td> </tr> </tbody> </table> É importante saber usar todos estes elementos na hora de fazer seu site. Embora haja pouca diferença visual, por exemplo, ao colocar o th, na prática isso é bom para ferramentas de pesquisa e é um bom costume. A tarefa da vez vai usar esta aula e a anterior: imagine um servidor fictício, e faça uma página com o título, uma lista com as skill rates e uma tabela com os stages (como nos exemplos acima). Se quiser, use imagens, links e os outros elementos da primeira aula também.
×
×
  • Criar Novo...