{"id":1971,"date":"2012-08-21T17:17:16","date_gmt":"2012-08-21T20:17:16","guid":{"rendered":"http:\/\/blog.turbosite.com.br\/?p=1971"},"modified":"2012-08-21T17:17:16","modified_gmt":"2012-08-21T20:17:16","slug":"html-parte-9","status":"publish","type":"post","link":"https:\/\/www.turbosite.com.br\/blog\/html-parte-9\/","title":{"rendered":"HTML – PARTE 9"},"content":{"rendered":"

Tabelas<\/p>\n

Tabelas s\u00e3o usadas para apresentar “dados tabulares” , isto \u00e9, informa\u00e7\u00e3o que deva ser apresentada em linhas e colunas, de forma l\u00f3gica.<\/p>\n

\u00c9 dif\u00edcil?<\/p>\n

Criar tabelas em HTML pode parecer complicado, mas se voc\u00ea ficar frio e acompanhar passo a passo a explica\u00e7\u00e3o, ver\u00e1 que tudo \u00e9 evidente – tal como acontece com tudo no HTML.<\/p>\n

Exemplo 1:<\/p>\n

\n<table>\n  <tr>\n    <td>C\u00e9lula 1<\/td>\n    <td>C\u00e9lula 2<\/td>\n  <\/tr>\n  <tr>\n    <td>C\u00e9lula 3<\/td>\n    <td>C\u00e9lula 4<\/td>\n  <\/tr>\n<\/table>\n<\/code>\n  <\/pre>\n
Ser\u00e1 renderizado no navegador assim:<\/p>\n\n\n\n
C\u00e9lula 1<\/td>\nC\u00e9lula 2<\/td>\n<\/tr>\n
C\u00e9lula 3<\/td>\nC\u00e9lula 4<\/td>\n<\/tr>\n<\/table>\n
Qual a diferen\u00e7a entre <tr> e <td>?<\/p>\n
Como voc\u00ea deve ter visto no exemplo acima, este foi o c\u00f3digo HTML mais complicado que escrevemos at\u00e9 agora. Vamos analisar isto por partes e explicar as diferentes tags:<\/p>\n
3 tags b\u00e1sicas s\u00e3o usadas para inserir tabelas:<\/strong><\/p>\n
<table> come\u00e7a e termina uma tabela. Evidente.
\n<tr> significa “t<\/strong>able r<\/strong>ow” – linha de tabela – come\u00e7a e termina e uma linha horizontal da tabela. Tamb\u00e9m evidente.
\n<td> significa “t<\/strong>able d<\/strong>ata” – dados da tabela. come\u00e7a e termina cada c\u00e9lula contida nas linhas da tabela. Tudo simples e evidente.<\/p>\n
Eis o acontece no Exemplo 1: a tabela come\u00e7a com <table>, segue-se uma <tr>, que indica o in\u00edcio de uma nova linha. Duas c\u00e9lulas s\u00e3o ent\u00e3o inseridas na linha: <td>C\u00e9lula 1<\/td> e <td>C\u00e9lula 2<\/td>. A linha termina com <\/tr> e uma nova linha <tr> come\u00e7a imediatamente a seguir. A nova linha tamb\u00e9m cont\u00e9m duas c\u00e9lulas. A tabela termina com <\/table>.<\/p>\n
Para esclarecer: linhas s\u00e3o horizontais e colunas s\u00e3o verticais, ambas contendo c\u00e9lulas<\/strong>:<\/p>\n\n\n\n\n
C\u00e9lula 1<\/td>\nC\u00e9lula 2<\/td>\n<\/tr>\n
C\u00e9lula 3<\/td>\nC\u00e9lula 4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
C\u00e9lula 1 e C\u00e9lula 2 formam uma linha. C\u00e9lula 1 e C\u00e9lula 3 formam uma coluna.<\/p>\n
No exemplo acima a tabela tem duas linhas e duas colunas. Uma tabela pode conter um n\u00famero ilimitado de linhas e colunas.<\/p>\n
Exemplo 2:<\/p>\n
\n<table>\n  <tr>\n    <td>C\u00e9lula 1<\/td>\n    <td>C\u00e9lula 2<\/td>\n    <td>C\u00e9lula 3<\/td>\n    <td>C\u00e9lula 4<\/td>\n  <\/tr>\n  <tr>\n    <td>C\u00e9lula 5<\/td>\n    <td>C\u00e9lula 6<\/td>\n    <td>C\u00e9lula 7<\/td>\n    <td>C\u00e9lula 8<\/td>\n  <\/tr>\n  <tr>\n    <td>C\u00e9lula 9<\/td>\n    <td>C\u00e9lula 10<\/td>\n    <td>C\u00e9lula 11<\/td>\n    <td>C\u00e9lula 12<\/td>\n  <\/tr>\n<\/table>\n<\/code>\n  <\/pre>\n
Ser\u00e1 renderizado no navegador assim:<\/p>\n\n\n\n\n\n
C\u00e9lula 1<\/td>\nC\u00e9lula 2<\/td>\nC\u00e9lula 3<\/td>\nC\u00e9lula 4<\/td>\n<\/tr>\n
C\u00e9lula 5<\/td>\nC\u00e9lula 6<\/td>\nC\u00e9lula 7<\/td>\nC\u00e9lula 8<\/td>\n<\/tr>\n
C\u00e9lula 9<\/td>\nC\u00e9lula 10<\/td>\nC\u00e9lula 11<\/td>\nC\u00e9lula 12<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Existem atributos?<\/p>\n
Claro! existem atributos. Por exemplo, o atributo border que \u00e9 usado para definir a espessura de uma borda em volta da tabela:<\/p>\n
Exemplo 3:<\/p>\n
\n<table border=\"1\">\n  <tr>\n    <td>C\u00e9lula 1<\/td>\n    <td>C\u00e9lula 2<\/td>\n  <\/tr>\n  <tr>\n    <td>C\u00e9lula 3<\/td>\n    <td>C\u00e9lula 4<\/td>\n  <\/tr>\n<\/table>\n<\/code>\n  <\/pre>\n
Ser\u00e1 renderizado no navegador assim:<\/p>\n\n\n\n\n
C\u00e9lula 1<\/td>\nC\u00e9lula 2<\/td>\n<\/tr>\n
C\u00e9lula 3<\/td>\nC\u00e9lula 4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
A espessura da borda \u00e9 especificada em pixels<\/p>\n
Tal como fizemos com as imagens, podemos definir width – largura – em pixels, para uma tabela – ou alternativamente em percentagem da tela:<\/p>\n
Exemplo 4:<\/p>\n
\n<table border=\"1\" width=\"30%\">\n<\/code>\n  <\/pre>\n
Este exemplo renderiza no navegador uma tabela com largura igual a 30% da largura da tela. Tente voc\u00ea mesmo.<\/p>\n
Mais atributos?<\/p>\n
Existe uma grande quantidade de atributos para tabelas. A seguir mais dois:<\/p>\n
    \n
  • align: define o alinhamento horizontal do conte\u00fado da tabela, de uma linha ou de uma c\u00e9lula. Por exemplo, left, center ou right (\u00e0 esquerda, no centro ou \u00e0 direita).<\/li>\n
  • valign: define o alinhamento vertical do conte\u00fado de uma c\u00e9lula. Por exemplo, top, middle ou bottom (em cima, no meio ou em baixo).<\/li>\n<\/ul>\n
    Exemplo 5:<\/p>\n
    \n<td align=\"right\" valign=\"top\">C\u00e9lula 1<\/td>\n<\/code>\n  <\/pre>\n
    O que posso inserir em tabelas?<\/p>\n
    Teoricamente voc\u00ea pode inserir qualquer coisa em uma tabela: texto, links e imagens… MAS, tabelas destinam-se a apresentar dados tabulares (isto \u00e9, dados que por sua natureza devam ser apresentados em linhas e colunas) ent\u00e3o abstenha-se de colocar coisas dentro de tabela simplesmente porque voc\u00ea deseja que elas estejam pr\u00f3ximas umas \u00e0s outras.<\/p>\n
    Nos prim\u00f3rdios da Internet – isto \u00e9, h\u00e1 poucos anos atr\u00e1s – tabelas eram usadas como ferramenta para construir layout. Se voc\u00ea quer controlar a apresenta\u00e7\u00e3o de textos e imagens, existe uma maneira bem mais racional (dica:CSS). Adiante veremos isto.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Tabelas Tabelas s\u00e3o usadas para apresentar “dados tabulares” , isto \u00e9, informa\u00e7\u00e3o que deva ser apresentada em linhas e colunas, de forma l\u00f3gica. \u00c9 dif\u00edcil? Criar tabelas em\u2026<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28],"tags":[119,140,331,583,622,660],"class_list":["post-1971","post","type-post","status-publish","format-standard","hentry","category-tutoriais","tag-como-fazer-sites","tag-construcao-de-sites","tag-html","tag-site","tag-tutorial","tag-website"],"_links":{"self":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/1971","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/comments?post=1971"}],"version-history":[{"count":0,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/1971\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/media?parent=1971"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/categories?post=1971"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/tags?post=1971"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}