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

Mais tabelas<\/p>\n

O t\u00edtulo “Mais tabelas” pode sugerir uma li\u00e7\u00e3o enfadonha. Mas, veja as coisas pelo lado positivo, depois que voc\u00ea se tornar um mestre em tabelas nada mais do HTML poder\u00e1 desafi\u00e1-lo.<\/p>\n

O que mais existe?<\/p>\n

Os dois atributos colspan e rowspan s\u00e3o usados para criar tabelas singulares.<\/p>\n

Colspan \u00e9 a abrevia\u00e7\u00e3o para “column span”. Colspan \u00e9 usada na tag <td> para indicar quantas colunas estar\u00e3o contidas em uma c\u00e9lula.<\/p>\n

Exemplo 1:<\/p>\n

\n<table border=\"1\">\n  <tr>\n    <td colspan=\"3\">C\u00e9lula 1<\/td>\n  <\/tr>\n  <tr>\n    <td>C\u00e9lula 2<\/td>\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>\n<\/tr>\n
C\u00e9lula 2<\/td>\nC\u00e9lula 3<\/td>\nC\u00e9lula 4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Definindo colspan em “3”, a c\u00e9lula na primeira linha conter\u00e1 tr\u00eas colunas. Se voc\u00ea definir colspan em “2”, a c\u00e9lula conter\u00e1 duas colunas e assim ser\u00e1 necess\u00e1rio inserir mais uma c\u00e9lula na primeira linha para que tenhamos na primeira linha as colunas em acordo com as da segunda linha.<\/p>\n
Exemplo 2:<\/p>\n
\n<table border=\"1\">\n  <tr>\n    <td colspan=\"2\">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    <td>C\u00e9lula 5<\/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>\nC\u00e9lula 5<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Que tal rowspan?<\/p>\n
Como voc\u00ea j\u00e1 deve ter concluido, rowspan especifica quantas linhas estar\u00e3o contidas em uma c\u00e9lula:<\/p>\n
Exemplo 3:<\/p>\n
\n<table border=\"1\">\n  <tr>\n    <td rowspan=\"3\">C\u00e9lula 1<\/td>\n    <td>C\u00e9lula 2<\/td>\n  <\/tr>\n  <tr>\n    <td>C\u00e9lula 3<\/td>\n  <\/tr>\n  <tr>\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\n
C\u00e9lula 1<\/td>\nC\u00e9lula 2<\/td>\n<\/tr>\n
C\u00e9lula 3<\/td>\n<\/tr>\n
C\u00e9lula 4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
No exemplo acima rowspan \u00e9 definido em “3” na C\u00e9lula 1. Isto especifica que uma c\u00e9lula deve conter 3 linhas. C\u00e9lula 1 e C\u00e9lula 2 est\u00e3o na mesma linha, enquanto C\u00e9lula 3 e C\u00e9lula 4 formam duas linhas independentes.<\/p>\n
Confuso? Bem, isto na verdade n\u00e3o \u00e9 descomplicado e voc\u00ea pode se perder. Assim, \u00e9 sempre uma boa id\u00e9ia, desenhar a tabela em uma folha de papel antes de come\u00e7ar a codifica\u00e7\u00e3o HTML.<\/p>\n
N\u00e3o est\u00e1 confuso? Ent\u00e3o v\u00e1 em frente e crie algumas tabela com uso de colspan e rowspan. <\/p>\n","protected":false},"excerpt":{"rendered":"
Mais tabelas
\nO t\u00edtulo “Mais tabelas” pode sugerir uma li\u00e7\u00e3o enfadonha. Mas, veja as coisas pelo lado positivo, depois que voc\u00ea se tornar um mestre em tabelas nada mais do HTML poder\u00e1 desafi\u00e1-lo.<\/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-1977","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\/1977","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=1977"}],"version-history":[{"count":0,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/1977\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/media?parent=1977"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/categories?post=1977"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/tags?post=1977"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}