Pesquisar na Comunidade
Mostrando resultados para as tags ''legenda''.
Encontrado 1 registro
-
html Aula 3 - Tabelas, linhas e células, legendas
um tópico no fórum postou Lordfire Tutoriais de Websites
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.