{"id":3789,"date":"2019-07-18T19:48:18","date_gmt":"2019-07-18T19:48:18","guid":{"rendered":"https:\/\/www.homehost.com.br\/blog\/?p=3789"},"modified":"2020-05-31T18:59:33","modified_gmt":"2020-05-31T18:59:33","slug":"tabela-html","status":"publish","type":"post","link":"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/","title":{"rendered":"Tabela HTML: como criar e utilizar tabelas em sua p\u00e1gina"},"content":{"rendered":"<p>Neste tutorial, vamos explicar o que \u00e9 uma tabela e de que forma podemos incluir uma tabela HTML em nossa p\u00e1gina. Caso queira aprender mais sobre o que \u00e9 HTML, <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">veja esse post sobre o assunto<\/a>. Os t\u00f3picos desse artigo s\u00e3o:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/#topico01\">O que s\u00e3o tabelas?<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/#topico02\">Tabela HTML<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/#topico03\">A estrutura b\u00e1sica de uma tabela HTML<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/#topico04\">C\u00e9lula de t\u00edtulo da tabela HTML<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/#topico05\">Tags estruturais da tabela<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/#topico06\">Criando c\u00e9lulas vazias<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/#topico07\">C\u00e9lulas que abrangem mais que uma linha\/coluna<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/#topico08\">T\u00edtulo da tabela<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/#topico09\">Utilizando o colgroup e col<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/#topico10\">A import\u00e2ncia da tabela para o HTML<\/a><\/li>\n<\/ul>\n<p><a name=\"topico01\"><\/a><\/p>\n<h2>O que s\u00e3o tabelas?<\/h2>\n<p>As tabelas s\u00e3o listas de dados em duas dimens\u00f5es e s\u00e3o compostas por linhas e colunas. Portanto, s\u00e3o muito utilizadas para apresentar dados de uma forma organizada. Um grande exemplo de como as tabelas s\u00e3o importantes \u00e9 o crescente uso do programa Excel, requisito obrigat\u00f3rio de sele\u00e7\u00e3o para muitas empresas. Mas e para apresentar uma tabela no seu site, como funciona? Para isso, existe a possibilidade de <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/formulario-html\/\" >criar tabelas<\/a> atrav\u00e9s do pr\u00f3prio HTML, de forma r\u00e1pida e simples, por meio de uma tabela HTML.<\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter wp-image-3790\" title=\"Como \u00e9 formada uma tabela\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tabela-como-e.jpg\" alt=\"Como \u00e9 formada uma tabela\" width=\"244\" height=\"224\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tabela-como-e.jpg 555w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tabela-como-e-300x275.jpg 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tabela-como-e-1x1.jpg 1w\" sizes=\"(max-width: 244px) 100vw, 244px\" \/><\/p>\n<p>Conforme a imagem acima, podemos ver a estrutura b\u00e1sica de uma tabela. Assim, \u00e9 importante saber que cada elemento de uma tabela \u00e9 denominada &#8220;c\u00e9lula&#8221;.<\/p>\n<p>Por exemplo, vejamos abaixo um exemplo de tabela com nove c\u00e9lulas organizadas em tr\u00eas colunas e tr\u00eas linhas, sendo a primeira linha o t\u00edtulo das colunas:<\/p>\n<table class=\" aligncenter\" style=\"height: 89px;\" border=\"1\" width=\"195\">\n<tbody>\n<tr>\n<th style=\"text-align: left;\">Nome<\/th>\n<th style=\"text-align: left;\">Idade<\/th>\n<th style=\"text-align: left;\">Profiss\u00e3o<\/th>\n<\/tr>\n<tr>\n<td>Albert<\/td>\n<td>27<\/td>\n<td>Escritor<\/td>\n<\/tr>\n<tr>\n<td>Jim<\/td>\n<td>57<\/td>\n<td>Ator<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><a name=\"topico02\"><\/a><\/p>\n<h2>Tabela HTML<\/h2>\n<p>Uma vez que j\u00e1 sabemos o que \u00e9 uma tabela, podemos ent\u00e3o <a href=\"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/heidi-sql\/\" >entender como criar uma tabela em HTML<\/a>.<\/p>\n<p>A <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tags-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">tag<\/a> utilizada para criar uma tabela HTML \u00e9 a tag <strong>&lt;table&gt;<\/strong>, posteriormente fechada com <strong>&lt;\/table&gt;<\/strong>. Dentro dela, inclu\u00edmos todos os elementos que comp\u00f5em nossa tabela, ou seja, as c\u00e9lulas da tabela. Assim sendo, os elementos de uma tabela consistem em outras tags que poder\u00e3o ser utilizadas. Nos pr\u00f3ximos t\u00f3picos, veremos como utilizar cada uma delas.<\/p>\n<p>Antigamente, as tabelas em <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/html-css\/\" >HTML eram muito utilizadas<\/a> acompanhadas de atributos. Com a ado\u00e7\u00e3o do CSS e do HTML5, esses atributos passaram a ser depreciados e, hoje em dia, s\u00e3o estilizados atrav\u00e9s da folha de estilos. Caso voc\u00ea tenha interesse em saber mais sobre os atributos, podem acessar a <a href=\"https:\/\/www.w3schools.com\/tags\/tag_table.asp\" target=\"_blank\" rel=\"noopener noreferrer\">documenta\u00e7\u00e3o oficial da W3C sobre tabelas<\/a>. Contudo, nos exemplos desse tutorial, utilizaremos apenas o atributo <strong>border,<\/strong> para melhor exemplificar os c\u00f3digos.<br \/>\n<a name=\"topico03\"><\/a><\/p>\n<h3>A estrutura b\u00e1sica de uma tabela HTML<\/h3>\n<p>As tags que v\u00e3o formar a estrutura <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/html-basico\/\" >b\u00e1sica de uma tabela em HTML<\/a> s\u00e3o as tags <strong>&lt;tr&gt;<\/strong> e <strong>&lt;td&gt;<\/strong>. A tag <strong>&lt;tr&gt;<\/strong> representa uma linha e a tag <strong>&lt;td&gt;<\/strong> representa uma c\u00e9lula. Desta forma, a cria\u00e7\u00e3o de colunas em uma tabela HTML \u00e9 feita automaticamente atrav\u00e9s da quantidade de c\u00e9lulas inclu\u00eddas dentro de uma linha. Por exemplo, vejamos na imagem abaixo como essa estrutura \u00e9 formada:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-3797 size-large\" title=\"Estrutura b\u00e1sica da tabela HTML\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tabela_1-1024x797.png\" alt=\"Estrutura b\u00e1sica da tabela HTML\" width=\"660\" height=\"514\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tabela_1-1024x797.png 1024w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tabela_1-300x233.png 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tabela_1-768x598.png 768w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tabela_1-1x1.png 1w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/p>\n<p>Assim sendo, vamos criar nossa primeira tabela HTML com o exemplo a seguir:<\/p>\n<pre class=\"lang:xhtml decode:true\" title=\"tabela HTML b\u00e1sica\">&lt;table border=\"1\"&gt;\r\n    &lt;tr&gt;\r\n        &lt;td&gt;Nome&lt;\/td&gt;\r\n        &lt;td&gt;Idade&lt;\/td&gt;\r\n        &lt;td&gt;Profiss\u00e3o&lt;\/td&gt;\r\n    &lt;\/tr&gt;\r\n    &lt;tr&gt;\r\n        &lt;td&gt;Ted&lt;\/td&gt;\r\n        &lt;td&gt;22&lt;\/td&gt;\r\n        &lt;td&gt;Estudante&lt;\/td&gt;\r\n    &lt;\/tr&gt;\r\n    &lt;tr&gt;\r\n        &lt;td&gt;Ralf&lt;\/td&gt;\r\n        &lt;td&gt;26&lt;\/td&gt;\r\n        &lt;td&gt;Designer&lt;\/td&gt;\r\n    &lt;\/tr&gt;\r\n&lt;\/table&gt;<\/pre>\n<p>Dessa forma, o resultado do c\u00f3digo acima ser\u00e1 a seguinte tabela:<\/p>\n<table border=\"1\">\n<tbody>\n<tr>\n<td>Nome<\/td>\n<td>Idade<\/td>\n<td>Profiss\u00e3o<\/td>\n<\/tr>\n<tr>\n<td>Ted<\/td>\n<td>22<\/td>\n<td>Estudante<\/td>\n<\/tr>\n<tr>\n<td>Ralf<\/td>\n<td>26<\/td>\n<td>Designer<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><a name=\"topico04\"><\/a><\/p>\n<h3>C\u00e9lula de t\u00edtulo da tabela HTML<\/h3>\n<p>Caso queira incluir uma ou mais c\u00e9lulas que representem t\u00edtulos, ganhando um destaque em rela\u00e7\u00e3o \u00e0s demais c\u00e9lulas, pode utilizar a tag <strong>&lt;th&gt;<\/strong>.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-3800 size-large\" title=\"Incluindo t\u00edtulo a tabela HTML\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tabela_2e3-1024x399.png\" alt=\"Incluindo t\u00edtulo a tabela HTML\" width=\"660\" height=\"257\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tabela_2e3-1024x399.png 1024w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tabela_2e3-300x117.png 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tabela_2e3-768x299.png 768w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tabela_2e3-1x1.png 1w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tabela_2e3.png 1627w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/p>\n<p>Ent\u00e3o, a partir do exemplo anteriormente apresentado, vamos modificar a primeira linha para que todas as c\u00e9lulas dessa linha sejam do tipo t\u00edtulo:<\/p>\n<pre class=\"lang:xhtml decode:true\" title=\"Tabela com tag de t\u00edtulo\">&lt;table border=\"1\"&gt;\r\n    &lt;tr&gt;\r\n        &lt;th&gt;Nome&lt;\/th&gt;\r\n        &lt;th&gt;Idade&lt;\/th&gt;\r\n        &lt;th&gt;Profiss\u00e3o&lt;\/th&gt;\r\n    &lt;\/tr&gt;\r\n    &lt;tr&gt;\r\n        &lt;td&gt;Ted&lt;\/td&gt;\r\n        &lt;td&gt;22&lt;\/td&gt;\r\n        &lt;td&gt;Estudante&lt;\/td&gt;\r\n    &lt;\/tr&gt;\r\n    &lt;tr&gt;\r\n        &lt;td&gt;Ralf&lt;\/td&gt;\r\n        &lt;td&gt;26&lt;\/td&gt;\r\n        &lt;td&gt;Designer&lt;\/td&gt;\r\n    &lt;\/tr&gt;\r\n&lt;\/table&gt;<\/pre>\n<p>Portanto, o resultado da tabela agora ser\u00e1:<\/p>\n<table border=\"1\">\n<tbody>\n<tr>\n<th>Nome<\/th>\n<th>Idade<\/th>\n<th>Profiss\u00e3o<\/th>\n<\/tr>\n<tr>\n<td>Ted<\/td>\n<td>22<\/td>\n<td>Estudante<\/td>\n<\/tr>\n<tr>\n<td>Ralf<\/td>\n<td>26<\/td>\n<td>Designer<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Podemos ainda aplicar o <strong>&lt;th&gt;<\/strong> para t\u00edtulos verticais, ou seja, na primeira coluna. Dessa forma, vamos para o seguinte exemplo de tabela HTML:<\/p>\n<pre class=\"lang:xhtml decode:true\" title=\"Tabela vertical\">&lt;table border=\"1\"&gt;\r\n   &lt;tr&gt;\r\n       &lt;th&gt;Nome:&lt;\/th&gt;\r\n       &lt;td&gt;Ted&lt;\/td&gt;\r\n   &lt;\/tr&gt;\r\n   &lt;tr&gt;\r\n       &lt;th&gt;Idade:&lt;\/th&gt;\r\n       &lt;td&gt;22&lt;\/td&gt;\r\n   &lt;\/tr&gt;\r\n&lt;\/table&gt;<\/pre>\n<p>O resultado deste exemplo ser\u00e1:<\/p>\n<table border=\"1\">\n<tbody>\n<tr>\n<th>Nome:<\/th>\n<td>Ted<\/td>\n<\/tr>\n<tr>\n<th>Idade:<\/th>\n<td>22<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><a name=\"topico05\"><\/a><\/p>\n<h3>Tags estruturais da tabela<\/h3>\n<p>Anteriormente, vimos que a estrutura b\u00e1sica de uma tabela consiste nas tags <strong>&lt;tr&gt;<\/strong>,\u00a0<strong>&lt;td&gt; <\/strong>e as c\u00e9lulas de t\u00edtulo <strong>&lt;th&gt;<\/strong>. Por\u00e9m, al\u00e9m dessas, tamb\u00e9m h\u00e1 tags que servem para estruturar melhor a tabela. S\u00e3o elas:<\/p>\n<ul>\n<li><strong>&lt;thead&gt;&lt;\/thead&gt;<\/strong> &#8211; Esta tag representa o cabe\u00e7alho da tabela, geralmente composta por c\u00e9lulas t\u00edtulo;<\/li>\n<li><strong>&lt;tbody&gt;&lt;\/tbody&gt;<\/strong> &#8211; Essa tag representa o corpo da tabela;<\/li>\n<li><strong>&lt;tfoot&gt;&lt;\/tfoot&gt;<\/strong> &#8211; Essa tag representa o rodap\u00e9 da tabela.<\/li>\n<\/ul>\n<p>Portanto, essas tags tem como principal efeito manter uma sem\u00e2ntica adequada para suas tabelas.<\/p>\n<p>Sendo assim, vejamos ent\u00e3o a seguinte imagem para exemplificar a estrutura de uma tabela:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-3801 size-large\" title=\"Tabela HTML com estrutura Sem\u00e2ntica\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tabela_4-1024x768.png\" alt=\"Tabela HTML com estrutura Sem\u00e2ntica\" width=\"660\" height=\"495\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tabela_4-1024x768.png 1024w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tabela_4-300x225.png 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tabela_4-768x576.png 768w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tabela_4-1x1.png 1w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/p>\n<p>Em seguida, vamos agora criar o seguinte c\u00f3digo, utilizando como base a estrutura anterior:<\/p>\n<pre class=\"lang:xhtml decode:true\" title=\"Tabela HTML com tags sem\u00e2nticas\">&lt;table border=\"1\"&gt;\r\n   &lt;thead&gt;\r\n   &lt;tr&gt;\r\n       &lt;th&gt;titulo 1&lt;\/th&gt;\r\n       &lt;th&gt;titulo 2&lt;\/th&gt;\r\n       &lt;th&gt;titulo 3&lt;\/th&gt;\r\n   &lt;\/tr&gt;\r\n   &lt;\/thead&gt;\r\n   &lt;tbody&gt;\r\n   &lt;tr&gt;\r\n       &lt;td&gt;Body1 linha1&lt;\/td&gt;\r\n       &lt;td&gt;Body2 linha1&lt;\/td&gt;\r\n       &lt;td&gt;Body3 linha1&lt;\/td&gt;\r\n   &lt;\/tr&gt;\r\n   &lt;tr&gt;\r\n       &lt;td&gt;Body1 linha2&lt;\/td&gt;\r\n       &lt;td&gt;Body2 linha2&lt;\/td&gt;\r\n       &lt;td&gt;Body3 linha2&lt;\/td&gt;\r\n   &lt;\/tr&gt;\r\n   &lt;\/tbody&gt;\r\n   &lt;tfoot&gt;\r\n       &lt;td&gt;Foot 1&lt;\/td&gt;\r\n       &lt;td&gt;Foot 2&lt;\/td&gt;\r\n       &lt;td&gt;Foot 3&lt;\/td&gt;\r\n   &lt;\/tfoot&gt;\r\n&lt;\/table&gt;<\/pre>\n<p>Com isso, chegamos ao seguinte resultado:<\/p>\n<table border=\"1\">\n<thead>\n<tr>\n<th>titulo 1<\/th>\n<th>titulo 2<\/th>\n<th>titulo 3<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Body1 linha1<\/td>\n<td>Body2 linha1<\/td>\n<td>Body3 linha1<\/td>\n<\/tr>\n<tr>\n<td>Body1 linha2<\/td>\n<td>Body2 linha2<\/td>\n<td>Body3 linha2<\/td>\n<\/tr>\n<tr>\n<td>Foot 1<\/td>\n<td>Foot 2<\/td>\n<td>Foot 3<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Por\u00e9m, vale ressaltar que nem todos os navegadores compreendem direito essas tags, em especial a tag <strong>&lt;tfoot&gt;<\/strong>. Portanto, vale manter as tags <strong>&lt;thead&gt;<\/strong> e <strong>&lt;tbody&gt;<\/strong>, por\u00e9m evite utilizar o <strong>&lt;tfoot&gt;<\/strong> a menos que tenha um objetivo espec\u00edfico. O pr\u00f3prio editor do <a href=\"https:\/\/www.homehost.com.br\/blog\/wordpress\/vantagens-de-instalar-wordpress-em-seu-site\/\" target=\"_blank\" rel=\"noopener noreferrer\">CMS WordPress<\/a> tem dificuldades em lidar com a tag <strong>&lt;tfoot&gt;<\/strong>, utilizando portanto apenas as duas primeiras.<br \/>\n<a name=\"topico06\"><\/a><\/p>\n<h3>Criando c\u00e9lulas vazias<\/h3>\n<p>Caso seja necess\u00e1rio incluir uma c\u00e9lula vazia (ou seja: sem nenhum valor dentro) na sua tabela, uma sa\u00edda seria apenas incluir a <strong>&lt;td&gt; <\/strong>ou <strong>&lt;th&gt;<\/strong> sem nenhum conte\u00fado. No entanto, isso n\u00e3o \u00e9 recomendado, porque alguns navegadores n\u00e3o conseguem ler adequadamente uma c\u00e9lula vazia. Portanto, a solu\u00e7\u00e3o mais adequada para isso \u00e9 utilizar a <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/espaco-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">t\u00e9cnica de espa\u00e7o, incluindo a entidade &amp;nbsp<\/a>; conforme o exemplo abaixo:<\/p>\n<pre class=\"lang:xhtml decode:true\" title=\"tabela com c\u00e9lula vazia\">&lt;table&gt;\r\n    &lt;tr&gt;\r\n        &lt;th&gt;&amp;nbsp;&lt;\/th&gt;\r\n        &lt;th&gt;Valor&lt;\/th&gt;\r\n    &lt;\/tr&gt;\r\n    &lt;tr&gt;\r\n        &lt;td&gt;Item 1&lt;\/td&gt;\r\n        &lt;td&gt;R$10,00&lt;\/td&gt;\r\n    &lt;\/tr&gt;\r\n    &lt;tr&gt;\r\n        &lt;td&gt;Item 2&lt;\/td&gt;\r\n        &lt;td&gt;R$20,00&lt;\/td&gt;\r\n    &lt;\/tr&gt;\r\n&lt;\/table&gt;<\/pre>\n<p>Por consequ\u00eancia, o resultado ser\u00e1 a tabela a seguir:<\/p>\n<table border=\"1\">\n<tbody>\n<tr>\n<th><\/th>\n<th>Valor<\/th>\n<\/tr>\n<tr>\n<td>Item 1<\/td>\n<td>R$10,00<\/td>\n<\/tr>\n<tr>\n<td>Item 2<\/td>\n<td>R$20,00<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><a name=\"topico07\"><\/a><\/p>\n<h3>C\u00e9lulas que abrangem mais que uma linha\/coluna<\/h3>\n<p>Em algumas situa\u00e7\u00f5es, temos a necessidade de utilizar uma mesclagem de c\u00e9lula, ou seja, criar uma c\u00e9lula que abrange mais do que uma linha ou coluna. Dessa forma, podemos utilizar os atributos\u00a0<strong>colspan<\/strong> e <strong>rowspan<\/strong>. O colspan=&#8221;x&#8221; vai fazer uma mesclagem de colunas, e o rowspan=&#8221;x&#8221; vai mesclar linhas, bastando substituir o x pelo n\u00famero de colunas ou linhas que deseja ocupar. Al\u00e9m disso, podemos tamb\u00e9m mesclar os dois em uma mesma c\u00e9lula. Com isso, vamos ver os exemplos a seguir:<\/p>\n<h4><strong>Primeiro, utilizando o colspan:<\/strong><\/h4>\n<pre class=\"lang:xhtml decode:true\" title=\"Utilizando o colspan\">&lt;table border=\"1\"&gt;\r\n    &lt;tr&gt;\r\n        &lt;th&gt;Nome&lt;\/th&gt;\r\n        &lt;th colspan=\"2\"&gt;Telefones&lt;\/th&gt;\r\n    &lt;\/tr&gt;\r\n    &lt;tr&gt;\r\n        &lt;td&gt;Ted&lt;\/td&gt;\r\n        &lt;td&gt;8888-8888&lt;\/td&gt;\r\n        &lt;td&gt;9999-9999&lt;\/td&gt;\r\n    &lt;\/tr&gt;\r\n    &lt;tr&gt;\r\n        &lt;td&gt;Junior&lt;\/td&gt;\r\n        &lt;td&gt;1111-1111&lt;\/td&gt;\r\n        &lt;td&gt;2222-2222&lt;\/td&gt;\r\n    &lt;\/tr&gt;\r\n&lt;\/table&gt;<\/pre>\n<p>Sendo assim, com o exemplo acima, obtemos a seguinte tabela HTML:<\/p>\n<table border=\"1\">\n<tbody>\n<tr>\n<th>Nome<\/th>\n<th colspan=\"2\">Telefones<\/th>\n<\/tr>\n<tr>\n<td>Ted<\/td>\n<td>8888-8888<\/td>\n<td>9999-9999<\/td>\n<\/tr>\n<tr>\n<td>Junior<\/td>\n<td>1111-1111<\/td>\n<td>2222-2222<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<h4><strong>Depois, utilizando o rowspan:<\/strong><\/h4>\n<pre class=\"lang:xhtml decode:true\" title=\"Utilizando o rowspan\">&lt;table border=\"1\"&gt;\r\n&lt;tr&gt;\r\n  &lt;th&gt;Primeiro Nome:&lt;\/th&gt;\r\n  &lt;td&gt;Ted&lt;\/td&gt;\r\n&lt;\/tr&gt;\r\n&lt;tr&gt;\r\n  &lt;th rowspan=\"2\"&gt;Telefone:&lt;\/th&gt;\r\n  &lt;td&gt;8888-8888&lt;\/td&gt;\r\n&lt;\/tr&gt;\r\n&lt;tr&gt;\r\n  &lt;td&gt;9999-9999&lt;\/td&gt;\r\n&lt;\/tr&gt;\r\n&lt;\/table&gt;<\/pre>\n<p>Com o exemplo acima, obtemos a seguinte tabela HTML:<\/p>\n<table border=\"1\">\n<tbody>\n<tr>\n<th>Primeiro Nome:<\/th>\n<td>Ted<\/td>\n<\/tr>\n<tr>\n<th rowspan=\"2\">Telefone:<\/th>\n<td>8888-8888<\/td>\n<\/tr>\n<tr>\n<td>9999-9999<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><a name=\"topico08\"><\/a><\/p>\n<h3>T\u00edtulo da tabela<\/h3>\n<p>A tabela HTML tem uma tag particular para definir um t\u00edtulo. Essa tag \u00e9 a <strong>&lt;caption&gt;&lt;\/caption&gt;<\/strong>. Em contraste com os demais elementos da tabela, a tag &lt;caption&gt; n\u00e3o ser\u00e1 composta por c\u00e9lulas, portanto ficar\u00e1 acima da tabela, como um t\u00edtulo.<\/p>\n<p>Desta forma, veja ent\u00e3o o exemplo a seguir:<\/p>\n<pre class=\"lang:xhtml decode:true\" title=\"Exemplo com caption na tabela HTML\">&lt;table border=\"1\"&gt;\r\n    &lt;caption&gt;Exemplo de T\u00edtulo&lt;\/caption&gt;\r\n    &lt;tr&gt;\r\n        &lt;th&gt;Nome&lt;\/th&gt;\r\n        &lt;th&gt;Sobrenome&lt;\/th&gt;\r\n    &lt;\/tr&gt;\r\n    &lt;tr&gt;\r\n        &lt;td&gt;Ted&lt;\/td&gt;\r\n        &lt;td&gt;Junior&lt;\/td&gt;\r\n    &lt;\/tr&gt;\r\n    &lt;tr&gt;\r\n        &lt;td&gt;Ted&lt;\/td&gt;\r\n        &lt;td&gt;Neto&lt;\/td&gt;\r\n    &lt;\/tr&gt;\r\n&lt;\/table&gt;<\/pre>\n<p>Com isso, o resultado ser\u00e1 a seguinte tabela com t\u00edtulo:<\/p>\n<table border=\"1\">\n<caption>Exemplo de T\u00edtulo<\/caption>\n<tbody>\n<tr>\n<th>Nome<\/th>\n<th>Sobrenome<\/th>\n<\/tr>\n<tr>\n<td>Ted<\/td>\n<td>Junior<\/td>\n<\/tr>\n<tr>\n<td>Ted<\/td>\n<td>Neto<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><a name=\"topico09\"><\/a><\/p>\n<h3>Utilizando o colgroup e col<\/h3>\n<p>Anteriormente, explicamos que hoje em dia, boa parte dos atributos de uma tabela se encontra depreciado. Portanto, a estiliza\u00e7\u00e3o deve ser feita atrav\u00e9s do CSS. Dessa forma, existe um elemento muito importante que nos permite criar um grupo de colunas, podendo assim estilizar diversas colunas de uma s\u00f3 vez. Esse elemento \u00e9 a tag <strong>&lt;colgroup&gt;&lt;\/colgroup&gt;<\/strong>. Posteriormente, dentro do grupo de colunas, inclu\u00edmos ent\u00e3o as tags <strong>&lt;col\/&gt;<\/strong> para poder definir cada coluna.<\/p>\n<p>Vejamos ent\u00e3o o seguinte exemplo, aplicando o CSS \u00e0s classes que utilizaremos nas <strong>&lt;col&gt;<\/strong>:<\/p>\n<pre class=\"lang:xhtml decode:true\" title=\"Utilizando o colgroup e col na tabela HTML\">&lt;style&gt;\r\n    .vermelho{\r\n        background-color: red;\r\n    }\r\n    .amarelo{\r\n        background-color: yellow;\r\n    }\r\n    .azul{\r\n        background-color: blue;\r\n    }\r\n&lt;\/style&gt;\r\n\r\n&lt;table border=\"1\"&gt;\r\n  &lt;colgroup&gt;\r\n    &lt;col class=\"vermelho\"&gt;\r\n    &lt;col class=\"amarelo\"&gt;\r\n    &lt;col class=\"azul\"&gt;\r\n  &lt;\/colgroup&gt;\r\n  &lt;tr&gt;\r\n    &lt;th&gt;Nome&lt;\/th&gt;\r\n    &lt;th&gt;Idade&lt;\/th&gt;\r\n    &lt;th&gt;Profissao&lt;\/th&gt;\r\n  &lt;\/tr&gt;\r\n  &lt;tr&gt;\r\n    &lt;td&gt;Ted&lt;\/td&gt;\r\n    &lt;td&gt;22&lt;\/td&gt;\r\n    &lt;td&gt;Estudante&lt;\/td&gt;\r\n  &lt;\/tr&gt;\r\n  &lt;tr&gt;\r\n    &lt;td&gt;Junior&lt;\/td&gt;\r\n    &lt;td&gt;26&lt;\/td&gt;\r\n    &lt;td&gt;Escritor&lt;\/td&gt;\r\n  &lt;\/tr&gt;\r\n&lt;\/table&gt;<\/pre>\n<p>Com isso, o resultado deste c\u00f3digo ser\u00e1:<\/p>\n<table border=\"1\">\n<colgroup>\n<col style=\"background-color: red;\" \/>\n<col style=\"background-color: yellow;\" \/>\n<col style=\"background-color: blue;\" \/> <\/colgroup>\n<tbody>\n<tr>\n<th>Nome<\/th>\n<th>Idade<\/th>\n<th>Profissao<\/th>\n<\/tr>\n<tr>\n<td>Ted<\/td>\n<td>22<\/td>\n<td>Estudante<\/td>\n<\/tr>\n<tr>\n<td>Junior<\/td>\n<td>26<\/td>\n<td>Escritor<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Al\u00e9m dessa forma de trabalhar, podemos ainda aplicar um grupo que abranja mais que uma coluna, utilizando o atributo span=&#8221;x&#8221;. Assim, basta substituir o x pelo n\u00famero de colunas que desejamos atribuir esse grupo.<\/p>\n<p>Em seguida, vejamos ent\u00e3o o exemplo:<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;table border=\"1\"&gt;\r\n  &lt;colgroup&gt;\r\n    &lt;col span=\"2\" style=\"background-color:red\"&gt;\r\n    &lt;col style=\"background-color:yellow\"&gt;\r\n  &lt;\/colgroup&gt;\r\n  &lt;tr&gt;\r\n    &lt;th&gt;Nome&lt;\/th&gt;\r\n    &lt;th&gt;Idade&lt;\/th&gt;\r\n    &lt;th&gt;Profissao&lt;\/th&gt;\r\n  &lt;\/tr&gt;\r\n  &lt;tr&gt;\r\n    &lt;td&gt;Ted&lt;\/td&gt;\r\n    &lt;td&gt;22&lt;\/td&gt;\r\n    &lt;td&gt;Estudante&lt;\/td&gt;\r\n  &lt;\/tr&gt;\r\n  &lt;tr&gt;\r\n    &lt;td&gt;Junior&lt;\/td&gt;\r\n    &lt;td&gt;26&lt;\/td&gt;\r\n    &lt;td&gt;Escritor&lt;\/td&gt;\r\n  &lt;\/tr&gt;\r\n&lt;\/table&gt;<\/pre>\n<p>Com isso, o resultado deste c\u00f3digo ser\u00e1 a seguinte tabela:<\/p>\n<table border=\"1\">\n<colgroup>\n<col style=\"background-color: red;\" span=\"2\" \/>\n<col style=\"background-color: yellow;\" \/> <\/colgroup>\n<tbody>\n<tr>\n<th>Nome<\/th>\n<th>Idade<\/th>\n<th>Profissao<\/th>\n<\/tr>\n<tr>\n<td>Ted<\/td>\n<td>22<\/td>\n<td>Estudante<\/td>\n<\/tr>\n<tr>\n<td>Junior<\/td>\n<td>26<\/td>\n<td>Escritor<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Para finalizar esse t\u00f3pico, recomendamos que voc\u00ea treine com diversas cores. Voc\u00ea pode utilizar a tabela de cores HTML, <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-de-cores-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">dispon\u00edvel no nosso blog<\/a>, para experimentar estilizar com diversas cores.<br \/>\n<a name=\"topico10\"><\/a><\/p>\n<h2>A import\u00e2ncia da tabela para o HTML<\/h2>\n<p>Finalmente conclu\u00edmos nosso tutorial e j\u00e1 sabemos exatamente como incluir uma tabela completa no <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/caracteres-especiais-acentos-html\/\" >c\u00f3digo HTML<\/a>. Por\u00e9m, al\u00e9m da utiliza\u00e7\u00e3o desses elementos como tabela, vale a pena pesquisar a respeito de c\u00f3digos mais antigos e ver o quanto a tag <strong>&lt;table&gt;<\/strong> era utilizada para a estrutura da pr\u00f3pria p\u00e1gina em si.<\/p>\n<p>Anteriormente ao HTML5 e \u00e0 ado\u00e7\u00e3o das folhas de estilos, os layouts das p\u00e1ginas eram <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-bootstrap\/\" >formadas atrav\u00e9s de tabelas<\/a>. Com o tempo, esse layout deixou de ser adotado, hoje j\u00e1 utilizamos recursos mais avan\u00e7ados como o layout flexbox e grid. Como resultado, surgiu um novo padr\u00e3o de layout, conhecido por<em><strong> tableless<\/strong><\/em>, o qual n\u00e3o baseia-se por tabelas. Desta forma, a tag <strong>&lt;table&gt;\u00a0<\/strong>\u00e9 utilizada\u00a0apenas para a cria\u00e7\u00e3o de tabelas HTML, e n\u00e3o mais para estrutura\u00e7\u00e3o de uma p\u00e1gina. Contudo, ainda \u00e9 poss\u00edvel encontrar diversas p\u00e1ginas que utilizam layout em tabela, portanto ter conhecimento e dom\u00ednio de como manipular uma tabela HTML \u00e9 important\u00edssimo, mesmo que n\u00e3o pretenda utilizar tabelas em sua p\u00e1gina.<\/p>\n<p>Com isso, voc\u00ea tem em m\u00e3os um tutorial completo para dominar as t\u00e9cnicas envolvendo tabelas HTML. Recomendamos ent\u00e3o que pratique os c\u00f3digos ensinados anteriormente e busquem modific\u00e1-los \u00e0 sua prefer\u00eancia. Seguindo o passo a passo desse tutorial, voc\u00ea estar\u00e1 pronto para desenvolver suas pr\u00f3prias tabelas e at\u00e9 mesmo inser\u00ed-las em suas p\u00e1ginas.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Neste tutorial, vamos explicar o que \u00e9 uma tabela e de que forma podemos incluir uma tabela HTML em nossa p\u00e1gina. Caso queira aprender mais sobre o que \u00e9 HTML, veja esse post sobre o assunto. Os t\u00f3picos desse artigo s\u00e3o: O que s\u00e3o tabelas? Tabela HTML A estrutura b\u00e1sica de uma tabela HTML C\u00e9lula [&hellip;]<\/p>\n","protected":false},"author":18,"featured_media":3806,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_helpful_status":1,"_lmt_disableupdate":"","_lmt_disable":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3,6],"tags":[2624,2621,3017,3018],"class_list":["post-3789","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-criar-sites","category-tutoriais","tag-css","tag-html","tag-tabela","tag-tableless"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tabela HTML: como criar e utilizar tabelas em sua p\u00e1gina | Homehost<\/title>\n<meta name=\"description\" content=\"Entenda tudo sobre tabelas HTML, como criar e utilizar suas tabelas para inserir nas suas p\u00e1ginas web de forma correta e profissional!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tabela HTML: como criar e utilizar tabelas em sua p\u00e1gina | Homehost\" \/>\n<meta property=\"og:description\" content=\"Entenda tudo sobre tabelas HTML, como criar e utilizar suas tabelas para inserir nas suas p\u00e1ginas web de forma correta e profissional!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Homehost\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Homehost\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-18T19:48:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-05-31T18:59:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tabela_5.png\" \/>\n\t<meta property=\"og:image:width\" content=\"4375\" \/>\n\t<meta property=\"og:image:height\" content=\"1714\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Rafael Marques\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Homehost\" \/>\n<meta name=\"twitter:site\" content=\"@Homehost\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rafael Marques\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/\",\"name\":\"Tabela HTML: como criar e utilizar tabelas em sua p\u00e1gina | Homehost\",\"isPartOf\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tabela_5.png\",\"datePublished\":\"2019-07-18T19:48:18+00:00\",\"dateModified\":\"2020-05-31T18:59:33+00:00\",\"author\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e\"},\"description\":\"Entenda tudo sobre tabelas HTML, como criar e utilizar suas tabelas para inserir nas suas p\u00e1ginas web de forma correta e profissional!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/#primaryimage\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tabela_5.png\",\"contentUrl\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tabela_5.png\",\"width\":4375,\"height\":1714,\"caption\":\"Tabela HTML: Tudo que voc\u00ea precisa saber\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/www.homehost.com.br\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tabela HTML: como criar e utilizar tabelas em sua p\u00e1gina\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#website\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/\",\"name\":\"Homehost\",\"description\":\"Hospedagem De Sites\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.homehost.com.br\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e\",\"name\":\"Rafael Marques\",\"description\":\"Especialista em Desenvolvimento Web e Marketing. \u00c9 apaixonado por tecnologia, empreendedorismo, audiovisual e animais. Em sua carreira, dedica-se ao empreendedorismo, al\u00e9m de atuar como Desenvolvedor Fullstack e redator t\u00e9cnico. Gosta de usar seu tempo livre para assistir a filmes, jogar, escrever, e passar um bom tempo brincando e mimando seus animais de estima\u00e7\u00e3o. Contato: rafael.blog@homehost.com.br\",\"sameAs\":[\"https:\/\/www.instagram.com\/rafamarquesrmb\/\",\"https:\/\/www.linkedin.com\/in\/rafamarquesrmb\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tabela HTML: como criar e utilizar tabelas em sua p\u00e1gina | Homehost","description":"Entenda tudo sobre tabelas HTML, como criar e utilizar suas tabelas para inserir nas suas p\u00e1ginas web de forma correta e profissional!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/","og_locale":"pt_BR","og_type":"article","og_title":"Tabela HTML: como criar e utilizar tabelas em sua p\u00e1gina | Homehost","og_description":"Entenda tudo sobre tabelas HTML, como criar e utilizar suas tabelas para inserir nas suas p\u00e1ginas web de forma correta e profissional!","og_url":"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/","og_site_name":"Homehost","article_publisher":"https:\/\/www.facebook.com\/Homehost\/","article_published_time":"2019-07-18T19:48:18+00:00","article_modified_time":"2020-05-31T18:59:33+00:00","og_image":[{"width":4375,"height":1714,"url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tabela_5.png","type":"image\/png"}],"author":"Rafael Marques","twitter_card":"summary_large_image","twitter_creator":"@Homehost","twitter_site":"@Homehost","twitter_misc":{"Escrito por":"Rafael Marques","Est. tempo de leitura":"13 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/","url":"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/","name":"Tabela HTML: como criar e utilizar tabelas em sua p\u00e1gina | Homehost","isPartOf":{"@id":"https:\/\/www.homehost.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/#primaryimage"},"image":{"@id":"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/#primaryimage"},"thumbnailUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tabela_5.png","datePublished":"2019-07-18T19:48:18+00:00","dateModified":"2020-05-31T18:59:33+00:00","author":{"@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e"},"description":"Entenda tudo sobre tabelas HTML, como criar e utilizar suas tabelas para inserir nas suas p\u00e1ginas web de forma correta e profissional!","breadcrumb":{"@id":"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/#primaryimage","url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tabela_5.png","contentUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tabela_5.png","width":4375,"height":1714,"caption":"Tabela HTML: Tudo que voc\u00ea precisa saber"},{"@type":"BreadcrumbList","@id":"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.homehost.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Tabela HTML: como criar e utilizar tabelas em sua p\u00e1gina"}]},{"@type":"WebSite","@id":"https:\/\/www.homehost.com.br\/blog\/#website","url":"https:\/\/www.homehost.com.br\/blog\/","name":"Homehost","description":"Hospedagem De Sites","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.homehost.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e","name":"Rafael Marques","description":"Especialista em Desenvolvimento Web e Marketing. \u00c9 apaixonado por tecnologia, empreendedorismo, audiovisual e animais. Em sua carreira, dedica-se ao empreendedorismo, al\u00e9m de atuar como Desenvolvedor Fullstack e redator t\u00e9cnico. Gosta de usar seu tempo livre para assistir a filmes, jogar, escrever, e passar um bom tempo brincando e mimando seus animais de estima\u00e7\u00e3o. Contato: rafael.blog@homehost.com.br","sameAs":["https:\/\/www.instagram.com\/rafamarquesrmb\/","https:\/\/www.linkedin.com\/in\/rafamarquesrmb\/"]}]}},"modified_by":"Gustavo Gallas","jetpack_featured_media_url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tabela_5.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/3789","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/comments?post=3789"}],"version-history":[{"count":15,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/3789\/revisions"}],"predecessor-version":[{"id":5241,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/3789\/revisions\/5241"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/media\/3806"}],"wp:attachment":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/media?parent=3789"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/categories?post=3789"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/tags?post=3789"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}