{"id":3871,"date":"2019-07-24T12:24:13","date_gmt":"2019-07-24T12:24:13","guid":{"rendered":"https:\/\/www.homehost.com.br\/blog\/?p=3871"},"modified":"2024-01-09T07:07:55","modified_gmt":"2024-01-09T10:07:55","slug":"tabela-bootstrap","status":"publish","type":"post","link":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-bootstrap\/","title":{"rendered":"Tabela Bootstrap: entenda de forma descomplicada!"},"content":{"rendered":"<p>Neste artigo, vamos explicar como criar e estilizar uma tabela Bootstrap. Antes de prosseguir, recomenda-se que tenha conhecimentos b\u00e1sicos sobre o Bootstrap e tamb\u00e9m sobre como funciona uma <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">tabela em HTML<\/a>.<\/p>\n<p>O <a href=\"https:\/\/getbootstrap.com.br\/\" target=\"_blank\" rel=\"noopener noreferrer\">Bootstrap<\/a> \u00e9 um dos mais conhecidos Frameworks de c\u00f3digo aberto para CSS na atualidade, sento adotado por grande parte dos desenvolvedores web. Atrav\u00e9s dele, \u00e9 poss\u00edvel adotar diversas classes com CSS j\u00e1 predefinido, facilitando muito o desenvolvimento de <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">p\u00e1ginas HTML<\/a>. Atualmente, se encontra na vers\u00e3o 4.<\/p>\n<p>Um recurso muito utilizado na web \u00e9 o elemento de tabelas. Portanto, os desenvolvedores do Bootstrap pensaram numa forma de incluir as tabelas em seus <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/estilos-html\/\">estilos<\/a> predefinidos.<\/p>\n<p>Neste artigo, abordamos os seguintes t\u00f3picos:<\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-bootstrap\/#topico01\">Incluindo a classe de tabela Bootstrap<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-bootstrap\/#topico02\">Estilos b\u00e1sicos para a tabela Bootstrap<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-bootstrap\/#topico02\">Tema escuro<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-bootstrap\/#topico04\">Alternando a cor das linhas<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-bootstrap\/#topico05\">Mesclando o tema escuro com as linhas alternadas<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-bootstrap\/#topico06\">Tabela com todas as bordas<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-bootstrap\/#topico07\">Tabela sem bordas<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-bootstrap\/#topico08\">Linhas com efeito hover<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-bootstrap\/#topico09\">Tabela bootstrap compacta<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-bootstrap\/#topico10\">Estilos b\u00e1sicos para o cabe\u00e7alho da tabela Bootstrap<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-bootstrap\/#topico11\">Classes contextuais para linhas ou c\u00e9lulas<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-bootstrap\/#topico12\">Tabelas responsivas<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><a name=\"topico01\"><\/a><\/p>\n<h2>Incluindo a classe de tabela Bootstrap<\/h2>\n<p>Como explicado anteriormente, o Bootstrap funciona atrav\u00e9s de estilos predefinidos. Dessa forma, basta adicionar classes aos elementos para obter o resultado desejado. Ao criar uma <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">tabela no HTML<\/a> de forma comum, podemos incluir na\u00a0<a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tags-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">tag<\/a> <strong>&lt;table&gt;<\/strong> a classe <strong>.table<\/strong>, nativa do Bootstrap. Dessa forma, a tabela j\u00e1 receber\u00e1 algumas formata\u00e7\u00f5es visuais.<\/p>\n<p>No exemplo abaixo, vamos aplicar a classe .table na nossa estrutura b\u00e1sica de tabela Bootstrap:<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;table class=\"table\"&gt;\n  &lt;thead&gt;\n    &lt;tr&gt;\n      &lt;th&gt;N\u00ba&lt;\/th&gt;\n      &lt;th&gt;Nome&lt;\/th&gt;\n      &lt;th&gt;Sobrenome&lt;\/th&gt;\n      &lt;th&gt;Usu\u00e1rio&lt;\/th&gt;\n    &lt;\/tr&gt;\n  &lt;\/thead&gt;\n  &lt;tbody&gt;\n    &lt;tr&gt;\n      &lt;th&gt;1&lt;\/th&gt;\n      &lt;td&gt;Joao&lt;\/td&gt;\n      &lt;td&gt;Mateus&lt;\/td&gt;\n      &lt;td&gt;johny&lt;\/td&gt;\n    &lt;\/tr&gt;\n    &lt;tr&gt;\n      &lt;th&gt;2&lt;\/th&gt;\n      &lt;td&gt;Jose&lt;\/td&gt;\n      &lt;td&gt;Silva&lt;\/td&gt;\n      &lt;td&gt;jsilva&lt;\/td&gt;\n    &lt;\/tr&gt;\n    &lt;tr&gt;\n      &lt;th&gt;3&lt;\/th&gt;\n      &lt;td&gt;Alan&lt;\/td&gt;\n      &lt;td&gt;Maia&lt;\/td&gt;\n      &lt;td&gt;alan_maia&lt;\/td&gt;\n    &lt;\/tr&gt;\n  &lt;\/tbody&gt;\n&lt;\/table&gt;<\/pre>\n<p>Como resultado, vamos obter uma tabela Bootstrap:<\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"wp-image-3927 size-full aligncenter\" title=\"Tabela BootsTrap\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/01-1.jpg\" alt=\"Tabela BootsTrap\" width=\"1030\" height=\"237\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/01-1.jpg 1030w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/01-1-300x69.jpg 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/01-1-768x177.jpg 768w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/01-1-1024x236.jpg 1024w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/01-1-1x1.jpg 1w\" sizes=\"(max-width: 1030px) 100vw, 1030px\" \/><\/p>\n<p>Com isso, observamos uma tabela diferente da que seria gerada apenas com o uso do HTML puro, j\u00e1 com uma formata\u00e7\u00e3o b\u00e1sica. Por\u00e9m, al\u00e9m da classe .table, \u00e9 poss\u00edvel ainda incluir diversas outras classes que comp\u00f5em a tabela Bootstrap.<br \/>\n<a name=\"topico02\"><\/a><\/p>\n<h2>Estilos b\u00e1sicos para a tabela Bootstrap<\/h2>\n<h3>Tema escuro<\/h3>\n<p>Para atribuir um tema de tons escuros \u00e0 tabela Bootstrap, basta acrescentar a classe <strong>.table-dark<\/strong>, como no seguinte c\u00f3digo:<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;table class=\"table table-dark\"&gt;\n  &lt;thead&gt;\n    &lt;tr&gt;\n      &lt;th&gt;N\u00ba&lt;\/th&gt;\n      &lt;th&gt;Nome&lt;\/th&gt;\n      &lt;th&gt;Sobrenome&lt;\/th&gt;\n      &lt;th&gt;Usu\u00e1rio&lt;\/th&gt;\n    &lt;\/tr&gt;\n  &lt;\/thead&gt;\n  &lt;tbody&gt;\n    &lt;tr&gt;\n      &lt;th&gt;1&lt;\/th&gt;\n      &lt;td&gt;Joao&lt;\/td&gt;\n      &lt;td&gt;Mateus&lt;\/td&gt;\n      &lt;td&gt;johny&lt;\/td&gt;\n    &lt;\/tr&gt;\n    &lt;tr&gt;\n      &lt;th&gt;2&lt;\/th&gt;\n      &lt;td&gt;Jose&lt;\/td&gt;\n      &lt;td&gt;Silva&lt;\/td&gt;\n      &lt;td&gt;jsilva&lt;\/td&gt;\n    &lt;\/tr&gt;\n    &lt;tr&gt;\n      &lt;th&gt;3&lt;\/th&gt;\n      &lt;td&gt;Alan&lt;\/td&gt;\n      &lt;td&gt;Maia&lt;\/td&gt;\n      &lt;td&gt;alan_maia&lt;\/td&gt;\n    &lt;\/tr&gt;\n  &lt;\/tbody&gt;\n&lt;\/table&gt;<\/pre>\n<p>Neste exemplo, o resultado ser\u00e1:<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-3928 size-full\" title=\"Tabela Bootstrap com tema escuro\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/02-1.jpg\" alt=\"Tabela Bootstrap com tema escuro\" width=\"1126\" height=\"236\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/02-1.jpg 1126w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/02-1-300x63.jpg 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/02-1-768x161.jpg 768w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/02-1-1024x215.jpg 1024w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/02-1-1x1.jpg 1w\" sizes=\"(max-width: 1126px) 100vw, 1126px\" \/><br \/>\n<a name=\"topico04\"><\/a><\/p>\n<h3>Alternando a cor das linhas<\/h3>\n<p>Tamb\u00e9m conhecido como linhas zebradas, ao aplicar a classe <strong>.table-striped<\/strong>, obtemos um efeito de cores alternadas entre as linha do corpo da tabela. Veja o exemplo:<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;table class=\"table table-striped\"&gt;\n  &lt;thead&gt;\n    &lt;tr&gt;\n      &lt;th&gt;N\u00ba&lt;\/th&gt;\n      &lt;th&gt;Nome&lt;\/th&gt;\n      &lt;th&gt;Sobrenome&lt;\/th&gt;\n      &lt;th&gt;Usu\u00e1rio&lt;\/th&gt;\n    &lt;\/tr&gt;\n  &lt;\/thead&gt;\n  &lt;tbody&gt;\n    &lt;tr&gt;\n      &lt;th&gt;1&lt;\/th&gt;\n      &lt;td&gt;Joao&lt;\/td&gt;\n      &lt;td&gt;Mateus&lt;\/td&gt;\n      &lt;td&gt;johny&lt;\/td&gt;\n    &lt;\/tr&gt;\n    &lt;tr&gt;\n      &lt;th&gt;2&lt;\/th&gt;\n      &lt;td&gt;Jose&lt;\/td&gt;\n      &lt;td&gt;Silva&lt;\/td&gt;\n      &lt;td&gt;jsilva&lt;\/td&gt;\n    &lt;\/tr&gt;\n    &lt;tr&gt;\n      &lt;th&gt;3&lt;\/th&gt;\n      &lt;td&gt;Alan&lt;\/td&gt;\n      &lt;td&gt;Maia&lt;\/td&gt;\n      &lt;td&gt;alan_maia&lt;\/td&gt;\n    &lt;\/tr&gt;\n  &lt;\/tbody&gt;\n&lt;\/table&gt;<\/pre>\n<p>Dessa forma, obtemos o resultado conforme a imagem abaixo:<\/p>\n<p><img decoding=\"async\" class=\"wp-image-3929 size-full aligncenter\" title=\"Tabela com linhas Zebradas\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/03-1.jpg\" alt=\"Tabela com linhas Zebradas\" width=\"1124\" height=\"233\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/03-1.jpg 1124w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/03-1-300x62.jpg 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/03-1-768x159.jpg 768w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/03-1-1024x212.jpg 1024w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/03-1-1x1.jpg 1w\" sizes=\"(max-width: 1124px) 100vw, 1124px\" \/><br \/>\n<a name=\"topico05\"><\/a><\/p>\n<h3>Mesclando o tema escuro com as linhas alternadas<\/h3>\n<p>Tamb\u00e9m \u00e9 poss\u00edvel incluir ambas as classes na mesma tabela. Dessa forma, vamos obter uma tabela com tema escuro e com linhas alternadas, conforme exemplificado no c\u00f3digo abaixo:<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;table class=\"table table-striped table-dark\"&gt;\n  &lt;thead&gt;\n    &lt;tr&gt;\n      &lt;th&gt;N\u00ba&lt;\/th&gt;\n      &lt;th&gt;Nome&lt;\/th&gt;\n      &lt;th&gt;Sobrenome&lt;\/th&gt;\n      &lt;th&gt;Usu\u00e1rio&lt;\/th&gt;\n    &lt;\/tr&gt;\n  &lt;\/thead&gt;\n  &lt;tbody&gt;\n    &lt;tr&gt;\n      &lt;th&gt;1&lt;\/th&gt;\n      &lt;td&gt;Joao&lt;\/td&gt;\n      &lt;td&gt;Mateus&lt;\/td&gt;\n      &lt;td&gt;johny&lt;\/td&gt;\n    &lt;\/tr&gt;\n    &lt;tr&gt;\n      &lt;th&gt;2&lt;\/th&gt;\n      &lt;td&gt;Jose&lt;\/td&gt;\n      &lt;td&gt;Silva&lt;\/td&gt;\n      &lt;td&gt;jsilva&lt;\/td&gt;\n    &lt;\/tr&gt;\n    &lt;tr&gt;\n      &lt;th&gt;3&lt;\/th&gt;\n      &lt;td&gt;Alan&lt;\/td&gt;\n      &lt;td&gt;Maia&lt;\/td&gt;\n      &lt;td&gt;alan_maia&lt;\/td&gt;\n    &lt;\/tr&gt;\n  &lt;\/tbody&gt;\n&lt;\/table&gt;<\/pre>\n<p>Dessa forma, unindo os dois efeitos na mesma tabela, o resultado do exemplo ser\u00e1:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-3930 size-full\" title=\"Tabela com Tema escuro e linhas Zebradas\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/04-1.jpg\" alt=\"Tabela com Tema escuro e linhas Zebradas\" width=\"1092\" height=\"237\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/04-1.jpg 1092w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/04-1-300x65.jpg 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/04-1-768x167.jpg 768w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/04-1-1024x222.jpg 1024w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/04-1-1x1.jpg 1w\" sizes=\"(max-width: 1092px) 100vw, 1092px\" \/><br \/>\n<a name=\"topico06\"><\/a><\/p>\n<h3>Tabela com todas as bordas<\/h3>\n<p>No padr\u00e3o da classe <strong>.table<\/strong>, j\u00e1 \u00e9 poss\u00edvel observar que ele traz uma borda entre as linhas como padr\u00e3o. Por\u00e9m, \u00e9 poss\u00edvel tamb\u00e9m adicionar bordas n\u00e3o s\u00f3 \u00e0s linhas, mas tamb\u00e9m entre as colunas atrav\u00e9s da classe <strong>.table-bordered<\/strong>. Dessa forma, vamos utilizar essa classe na tabela Bootstrap do c\u00f3digo em exemplo:<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;table class=\"table table-bordered\"&gt;\n  &lt;thead&gt;\n    &lt;tr&gt;\n      &lt;th&gt;N\u00ba&lt;\/th&gt;\n      &lt;th&gt;Nome&lt;\/th&gt;\n      &lt;th&gt;Sobrenome&lt;\/th&gt;\n      &lt;th&gt;Usu\u00e1rio&lt;\/th&gt;\n    &lt;\/tr&gt;\n  &lt;\/thead&gt;\n  &lt;tbody&gt;\n    &lt;tr&gt;\n      &lt;th&gt;1&lt;\/th&gt;\n      &lt;td&gt;Joao&lt;\/td&gt;\n      &lt;td&gt;Mateus&lt;\/td&gt;\n      &lt;td&gt;johny&lt;\/td&gt;\n    &lt;\/tr&gt;\n    &lt;tr&gt;\n      &lt;th&gt;2&lt;\/th&gt;\n      &lt;td&gt;Jose&lt;\/td&gt;\n      &lt;td&gt;Silva&lt;\/td&gt;\n      &lt;td&gt;jsilva&lt;\/td&gt;\n    &lt;\/tr&gt;\n    &lt;tr&gt;\n      &lt;th&gt;3&lt;\/th&gt;\n      &lt;td&gt;Alan&lt;\/td&gt;\n      &lt;td&gt;Maia&lt;\/td&gt;\n      &lt;td&gt;alan_maia&lt;\/td&gt;\n    &lt;\/tr&gt;\n  &lt;\/tbody&gt;\n&lt;\/table&gt;<\/pre>\n<p>O resultado ser\u00e1 conforme a imagem abaixo:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-3931 size-full\" title=\"Table com borda\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/05-1.jpg\" alt=\"Table com borda\" width=\"1178\" height=\"243\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/05-1.jpg 1178w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/05-1-300x62.jpg 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/05-1-768x158.jpg 768w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/05-1-1024x211.jpg 1024w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/05-1-1x1.jpg 1w\" sizes=\"(max-width: 1178px) 100vw, 1178px\" \/><\/p>\n<p>Podemos ainda, utilizar essa classe em conjunto com outras classes. Podemos ent\u00e3o incluir um tema escuro, com linhas alternadas e com bordas para a tabela Bootstrap. Que tal tentar?<br \/>\n<a name=\"topico07\"><\/a><\/p>\n<h3>Tabela sem borda<\/h3>\n<p>Anteriormente vimos como aplicar bordas entre todas as c\u00e9lulas da tabela. Por\u00e9m, caso necessite deixar a tabela sem nenhuma borda, inclusive sem a borda entre linhas (padr\u00e3o da classe <strong>.table<\/strong>), podemos utilizar a classe <strong>.table-borderless<\/strong>. Dessa forma, teremos como resultado uma tabela sem nenhuma linha, por\u00e9m mantendo todas as demais formata\u00e7\u00f5es. Vejamos o exemplo abaixo:<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;table class=\"table table-borderless\"&gt;\n  &lt;thead&gt;\n    &lt;tr&gt;\n      &lt;th&gt;N\u00ba&lt;\/th&gt;\n      &lt;th&gt;Nome&lt;\/th&gt;\n      &lt;th&gt;Sobrenome&lt;\/th&gt;\n      &lt;th&gt;Usu\u00e1rio&lt;\/th&gt;\n    &lt;\/tr&gt;\n  &lt;\/thead&gt;\n  &lt;tbody&gt;\n    &lt;tr&gt;\n      &lt;th&gt;1&lt;\/th&gt;\n      &lt;td&gt;Joao&lt;\/td&gt;\n      &lt;td&gt;Mateus&lt;\/td&gt;\n      &lt;td&gt;johny&lt;\/td&gt;\n    &lt;\/tr&gt;\n    &lt;tr&gt;\n      &lt;th&gt;2&lt;\/th&gt;\n      &lt;td&gt;Jose&lt;\/td&gt;\n      &lt;td&gt;Silva&lt;\/td&gt;\n      &lt;td&gt;jsilva&lt;\/td&gt;\n    &lt;\/tr&gt;\n    &lt;tr&gt;\n      &lt;th&gt;3&lt;\/th&gt;\n      &lt;td&gt;Alan&lt;\/td&gt;\n      &lt;td&gt;Maia&lt;\/td&gt;\n      &lt;td&gt;alan_maia&lt;\/td&gt;\n    &lt;\/tr&gt;\n  &lt;\/tbody&gt;\n&lt;\/table&gt;<\/pre>\n<p>Assim sendo, obtemos uma tabela conforme a imagem abaixo:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-3932 size-full\" title=\"Table sem borda\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/06-1.jpg\" alt=\"Table sem borda\" width=\"1123\" height=\"234\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/06-1.jpg 1123w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/06-1-300x63.jpg 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/06-1-768x160.jpg 768w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/06-1-1024x213.jpg 1024w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/06-1-1x1.jpg 1w\" sizes=\"(max-width: 1123px) 100vw, 1123px\" \/><\/p>\n<p>Tal como na classe que acrescenta bordas \u00e0 tabela, tamb\u00e9m podemos incluir outras classes em conjunto a essa.<br \/>\n<a name=\"topico08\"><\/a><\/p>\n<h3>Linhas com efeito hover<\/h3>\n<p>\u00c9 poss\u00edvel incluir com o Bootstrap a classe <strong>.table-hover<\/strong>. Dessa forma, ao passar o mouse por cima de uma linha da tabela, a mesma realizar\u00e1 um efeito visual. Este recurso tamb\u00e9m pode ser utilizado em conjunto com outras classes nativas. Experimente aplicar o c\u00f3digo abaixo e veja o resultado:<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;table class=\"table table-hover\"&gt;\n  &lt;thead&gt;\n    &lt;tr&gt;\n      &lt;th&gt;N\u00ba&lt;\/th&gt;\n      &lt;th&gt;Nome&lt;\/th&gt;\n      &lt;th&gt;Sobrenome&lt;\/th&gt;\n      &lt;th&gt;Usu\u00e1rio&lt;\/th&gt;\n    &lt;\/tr&gt;\n  &lt;\/thead&gt;\n  &lt;tbody&gt;\n    &lt;tr&gt;\n      &lt;th&gt;1&lt;\/th&gt;\n      &lt;td&gt;Joao&lt;\/td&gt;\n      &lt;td&gt;Mateus&lt;\/td&gt;\n      &lt;td&gt;johny&lt;\/td&gt;\n    &lt;\/tr&gt;\n    &lt;tr&gt;\n      &lt;th&gt;2&lt;\/th&gt;\n      &lt;td&gt;Jose&lt;\/td&gt;\n      &lt;td&gt;Silva&lt;\/td&gt;\n      &lt;td&gt;jsilva&lt;\/td&gt;\n    &lt;\/tr&gt;\n    &lt;tr&gt;\n      &lt;th&gt;3&lt;\/th&gt;\n      &lt;td&gt;Alan&lt;\/td&gt;\n      &lt;td&gt;Maia&lt;\/td&gt;\n      &lt;td&gt;alan_maia&lt;\/td&gt;\n    &lt;\/tr&gt;\n  &lt;\/tbody&gt;\n&lt;\/table&gt;<\/pre>\n<p><a name=\"topico09\"><\/a><\/p>\n<h3>Tabela Bootstrap compacta<\/h3>\n<p>Atrav\u00e9s da classe <strong>.table-sm<\/strong>, podemos reduzir o tamanho de uma tabela. Essa classe possui a metade do valor de padding entre linhas que o padr\u00e3o adotado pelo Bootstrap, o que faz com que ela seja capaz de compactar a tabela. Vejamos ent\u00e3o o exemplo a seguir:<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;table class=\"table table-sm\"&gt;\n  &lt;thead&gt;\n    &lt;tr&gt;\n      &lt;th&gt;N\u00ba&lt;\/th&gt;\n      &lt;th&gt;Nome&lt;\/th&gt;\n      &lt;th&gt;Sobrenome&lt;\/th&gt;\n      &lt;th&gt;Usu\u00e1rio&lt;\/th&gt;\n    &lt;\/tr&gt;\n  &lt;\/thead&gt;\n  &lt;tbody&gt;\n    &lt;tr&gt;\n      &lt;th&gt;1&lt;\/th&gt;\n      &lt;td&gt;Joao&lt;\/td&gt;\n      &lt;td&gt;Mateus&lt;\/td&gt;\n      &lt;td&gt;johny&lt;\/td&gt;\n    &lt;\/tr&gt;\n    &lt;tr&gt;\n      &lt;th&gt;2&lt;\/th&gt;\n      &lt;td&gt;Jose&lt;\/td&gt;\n      &lt;td&gt;Silva&lt;\/td&gt;\n      &lt;td&gt;jsilva&lt;\/td&gt;\n    &lt;\/tr&gt;\n    &lt;tr&gt;\n      &lt;th&gt;3&lt;\/th&gt;\n      &lt;td&gt;Alan&lt;\/td&gt;\n      &lt;td&gt;Maia&lt;\/td&gt;\n      &lt;td&gt;alan_maia&lt;\/td&gt;\n    &lt;\/tr&gt;\n  &lt;\/tbody&gt;\n&lt;\/table&gt;<\/pre>\n<p>Perceba como o resultado ser\u00e1 uma tabela com menor espa\u00e7amento entre as linhas:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-3933 size-full\" title=\"Tabela Bootstrap Pequena\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/07-1.jpg\" alt=\"Tabela Bootstrap Pequena\" width=\"1103\" height=\"160\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/07-1.jpg 1103w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/07-1-300x44.jpg 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/07-1-768x111.jpg 768w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/07-1-1024x149.jpg 1024w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/07-1-1x1.jpg 1w\" sizes=\"(max-width: 1103px) 100vw, 1103px\" \/><br \/>\n<a name=\"topico10\"><\/a><\/p>\n<h2>Estilos b\u00e1sicos para o cabe\u00e7alho da tabela Bootstrap<\/h2>\n<p>Al\u00e9m dos estilos b\u00e1sicos para aplicar na tabela, existe ainda a op\u00e7\u00e3o de aplicar um estilo exclusivamente ao cabe\u00e7alho da tabela Bootstrap. Para isso, basta acrescentarmos ao <strong>&lt;thead&gt;<\/strong> as classes <strong>.thead-light\u00a0<\/strong>ou <strong>.thead-dark<\/strong>, deixando assim mais claro ou mais escuro. Veja ent\u00e3o no exemplo abaixo duas tabelas:<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;table class=\"table\"&gt;\n  &lt;thead class=\"thead-light\"&gt;\n    &lt;tr&gt;\n      &lt;th&gt;N\u00ba&lt;\/th&gt;\n      &lt;th&gt;Nome&lt;\/th&gt;\n      &lt;th&gt;Sobrenome&lt;\/th&gt;\n      &lt;th&gt;Usu\u00e1rio&lt;\/th&gt;\n    &lt;\/tr&gt;\n  &lt;\/thead&gt;\n  &lt;tbody&gt;\n    &lt;tr&gt;\n      &lt;th&gt;1&lt;\/th&gt;\n      &lt;td&gt;Joao&lt;\/td&gt;\n      &lt;td&gt;Mateus&lt;\/td&gt;\n      &lt;td&gt;johny&lt;\/td&gt;\n    &lt;\/tr&gt;\n    &lt;tr&gt;\n      &lt;th&gt;2&lt;\/th&gt;\n      &lt;td&gt;Jose&lt;\/td&gt;\n      &lt;td&gt;Silva&lt;\/td&gt;\n      &lt;td&gt;jsilva&lt;\/td&gt;\n    &lt;\/tr&gt;\n  &lt;\/tbody&gt;\n&lt;\/table&gt;\n&lt;br&gt;\n&lt;table class=\"table\"&gt;\n  &lt;thead class=\"thead-dark\"&gt;\n    &lt;tr&gt;\n      &lt;th&gt;N\u00ba&lt;\/th&gt;\n      &lt;th&gt;Nome&lt;\/th&gt;\n      &lt;th&gt;Sobrenome&lt;\/th&gt;\n      &lt;th&gt;Usu\u00e1rio&lt;\/th&gt;\n    &lt;\/tr&gt;\n  &lt;\/thead&gt;\n  &lt;tbody&gt;\n    &lt;tr&gt;\n      &lt;th&gt;1&lt;\/th&gt;\n      &lt;td&gt;Joao&lt;\/td&gt;\n      &lt;td&gt;Mateus&lt;\/td&gt;\n      &lt;td&gt;johny&lt;\/td&gt;\n    &lt;\/tr&gt;\n    &lt;tr&gt;\n      &lt;th&gt;2&lt;\/th&gt;\n      &lt;td&gt;Jose&lt;\/td&gt;\n      &lt;td&gt;Silva&lt;\/td&gt;\n      &lt;td&gt;jsilva&lt;\/td&gt;\n    &lt;\/tr&gt;\n  &lt;\/tbody&gt;\n&lt;\/table&gt;\n<\/pre>\n<p>O resultado final para as tabelas do c\u00f3digo acima ser\u00e1 o seguinte:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-3934 size-full\" title=\"Modificando o &lt;thead&gt; da tabela bootstrap\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/08-1.jpg\" alt=\"Modificando o &lt;thead&gt; da tabela bootstrap\" width=\"1180\" height=\"406\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/08-1.jpg 1180w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/08-1-300x103.jpg 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/08-1-768x264.jpg 768w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/08-1-1024x352.jpg 1024w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/08-1-1x1.jpg 1w\" sizes=\"(max-width: 1180px) 100vw, 1180px\" \/><br \/>\n<a name=\"topico11\"><\/a><\/p>\n<h2>Classes contextuais para linhas ou c\u00e9lulas<\/h2>\n<p>Existem classes preestabelecidas no Bootstrap que podem ser inseridas dentro das tags de linhas ou c\u00e9lulas. Elas servem para &#8220;colorir&#8221; as linhas ou c\u00e9lulas. Basta acrescentar as classes abaixo em linhas ou em c\u00e9lulas:<\/p>\n<ul>\n<li><strong>.table-active<\/strong><\/li>\n<li><strong>.table-primary<\/strong><\/li>\n<li><strong>.table-secondary<\/strong><\/li>\n<li><strong>.table-success<\/strong><\/li>\n<li><strong>.table-info<\/strong><\/li>\n<li><strong>.table-warning<\/strong><\/li>\n<li><strong>.table-dark<\/strong><\/li>\n<li><strong>.table-light<\/strong><\/li>\n<\/ul>\n<p>Portanto, vejamos o exemplo abaixo utilizando essas classes na tabela Bootstrap:<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;table class=\"table\"&gt;\n  &lt;thead&gt;\n    &lt;tr&gt;\n      &lt;th&gt;Classe&lt;\/th&gt;\n      &lt;th&gt;&lt;\/th&gt;\n    &lt;\/tr&gt;\n  &lt;\/thead&gt;\n  &lt;tbody&gt;\n    &lt;tr class='table-active'&gt;\n      &lt;td&gt;.table-active&lt;\/td&gt;\n      &lt;td&gt;exemplo&lt;\/td&gt;\n    &lt;\/tr&gt;\n    &lt;tr class='table-primary'&gt;\n      &lt;td&gt;.table-primary&lt;\/td&gt;\n      &lt;td&gt;exemplo&lt;\/td&gt;\n    &lt;\/tr&gt;\n    &lt;tr class='table-secondary'&gt;\n      &lt;td&gt;.table-secondary&lt;\/td&gt;\n      &lt;td&gt;exemplo&lt;\/td&gt;\n    &lt;\/tr&gt;\n    &lt;tr class='table-success'&gt;\n      &lt;td&gt;.table-success&lt;\/td&gt;\n      &lt;td&gt;exemplo&lt;\/td&gt;\n    &lt;\/tr&gt;\n    &lt;tr class='table-info'&gt;\n      &lt;td&gt;.table-info&lt;\/td&gt;\n      &lt;td&gt;exemplo&lt;\/td&gt;\n    &lt;\/tr&gt;\n    &lt;tr class='table-danger'&gt;\n      &lt;td&gt;.table-danger&lt;\/td&gt;\n      &lt;td&gt;exemplo&lt;\/td&gt;\n    &lt;\/tr&gt;\n    &lt;tr class='table-warning'&gt;\n      &lt;td&gt;.table-warning&lt;\/td&gt;\n      &lt;td&gt;exemplo&lt;\/td&gt;\n    &lt;\/tr&gt;\n    &lt;tr class='table-dark'&gt;\n      &lt;td&gt;.table-dark&lt;\/td&gt;\n      &lt;td&gt;exemplo&lt;\/td&gt;\n    &lt;\/tr&gt;\n    &lt;tr class='table-light'&gt;\n      &lt;td&gt;.table-light&lt;\/td&gt;\n      &lt;td&gt;exemplo&lt;\/td&gt;\n    &lt;\/tr&gt;\n  &lt;\/tbody&gt;\n&lt;\/table&gt;<\/pre>\n<p>Dessa forma, obtemos o seguinte resultado:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3881\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/09.jpg\" alt=\"Classes Contextuais da Tabela Bootstrap\" width=\"1050\" height=\"523\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/09.jpg 1050w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/09-300x149.jpg 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/09-768x383.jpg 768w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/09-1024x510.jpg 1024w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/09-1x1.jpg 1w\" sizes=\"(max-width: 1050px) 100vw, 1050px\" \/><\/p>\n<p>Apesar do resultado ser bem interessante, \u00e9 importante saber que esses estilos n\u00e3o se aplicam para o tema escuro. Ainda assim, voc\u00ea pode estar utilizando as classes de <a href=\"https:\/\/getbootstrap.com.br\/docs\/4.1\/utilities\/colors\/#cores-de-fundo\" target=\"_blank\" rel=\"noopener noreferrer\">cores de fundo (background)<\/a> do bootstrap para aplicar \u00e0s linhas ou c\u00e9lulas de uma tabela com tema escuro.<br \/>\n<a name=\"topico12\"><\/a><\/p>\n<h2>Tabelas responsivas<\/h2>\n<p>Agora que j\u00e1 sabemos tudo que precisamos para estilizar o visual das nossas tabelas, vamos ver como deix\u00e1-las adaptadas a todas as telas!<\/p>\n<p>As tabelas responsivas permitem a realiza\u00e7\u00e3o de rolagem horizontal, de forma r\u00e1pida e intuitiva. Para tornar uma tabela Boostrap responsiva para todos os tamanhos de tela (viewport), independente do <a href=\"https:\/\/getbootstrap.com.br\/docs\/4.1\/layout\/overview\/#breakpoints-reponsivos\" target=\"_blank\" rel=\"noopener noreferrer\">breakpoint<\/a>, utilizamos a classe <strong>.table-responsive<\/strong> em um elemento pai. Dessa forma, basta acrescentar uma div pai \u00e0 tabela com essa classe, conforme no c\u00f3digo do exemplo abaixo:<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;div class=\"table-responsive\"&gt;\n    &lt;table class=\"table\"&gt;\n      &lt;thead&gt;\n        &lt;tr&gt;\n          &lt;th&gt;numero&lt;\/th&gt;\n          &lt;th&gt;exemplo&lt;\/th&gt;\n        &lt;\/tr&gt;\n      &lt;\/thead&gt;\n      &lt;tbody&gt;\n        &lt;tr&gt;\n          &lt;td&gt;01&lt;\/td&gt;\n          &lt;td&gt;exemplo&lt;\/td&gt;\n        &lt;\/tr&gt;\n        &lt;tr&gt;\n          &lt;td&gt;02&lt;\/td&gt;\n          &lt;td&gt;exemplo&lt;\/td&gt;\n        &lt;\/tr&gt;\n      &lt;\/tbody&gt;\n    &lt;\/table&gt;\n&lt;\/div&gt;<\/pre>\n<p>Observe ent\u00e3o que a classe \u00e9 aplicada \u00e0\u00a0<strong>&lt;div&gt;<\/strong> que ir\u00e1 servir como container, elemento pai, da tag <strong>&lt;table&gt;<\/strong>.<\/p>\n<p>Por\u00e9m, caso queira acrescentar o responsivo para <a href=\"https:\/\/getbootstrap.com.br\/docs\/4.1\/layout\/overview\/#breakpoints-reponsivos\" target=\"_blank\" rel=\"noopener noreferrer\">breaking points<\/a> espec\u00edficos, basta acrescentar \u00e0 <strong>&lt;div&gt;<\/strong> as classes:<\/p>\n<ul>\n<li><strong>.table-responsive-sm<\/strong><\/li>\n<li><strong>.table-responsive-md<\/strong><\/li>\n<li><strong>.table-responsive-lg<\/strong><\/li>\n<li><strong>.table-responsive-xl<\/strong><\/li>\n<\/ul>\n<p>Para melhor entendimento dos breakpoints apresentados anteriormente, recomendamos a leitura da documenta\u00e7\u00e3o do Bootstrap sobre os<a href=\"https:\/\/getbootstrap.com.br\/docs\/4.1\/layout\/overview\/#breakpoints-reponsivos\" target=\"_blank\" rel=\"noopener noreferrer\"> breakpoints responsivos.<\/a><\/p>\n<p>Com este tutorial voc\u00ea possui um guia completo para utilizar as tabelas Bootstrap em qualquer p\u00e1gina da web! Para isso, voc\u00ea pode adquirir o Bootstrap gratuitamente no\u00a0<a href=\"https:\/\/getbootstrap.com.br\/\" target=\"_blank\" rel=\"noopener noreferrer\">site oficial<\/a> e come\u00e7ar a praticar agora mesmo!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Neste artigo, vamos explicar como criar e estilizar uma tabela Bootstrap. Antes de prosseguir, recomenda-se que tenha conhecimentos b\u00e1sicos sobre o Bootstrap e tamb\u00e9m sobre como funciona uma tabela em HTML. O Bootstrap \u00e9 um dos mais conhecidos Frameworks de c\u00f3digo aberto para CSS na atualidade, sento adotado por grande parte dos desenvolvedores web. Atrav\u00e9s [&hellip;]<\/p>\n","protected":false},"author":18,"featured_media":3882,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_helpful_status":1,"_lmt_disableupdate":"","_lmt_disable":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[161,3,4,213,229,6,164,42],"tags":[2781,2624,2621,3017],"class_list":["post-3871","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-construtor-de-sites","category-criar-sites","category-desenvolvedores","category-frontpage","category-outros","category-tutoriais","category-wordpress-tutoriais","category-wordpress","tag-bootstrap","tag-css","tag-html","tag-tabela"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tabela Bootstrap: entenda de forma descomplicada! | Homehost<\/title>\n<meta name=\"description\" content=\"Tabela Bootstrap: Tudo que voc\u00ea precisa saber para incluir tabelas em suas p\u00e1ginas com o Framework CSS mais utilizado na atualidade!\" \/>\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\/tutoriais\/tabela-bootstrap\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tabela Bootstrap: entenda de forma descomplicada! | Homehost\" \/>\n<meta property=\"og:description\" content=\"Tabela Bootstrap: Tudo que voc\u00ea precisa saber para incluir tabelas em suas p\u00e1ginas com o Framework CSS mais utilizado na atualidade!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-bootstrap\/\" \/>\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-24T12:24:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-09T10:07:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tabela_bootstrap.png\" \/>\n\t<meta property=\"og:image:width\" content=\"561\" \/>\n\t<meta property=\"og:image:height\" content=\"220\" \/>\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=\"8 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\/tutoriais\/tabela-bootstrap\/\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-bootstrap\/\",\"name\":\"Tabela Bootstrap: entenda de forma descomplicada! | Homehost\",\"isPartOf\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-bootstrap\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-bootstrap\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tabela_bootstrap.png\",\"datePublished\":\"2019-07-24T12:24:13+00:00\",\"dateModified\":\"2024-01-09T10:07:55+00:00\",\"author\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e\"},\"description\":\"Tabela Bootstrap: Tudo que voc\u00ea precisa saber para incluir tabelas em suas p\u00e1ginas com o Framework CSS mais utilizado na atualidade!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-bootstrap\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-bootstrap\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-bootstrap\/#primaryimage\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tabela_bootstrap.png\",\"contentUrl\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tabela_bootstrap.png\",\"width\":561,\"height\":220,\"caption\":\"Tabela Bootstrap\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-bootstrap\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/www.homehost.com.br\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tabela Bootstrap: entenda de forma descomplicada!\"}]},{\"@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 Bootstrap: entenda de forma descomplicada! | Homehost","description":"Tabela Bootstrap: Tudo que voc\u00ea precisa saber para incluir tabelas em suas p\u00e1ginas com o Framework CSS mais utilizado na atualidade!","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\/tutoriais\/tabela-bootstrap\/","og_locale":"pt_BR","og_type":"article","og_title":"Tabela Bootstrap: entenda de forma descomplicada! | Homehost","og_description":"Tabela Bootstrap: Tudo que voc\u00ea precisa saber para incluir tabelas em suas p\u00e1ginas com o Framework CSS mais utilizado na atualidade!","og_url":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-bootstrap\/","og_site_name":"Homehost","article_publisher":"https:\/\/www.facebook.com\/Homehost\/","article_published_time":"2019-07-24T12:24:13+00:00","article_modified_time":"2024-01-09T10:07:55+00:00","og_image":[{"width":561,"height":220,"url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tabela_bootstrap.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":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-bootstrap\/","url":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-bootstrap\/","name":"Tabela Bootstrap: entenda de forma descomplicada! | Homehost","isPartOf":{"@id":"https:\/\/www.homehost.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-bootstrap\/#primaryimage"},"image":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tabela_bootstrap.png","datePublished":"2019-07-24T12:24:13+00:00","dateModified":"2024-01-09T10:07:55+00:00","author":{"@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e"},"description":"Tabela Bootstrap: Tudo que voc\u00ea precisa saber para incluir tabelas em suas p\u00e1ginas com o Framework CSS mais utilizado na atualidade!","breadcrumb":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-bootstrap\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-bootstrap\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-bootstrap\/#primaryimage","url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tabela_bootstrap.png","contentUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tabela_bootstrap.png","width":561,"height":220,"caption":"Tabela Bootstrap"},{"@type":"BreadcrumbList","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-bootstrap\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.homehost.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Tabela Bootstrap: entenda de forma descomplicada!"}]},{"@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":"ad_hmhst","jetpack_featured_media_url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tabela_bootstrap.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/3871","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=3871"}],"version-history":[{"count":9,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/3871\/revisions"}],"predecessor-version":[{"id":13072,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/3871\/revisions\/13072"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/media\/3882"}],"wp:attachment":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/media?parent=3871"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/categories?post=3871"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/tags?post=3871"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}