{"id":2775,"date":"2025-03-31T21:32:13","date_gmt":"2025-03-31T21:32:13","guid":{"rendered":"https:\/\/dornsife.usc.edu\/components\/?page_id=2775"},"modified":"2025-03-31T23:06:17","modified_gmt":"2025-03-31T23:06:17","slug":"table-component","status":"publish","type":"page","link":"https:\/\/dornsife.usc.edu\/components\/table-component\/","title":{"rendered":"Table Component"},"content":{"rendered":"\n\n  \n    \n\n\n\n\n\n\n<div\n  class=\"cc--component-container cc--rich-text \"\n\n  \n  \n  \n  \n  \n  \n  >\n  <div class=\"c--component c--rich-text\"\n    \n      >\n\n    \n      \n<div class=\"f--field f--wysiwyg\">\n\n    \n  <h2><strong>Specifications<\/strong><\/h2>\n<ul>\n<li>Column width\u2013 spans across the content area of the page<\/li>\n<li>Two responsive layouts<\/li>\n<li>Stacked \u2013 to display simple data<\/li>\n<li>Horizontal scroll \u2013 to display more complex data that requires more than 2 columns<\/li>\n<li>Styling with HTML (optional): add html tags like bold, center etc&#8230;<\/li>\n<\/ul>\n<h2><strong>Best practices<\/strong><\/h2>\n<p>Although there are many cases where you can use tables, try to use the following guidelines<\/p>\n<ul>\n<li>Provide table captions if possible<\/li>\n<li>Use horizontal layout if you have tables where you need to showcase complex data<\/li>\n<li>Stacked layout for tables where data is not complex.<\/li>\n<\/ul>\n<h2><strong>Video tutorial<\/strong><\/h2>\n<div class=\"video-embed\"><iframe loading=\"lazy\" title=\"Table Component\" src=\"https:\/\/player.vimeo.com\/video\/1071225335?dnt=1&amp;app_id=122963\" width=\"500\" height=\"281\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media\"><\/iframe><\/div>\n<p>&nbsp;<\/p>\n<p><strong>Example below, in order to see the different layouts, adjust the size of your browser.<\/strong><\/p>\n\n\n\n<\/div>\n\n\n  <\/div><\/div>\n\n\n\n  \n    \n\n\n\n\n\n\n<div\n  class=\"cc--component-container cc--table-comp full-width\"\n\n  \n  \n  \n  \n  \n  \n  >\n  <div class=\"c--component c--table-comp\"\n    \n      >\n\n        <div class=\"tbl-comp\">\n            \n<div class=\"f--field f--section-title\">\n\n    \n  <h2>\n          USC Dornsife Phone Directory (html optional)\n      <\/h2>\n\n\n<\/div>\n\n        <table id=\"tbl-content-18\" data-layout=\"Stacked\" data-id=\"18\">\n         \n                            <thead>\n                    <tr>\n                                                    <th>\n                                Member\n                            <\/th>\n                                                    <th>\n                                Phone\n                            <\/th>\n                                                    <th>\n                                E-mail\n                            <\/th>\n                                            <\/tr>\n                        \n                    \n                <\/thead>\n                                        <tbody>\n                                         <tr>\n                                                     \n                               \n                                <td >\n                                    <span style=\"color:#990000;\">Tommy Trojan<\/span>\n                                <\/td>\n                                                     \n                                                     \n                               \n                                <td >\n                                    233-693-9999\n                                <\/td>\n                                                     \n                                                     \n                               \n                                <td >\n                                    tommy@usc.edu\n                                <\/td>\n                                                     \n                                            <\/tr>\n                                         <tr>\n                                                     \n                               \n                                <td >\n                                    Lisa Simpson\n                                <\/td>\n                                                     \n                                                     \n                               \n                                <td >\n                                    <center>563-986-3333<\/center>\n                                <\/td>\n                                                     \n                                                     \n                               \n                                <td >\n                                    lisas@usc.edu\n                                <\/td>\n                                                     \n                                            <\/tr>\n                                         <tr>\n                                                     \n                               \n                                <td >\n                                    Bart Simpson\n                                <\/td>\n                                                     \n                                                     \n                               \n                                <td >\n                                    555-555-5555\n                                <\/td>\n                                                     \n                                                     \n                               \n                                <td >\n                                    <b>sbart@usc.edu<\/b>\n                                <\/td>\n                                                     \n                                            <\/tr>\n                                         <tr>\n                                                     \n                               \n                                <td >\n                                    Homer Simpson\n                                <\/td>\n                                                     \n                                                     \n                               \n                                <td >\n                                    <b>666-666-6666<\/b>\n                                <\/td>\n                                                     \n                                                     \n                               \n                                <td >\n                                    <p style=\"text-align:right;\">hsimpson@usc.edu<\/p>\n                                <\/td>\n                                                     \n                                            <\/tr>\n                                    <\/tbody>\n                                           <caption>Phone Directory<\/caption>\n                    <\/table>\n    <\/div>\n\n  <\/div><\/div>\n\n\n\n  \n    \n\n\n\n\n\n\n<div\n  class=\"cc--component-container cc--table-comp full-width\"\n\n  \n  \n  \n  \n  \n  \n  >\n  <div class=\"c--component c--table-comp\"\n    \n      >\n\n        <div class=\"tbl-comp\">\n            \n<div class=\"f--field f--section-title\">\n\n    \n  <h2>\n          Quarterly Fruit Crops (Horizontal Layout)\n      <\/h2>\n\n\n<\/div>\n\n        <table id=\"tbl-content-79\" data-layout=\"Horizontal\" data-id=\"79\">\n         \n                            <thead>\n                    <tr>\n                                                    <th>\n                                Location\n                            <\/th>\n                                                    <th>\n                                Mango\n                            <\/th>\n                                                    <th>\n                                Apple\n                            <\/th>\n                                                    <th>\n                                Oranges\n                            <\/th>\n                                            <\/tr>\n                        \n                    \n                <\/thead>\n                                        <tbody>\n                                         <tr>\n                                                     \n                                                            <td>\n                                    Los Angeles\n                                <\/td>\n                                                     \n                                                     \n                                                            <td>\n                                    100\n                                <\/td>\n                                                     \n                                                     \n                                                            <td>\n                                    200\n                                <\/td>\n                                                     \n                                                     \n                                                            <td>\n                                    300\n                                <\/td>\n                                                     \n                                            <\/tr>\n                                         <tr>\n                                                     \n                                                            <td>\n                                    Las Vegas\n                                <\/td>\n                                                     \n                                                     \n                                                            <td>\n                                    200\n                                <\/td>\n                                                     \n                                                     \n                                                            <td>\n                                    300\n                                <\/td>\n                                                     \n                                                     \n                                                            <td>\n                                    660\n                                <\/td>\n                                                     \n                                            <\/tr>\n                                         <tr>\n                                                     \n                                                            <td>\n                                    New York\n                                <\/td>\n                                                     \n                                                     \n                                                            <td>\n                                    50\n                                <\/td>\n                                                     \n                                                     \n                                                            <td>\n                                    60\n                                <\/td>\n                                                     \n                                                     \n                                                            <td>\n                                    300\n                                <\/td>\n                                                     \n                                            <\/tr>\n                                         <tr>\n                                                     \n                                                            <td>\n                                    Miami\n                                <\/td>\n                                                     \n                                                     \n                                                            <td>\n                                    50\n                                <\/td>\n                                                     \n                                                     \n                                                            <td>\n                                    66\n                                <\/td>\n                                                     \n                                                     \n                                                            <td>\n                                    75\n                                <\/td>\n                                                     \n                                            <\/tr>\n                                         <tr>\n                                                     \n                                                            <td>\n                                    Seattle\n                                <\/td>\n                                                     \n                                                     \n                                                            <td>\n                                    25\n                                <\/td>\n                                                     \n                                                     \n                                                            <td>\n                                    90\n                                <\/td>\n                                                     \n                                                     \n                                                            <td>\n                                    96\n                                <\/td>\n                                                     \n                                            <\/tr>\n                                    <\/tbody>\n                                           <caption>Q1 fruit crops<\/caption>\n                    <\/table>\n    <\/div>\n\n  <\/div><\/div>\n\n\n\n  \n    \n\n\n\n\n\n\n<div\n  class=\"cc--component-container cc--table-comp full-width\"\n\n  \n  \n  \n  \n  \n  \n  >\n  <div class=\"c--component c--table-comp\"\n    \n      >\n\n        <div class=\"tbl-comp\">\n            \n<div class=\"f--field f--section-title\">\n\n    \n  <h2>\n          USC Dornsife Phone Directory (Stacked Layout)\n      <\/h2>\n\n\n<\/div>\n\n        <table id=\"tbl-content-62\" data-layout=\"Stacked\" data-id=\"62\">\n         \n                            <thead>\n                    <tr>\n                                                    <th>\n                                Member\n                            <\/th>\n                                                    <th>\n                                Phone\n                            <\/th>\n                                                    <th>\n                                E-mail\n                            <\/th>\n                                            <\/tr>\n                        \n                    \n                <\/thead>\n                                        <tbody>\n                                         <tr>\n                                                     \n                               \n                                <td >\n                                    Tommy Trojan\n                                <\/td>\n                                                     \n                                                     \n                               \n                                <td >\n                                    233-693-9999\n                                <\/td>\n                                                     \n                                                     \n                               \n                                <td >\n                                    tommy@usc.edu\n                                <\/td>\n                                                     \n                                            <\/tr>\n                                         <tr>\n                                                     \n                               \n                                <td >\n                                    Lisa Simpson\n                                <\/td>\n                                                     \n                                                     \n                               \n                                <td >\n                                    563-986-3333\n                                <\/td>\n                                                     \n                                                     \n                               \n                                <td >\n                                    lisas@usc.edu\n                                <\/td>\n                                                     \n                                            <\/tr>\n                                         <tr>\n                                                     \n                               \n                                <td >\n                                    Bart Simpson\n                                <\/td>\n                                                     \n                                                     \n                               \n                                <td >\n                                    555-555-5555\n                                <\/td>\n                                                     \n                                                     \n                               \n                                <td >\n                                    sbart@usc.edu\n                                <\/td>\n                                                     \n                                            <\/tr>\n                                         <tr>\n                                                     \n                               \n                                <td >\n                                    Homer Simpson\n                                <\/td>\n                                                     \n                                                     \n                               \n                                <td >\n                                    666-666-6666\n                                <\/td>\n                                                     \n                                                     \n                               \n                                <td >\n                                    hsimpson@usc.edu\n                                <\/td>\n                                                     \n                                            <\/tr>\n                                    <\/tbody>\n                                           <caption>Phone Directory<\/caption>\n                    <\/table>\n    <\/div>\n\n  <\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-2775","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Table Component - Wordpress CMS Components<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Table Component - Wordpress CMS Components\" \/>\n<meta property=\"og:url\" content=\"https:\/\/dornsife.usc.edu\/components\/table-component\/\" \/>\n<meta property=\"og:site_name\" content=\"Wordpress CMS Components\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-31T23:06:17+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/dornsife.usc.edu\/components\/table-component\/\",\"url\":\"https:\/\/dornsife.usc.edu\/components\/table-component\/\",\"name\":\"Table Component - Wordpress CMS Components\",\"isPartOf\":{\"@id\":\"https:\/\/dornsife.usc.edu\/components\/#website\"},\"datePublished\":\"2025-03-31T21:32:13+00:00\",\"dateModified\":\"2025-03-31T23:06:17+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/dornsife.usc.edu\/components\/table-component\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/dornsife.usc.edu\/components\/table-component\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/dornsife.usc.edu\/components\/table-component\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/dornsife.usc.edu\/components\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Table Component\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/dornsife.usc.edu\/components\/#website\",\"url\":\"https:\/\/dornsife.usc.edu\/components\/\",\"name\":\"Wordpress CMS Components\",\"description\":\"CMS components\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/dornsife.usc.edu\/components\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Table Component - Wordpress CMS Components","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Table Component - Wordpress CMS Components","og_url":"https:\/\/dornsife.usc.edu\/components\/table-component\/","og_site_name":"Wordpress CMS Components","article_modified_time":"2025-03-31T23:06:17+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/dornsife.usc.edu\/components\/table-component\/","url":"https:\/\/dornsife.usc.edu\/components\/table-component\/","name":"Table Component - Wordpress CMS Components","isPartOf":{"@id":"https:\/\/dornsife.usc.edu\/components\/#website"},"datePublished":"2025-03-31T21:32:13+00:00","dateModified":"2025-03-31T23:06:17+00:00","breadcrumb":{"@id":"https:\/\/dornsife.usc.edu\/components\/table-component\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/dornsife.usc.edu\/components\/table-component\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/dornsife.usc.edu\/components\/table-component\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dornsife.usc.edu\/components\/"},{"@type":"ListItem","position":2,"name":"Table Component"}]},{"@type":"WebSite","@id":"https:\/\/dornsife.usc.edu\/components\/#website","url":"https:\/\/dornsife.usc.edu\/components\/","name":"Wordpress CMS Components","description":"CMS components","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/dornsife.usc.edu\/components\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/dornsife.usc.edu\/components\/wp-json\/wp\/v2\/pages\/2775","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dornsife.usc.edu\/components\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dornsife.usc.edu\/components\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dornsife.usc.edu\/components\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/dornsife.usc.edu\/components\/wp-json\/wp\/v2\/comments?post=2775"}],"version-history":[{"count":5,"href":"https:\/\/dornsife.usc.edu\/components\/wp-json\/wp\/v2\/pages\/2775\/revisions"}],"predecessor-version":[{"id":2782,"href":"https:\/\/dornsife.usc.edu\/components\/wp-json\/wp\/v2\/pages\/2775\/revisions\/2782"}],"wp:attachment":[{"href":"https:\/\/dornsife.usc.edu\/components\/wp-json\/wp\/v2\/media?parent=2775"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}