{"id":3909,"date":"2016-08-16T09:35:19","date_gmt":"2016-08-16T09:35:19","guid":{"rendered":"http:\/\/http:\/\/main.arktheme.com\/?page_id=3909"},"modified":"2023-04-24T17:58:45","modified_gmt":"2023-04-24T17:58:45","slug":"tables","status":"publish","type":"page","link":"https:\/\/main.arktheme.com\/shortcodes\/typographymisc\/tables\/","title":{"rendered":"Tables"},"content":{"rendered":"<p><section class=\"ffb-id-h7lqa1q fg-section fg-el-has-bg fg-text-dark\"><span class=\"fg-bg\"><span data-fg-bg=\"{&quot;type&quot;:&quot;image&quot;,&quot;opacity&quot;:&quot;1&quot;,&quot;url&quot;:&quot;https:\\\/\\\/main.arktheme.com\\\/wp-content\\\/uploads\\\/2016\\\/08\\\/17.jpg&quot;,&quot;size&quot;:&quot;cover&quot;,&quot;repeat&quot;:&quot;no-repeat&quot;,&quot;attachment&quot;:&quot;fixed&quot;,&quot;position&quot;:&quot;10% 100%&quot;}\" class=\"fg-bg-layer fg-bg-type-image \" style=\"opacity: 1; background-image: url(&quot;https:\/\/main.arktheme.com\/wp-content\/uploads\/2016\/08\/17.jpg&quot;); background-repeat: no-repeat; background-attachment: fixed; background-position: 10% 100%; background-size: cover;\"><\/span><span data-fg-bg=\"{&quot;type&quot;:&quot;color&quot;,&quot;opacity&quot;:1,&quot;color&quot;:&quot;rgba(53, 53, 61, 0.5)&quot;}\" class=\"fg-bg-layer fg-bg-type-color \" style=\"opacity: 1; background-color: rgba(53, 53, 61, 0.5);\"><\/span><\/span><div class=\"fg-container container fg-container-large fg-container-lvl--1 \"><div class=\"fg-row row    \" ><div class=\"ffb-id-h7lqa1r fg-col col-xs-12 col-xs-offset-0 col-xs-pull-0 col-xs-push-0 col-md-12 fg-text-dark\"><section class=\"ffb-id-h7lqsit breadcrumbs-v5 fg-el-has-bg fg-text-light\"><span class=\"fg-bg\"><span data-fg-bg=\"{&quot;type&quot;:&quot;color&quot;,&quot;opacity&quot;:1,&quot;color&quot;:&quot;&quot;}\" class=\"fg-bg-layer fg-bg-type-color \" style=\"opacity: 1; background-color: ;\"><\/span><\/span><h2 class=\"breadcrumbs-v5-title\"><\/h2><span class=\"breadcrumbs-v5-subtitle\"><\/span><\/section><\/div><\/div><\/div><\/section><style>.ffb-id-h7lqa1q{ padding-top: 170px;padding-bottom: 100px;}.ffb-id-h7lqsit  .breadcrumbs-v5-title{ color:#ffffff;}.ffb-id-h7lqsit  a{ color:#ffffff;}.ffb-id-h7lqsit  a:hover{ color:#00bcd4;}.ffb-id-h7lqsit  .breadcrumbs-v5-subtitle{ color:#ffffff;}.ffb-id-h7lqsit  .breadcrumbs-v5-subtitle .active{ color:#ffffff;}<\/style><script type=\"text\/javascript\"><\/script><section class=\"ffb-id-ic3m028 fg-section fg-el-has-bg fg-text-dark\"><span class=\"fg-bg\"><span data-fg-bg=\"{&quot;type&quot;:&quot;color&quot;,&quot;opacity&quot;:1,&quot;color&quot;:&quot;#f7f8fa&quot;}\" class=\"fg-bg-layer fg-bg-type-color \" style=\"opacity: 1; background-color: #f7f8fa;\"><\/span><\/span><div class=\"fg-container container fg-container-large fg-container-lvl--1 \"><div class=\"fg-row row    \" ><div class=\"ffb-id-ic3mabg fg-col col-xs-12 col-md-6 fg-text-dark\"><div class=\"ffb-id-ic3otq4 table-wrap fg-text-dark\">\n                        <div class=\"table-wrap-header\">\n                            <h3 class=\"table-wrap-header-title\">Table Basic<\/h3>\n                            \n                        <\/div>\n                        <div class=\"table-wrap-body\">\n                            <div class=\"table-responsive\">\n                                \n                                <table class=\"table\">\n                                    <thead>\n                                        <tr>\n                                            <th>Header 1<\/th>\n                                            <th>Header 2<\/th>\n                                            <th>Header 3<\/th>\n                                            <th>Header 4<\/th>\n                                        <\/tr>\n                                    <\/thead>\n                                    <tbody>\n                                        <tr>\n                                            <td>Item #1<\/td>\n                                            <td>Apple<\/td>\n                                            <td>100GB<\/td>\n                                            <td>$10.0<\/td>\n                                        <\/tr>\n                                        <tr>\n                                            <td>Item #2<\/td>\n                                            <td>Envato<\/td>\n                                            <td>200GB<\/td>\n                                            <td>$20.0<\/td>\n                                        <\/tr>\n                                        <tr>\n                                            <td>Item #3<\/td>\n                                            <td>Microsoft<\/td>\n                                            <td>300GB<\/td>\n                                            <td>$30.0<\/td>\n                                        <\/tr>\n                                        <tr>\n                                            <td>Item #4<\/td>\n                                            <td>Sony<\/td>\n                                            <td>400GB<\/td>\n                                            <td>$40.0<\/td>\n                                        <\/tr>\n                                        <tr>\n                                            <td>Item #5<\/td>\n                                            <td>Lenovo<\/td>\n                                            <td>500GB<\/td>\n                                            <td>$50.0<\/td>\n                                        <\/tr>\n                                    <\/tbody>\n                                <\/table>\n                                \n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <\/div><div class=\"ffb-id-ic3mdvj fg-col col-xs-12 col-md-6 fg-text-dark\"><div class=\"ffb-id-ic41q7b table-wrap fg-text-dark\">\n                        <div class=\"table-wrap-header\">\n                            <h3 class=\"table-wrap-header-title\">Table Hover<\/h3>\n                        <\/div>\n                        <div class=\"table-wrap-body\">\n                            <div class=\"table-responsive\">\n                                \n                                <table class=\"table table-hover\">\n                                    <thead>\n                                        <tr>\n                                            <th>Header 1<\/th>\n                                            <th>Header 2<\/th>\n                                            <th>Header 3<\/th>\n                                            <th>Header 4<\/th>\n                                        <\/tr>\n                                    <\/thead>\n                                    <tbody>\n                                        <tr>\n                                            <td>Item #1<\/td>\n                                            <td>Apple<\/td>\n                                            <td>100GB<\/td>\n                                            <td>$10.0<\/td>\n                                        <\/tr>\n                                        <tr>\n                                            <td>Item #2<\/td>\n                                            <td>Envato<\/td>\n                                            <td>200GB<\/td>\n                                            <td>$20.0<\/td>\n                                        <\/tr>\n                                        <tr>\n                                            <td>Item #3<\/td>\n                                            <td>Microsoft<\/td>\n                                            <td>300GB<\/td>\n                                            <td>$30.0<\/td>\n                                        <\/tr>\n                                        <tr>\n                                            <td>Item #4<\/td>\n                                            <td>Sony<\/td>\n                                            <td>400GB<\/td>\n                                            <td>$40.0<\/td>\n                                        <\/tr>\n                                        <tr>\n                                            <td>Item #5<\/td>\n                                            <td>Lenovo<\/td>\n                                            <td>500GB<\/td>\n                                            <td>$50.0<\/td>\n                                        <\/tr>\n                                    <\/tbody>\n                                <\/table>\n                                \n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <\/div><\/div><\/div><\/section><section class=\"ffb-id-ic4556d fg-section fg-el-has-bg fg-text-dark\"><span class=\"fg-bg\"><span data-fg-bg=\"{&quot;type&quot;:&quot;color&quot;,&quot;opacity&quot;:1,&quot;color&quot;:&quot;#f7f8fa&quot;}\" class=\"fg-bg-layer fg-bg-type-color \" style=\"opacity: 1; background-color: #f7f8fa;\"><\/span><\/span><div class=\"fg-container container fg-container-large fg-container-lvl--1 \"><div class=\"fg-row row    \" ><div class=\"ffb-id-ic4556e fg-col col-xs-12 col-md-6 fg-text-dark\"><div class=\"ffb-id-ic4556f table-wrap fg-text-dark\">\n                        <div class=\"table-wrap-header\">\n                            <h3 class=\"table-wrap-header-title\">Table Striped<\/h3>\n                        <\/div>\n                        <div class=\"table-wrap-body\">\n                            <div class=\"table-responsive\">\n                                \n                                <table class=\"table table-striped\">\n                                    <thead>\n                                        <tr>\n                                            <th>Header 1<\/th>\n                                            <th>Header 2<\/th>\n                                            <th>Header 3<\/th>\n                                            <th>Header 4<\/th>\n                                        <\/tr>\n                                    <\/thead>\n                                    <tbody>\n                                        <tr>\n                                            <td>Item #1<\/td>\n                                            <td>Apple<\/td>\n                                            <td>100GB<\/td>\n                                            <td>$10.0<\/td>\n                                        <\/tr>\n                                        <tr>\n                                            <td>Item #2<\/td>\n                                            <td>Envato<\/td>\n                                            <td>200GB<\/td>\n                                            <td>$20.0<\/td>\n                                        <\/tr>\n                                        <tr>\n                                            <td>Item #3<\/td>\n                                            <td>Microsoft<\/td>\n                                            <td>300GB<\/td>\n                                            <td>$30.0<\/td>\n                                        <\/tr>\n                                        <tr>\n                                            <td>Item #4<\/td>\n                                            <td>Sony<\/td>\n                                            <td>400GB<\/td>\n                                            <td>$40.0<\/td>\n                                        <\/tr>\n                                        <tr>\n                                            <td>Item #5<\/td>\n                                            <td>Lenovo<\/td>\n                                            <td>500GB<\/td>\n                                            <td>$50.0<\/td>\n                                        <\/tr>\n                                    <\/tbody>\n                                <\/table>\n                                \n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <\/div><div class=\"ffb-id-ic4556g fg-col col-xs-12 col-md-6 fg-text-dark\"><div class=\"ffb-id-ic4556h table-wrap fg-text-dark\">\n                        <div class=\"table-wrap-header\">\n                            <h3 class=\"table-wrap-header-title\">Table Contextual<\/h3>\n                        <\/div>\n                        <div class=\"table-wrap-body\">\n                            <div class=\"table-responsive\">\n                                \n                                <table class=\"table\">\n                                    <thead>\n                                        <tr>\n                                            <th>Header 1<\/th>\n                                            <th>Header 2<\/th>\n                                            <th>Header 3<\/th>\n                                            <th>Header 4<\/th>\n                                        <\/tr>\n                                    <\/thead>\n                                    <tbody>\n                                        <tr class=\"active\">\n                                            <td>Item #1<\/td>\n                                            <td>Apple<\/td>\n                                            <td>100Gb<\/td>\n                                            <td>$10.0<\/td>\n                                        <\/tr>\n                                        <tr class=\"success\">\n                                            <td>Item #3<\/td>\n                                            <td>Envato<\/td>\n                                            <td>200Gb<\/td>\n                                            <td>$20.0<\/td>\n                                        <\/tr>\n                                        <tr class=\"info\">\n                                            <td>Item #4<\/td>\n                                            <td>Microsoft<\/td>\n                                            <td>300Gb<\/td>\n                                            <td>$30.0<\/td>\n                                        <\/tr>\n                                        <tr class=\"warning\">\n                                            <td>Item #5<\/td>\n                                            <td>Sony<\/td>\n                                            <td>400Gb<\/td>\n                                            <td>$40.0<\/td>\n                                        <\/tr>\n                                        <tr class=\"danger\">\n                                            <td>Item #6<\/td>\n                                            <td>Lenovo<\/td>\n                                            <td>500Gb<\/td>\n                                            <td>$50.0<\/td>\n                                        <\/tr>\n                                    <\/tbody>\n                                <\/table>\n                                \n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <\/div><\/div><\/div><\/section><section class=\"ffb-id-ic4ajht fg-section fg-el-has-bg fg-text-dark\"><span class=\"fg-bg\"><span data-fg-bg=\"{&quot;type&quot;:&quot;color&quot;,&quot;opacity&quot;:1,&quot;color&quot;:&quot;#f7f8fa&quot;}\" class=\"fg-bg-layer fg-bg-type-color \" style=\"opacity: 1; background-color: #f7f8fa;\"><\/span><\/span><div class=\"fg-container container fg-container-large fg-container-lvl--1 \"><div class=\"fg-row row    \" ><div class=\"ffb-id-ic4ajhu fg-col col-xs-12 col-md-6 fg-text-dark\"><div class=\"ffb-id-ic4ajhv table-wrap fg-text-dark\">\n    <div class=\"table-wrap-header\">\n        <h3 class=\"table-wrap-header-title\">Table Advanced<\/h3>\n    <\/div>\n    <div class=\"table-wrap-body\">\n        <div class=\"table-responsive\">\n            \n            <table class=\"table table-striped table-advance\">\n                <thead>\n                    <tr>\n                        <th>Member<\/th>\n                        <th>Working at<\/th>\n                        <th>Outcomes<\/th>\n                        <th>Contacts<\/th>\n                    <\/tr>\n                <\/thead>\n                <tbody>\n                    <tr>\n                        <td>\n                            <div class=\"table-advance-body\">\n\n                                <span class=\"table-advance-body-user-name\">Robert<\/span>\n                            <\/div>\n                        <\/td>\n                        <td>Apple<\/td>\n                        <td>$10.0<\/td>\n                        <td>robert@gmail.com<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>\n                            <div class=\"table-advance-body\">\n\n                                <span class=\"table-advance-body-user-name\">Sara<\/span>\n                            <\/div>\n                        <\/td>\n                        <td>Envato<\/td>\n                        <td>$20.0<\/td>\n                        <td>sara@gmail.com<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>\n                            <div class=\"table-advance-body\">\n\n                                <span class=\"table-advance-body-user-name\">John<\/span>\n                            <\/div>\n                        <\/td>\n                        <td>Microsoft<\/td>\n                        <td>$30.0<\/td>\n                        <td>john@gmail.com<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>\n                            <div class=\"table-advance-body\">\n\n                                <span class=\"table-advance-body-user-name\">Maria<\/span>\n                            <\/div>\n                        <\/td>\n                        <td>Sony<\/td>\n                        <td>$40.0<\/td>\n                        <td>maria@gmail.com<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>\n                            <div class=\"table-advance-body\">\n\n                                <span class=\"table-advance-body-user-name\">Alex<\/span>\n                            <\/div>\n                        <\/td>\n                        <td>Lenovo<\/td>\n                        <td>$50.0<\/td>\n                        <td>alex@gmail.com<\/td>\n                    <\/tr>\n                <\/tbody>\n            <\/table>\n            \n        <\/div>\n    <\/div>\n<\/div><\/div><div class=\"ffb-id-ic4aji0 fg-col col-xs-12 col-md-6 fg-text-dark\"><div class=\"ffb-id-ic4aji1 table-wrap fg-text-dark\">\n    <div class=\"table-wrap-header\">\n        <h3 class=\"table-wrap-header-title\">Table Graphic<\/h3>\n    <\/div>\n    <div class=\"table-wrap-body\">\n        <div class=\"table-responsive\">\n            \n            <table class=\"table table-striped table-bordered table-advance\">\n                <thead>\n                    <tr>\n                        <th>Company<\/th>\n                        <th>Growth<\/th>\n                        <th>Profit<\/th>\n                        <th>Progress<\/th>\n                    <\/tr>\n                <\/thead>\n                <tbody>\n                    <tr>\n                        <td>Apple<\/td>\n                        <td>\n                            2.3%\n                        <\/td>\n                        <td>$10.0<\/td>\n                        <td>12%<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>Envato<\/td>\n                        <td>\n                            77.7%\n                        <\/td>\n                        <td>$20.0<\/td>\n                        <td>83%<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>Microsoft<\/td>\n                        <td>\n                            4.9%\n                        <\/td>\n                        <td>$30.0<\/td>\n                        <td>97%<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>Sony<\/td>\n                        <td>\n                            43.6%\n                        <\/td>\n                        <td>$40.0<\/td>\n                        <td>100%<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>Lenovo<\/td>\n                        <td>\n                            0.5%\n                        <\/td>\n                        <td>$50.0<\/td>\n                        <td>15%<\/td>\n                    <\/tr>\n                <\/tbody>\n            <\/table>\n            \n        <\/div>\n    <\/div>\n<\/div><\/div><\/div><\/div><\/section><style>.ffb-id-h7lqa1q{ \npadding-top: 170px;\npadding-bottom: 100px;\n\n}\n.ffb-id-h7lqsit  .breadcrumbs-v5-title{ \ncolor:#ffffff;\n}\n.ffb-id-h7lqsit  a{ \ncolor:#ffffff;\n}\n.ffb-id-h7lqsit  a:hover{ \ncolor:#00bcd4;\n}\n.ffb-id-h7lqsit  .breadcrumbs-v5-subtitle{ \ncolor:#ffffff;\n}\n.ffb-id-h7lqsit  .breadcrumbs-v5-subtitle .active{ \ncolor:#ffffff;\n}\n.ffb-id-ic4aji0{ margin-bottom: 30px;}.ffb-id-ic4ajhu{ margin-bottom: 30px;}.ffb-id-ic4556g{ margin-bottom: 30px;}.ffb-id-ic4556e{ margin-bottom: 30px;}.ffb-id-ic3m028{ padding-top: 80px;padding-bottom: 50px;}.ffb-id-ic3mdvj{ margin-bottom: 30px;}.ffb-id-ic3mabg{ margin-bottom: 30px;}<\/style><script type=\"text\/javascript\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":5376,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/main.arktheme.com\/wp-json\/wp\/v2\/pages\/3909"}],"collection":[{"href":"https:\/\/main.arktheme.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/main.arktheme.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/main.arktheme.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/main.arktheme.com\/wp-json\/wp\/v2\/comments?post=3909"}],"version-history":[{"count":1,"href":"https:\/\/main.arktheme.com\/wp-json\/wp\/v2\/pages\/3909\/revisions"}],"predecessor-version":[{"id":12142,"href":"https:\/\/main.arktheme.com\/wp-json\/wp\/v2\/pages\/3909\/revisions\/12142"}],"up":[{"embeddable":true,"href":"https:\/\/main.arktheme.com\/wp-json\/wp\/v2\/pages\/5376"}],"wp:attachment":[{"href":"https:\/\/main.arktheme.com\/wp-json\/wp\/v2\/media?parent=3909"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}