{"id":390,"date":"2020-05-22T15:30:23","date_gmt":"2020-05-22T15:30:23","guid":{"rendered":"https:\/\/university-communications.ncsu.edu\/documentation\/general-wordpress\/tabular-data\/"},"modified":"2026-08-01T16:27:12","modified_gmt":"2026-08-01T20:27:12","slug":"tabular-data","status":"publish","type":"reference-article","link":"https:\/\/university-communications.ncsu.edu\/documentation\/reference-article\/tabular-data\/","title":{"rendered":"Tables and Tabular Data"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Table Block<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To present data in a relatively simple format \u2014 such as a set of columns with named headings \u2014 the Table block is easy to use, update and understand. By default, the Table block will fit to the width of the page content, but it can be extended wider by choosing the &#8220;Align Wide&#8221; option. This is especially recommended for tables with more columns.<\/p>\n\n\n<div class=\"wp-block-ncst-button\">\n      <a\n        class=\"ncst-block__button-link btn\"\n        href=\"https:\/\/university-communications.ncsu.edu\/documentation\/table-block\/\"\n        data-ncst-lightbox=\"false\"\n                      >\n                  <span class=\"text\">Learn about the Table block<\/span><span class=\"arrow-indicator\"><svg class=\"wolficon wolficon-arrow-right-bold\" role=\"img\"  aria-hidden=\"true\">\n\t\t\t\n\t\t\t<use xlink:href=\"#wolficon-arrow-right-bold\">\n\t\t<\/svg><\/span>\n              <\/a>\n    <\/div>\n  \n\n\n<h2 class=\"wp-block-heading\" id=\"ninja-tables\">Ninja Tables<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ninja Tables is a WordPress plugin designed to help users create responsive, customizable data tables. It provides a visual interface for building tables from scratch or importing data from sources like CSV files and Google Sheets. Users can sort, filter and search table content, making this plugin useful for presenting structured information such as directories, pricing charts, comparison tables or event listings.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The plugin also includes styling controls and options for integrating with other WordPress tools, allowing tables to match site branding while remaining mobile-friendly. For content managers who need to publish structured data frequently, Ninja Tables offers a more flexible and scalable alternative to manually building tables in the default WordPress editor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To increase the width of your table within the NC State Theme, add one of the following CSS classes to the table by navigating to &#8220;Table Design&#8221; > &#8220;Other&#8221; to access &#8220;Extra CSS Class for the table&#8221; in the right-hand sidebar.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can enter &#8220;alignwide&#8221; to make the table slightly wider than the theme&#8217;s standard paragraph width. Entering &#8220;alignfull&#8221; will size the table to the full width of the page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/ninjatable-css-class-1.png\" data-fullsize=\"2414x670\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"284\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/ninjatable-css-class-1-1024x284.png\" alt=\"Screenshot showing where to add CSS to increase table width.\" class=\"wp-image-39414\" srcset=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/ninjatable-css-class-1-1024x284.png 1024w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/ninjatable-css-class-1-300x83.png 300w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/ninjatable-css-class-1-768x213.png 768w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/ninjatable-css-class-1-1536x426.png 1536w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/ninjatable-css-class-1-2048x568.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">When editing a table in Ninja Tables, go to &#8220;Table Design&#8221; and then &#8220;Other&#8221; to access the field to apply a CSS class.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/ninjatable-css-class-2.png\" data-fullsize=\"730x1130\" data-zoom=\"true\"><img loading=\"lazy\" decoding=\"async\" width=\"662\" height=\"1024\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/ninjatable-css-class-2-662x1024.png\" alt=\"Screenshot showing where to add CSS to increase table width.\" class=\"wp-image-39415\" srcset=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/ninjatable-css-class-2-662x1024.png 662w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/ninjatable-css-class-2-194x300.png 194w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/ninjatable-css-class-2.png 730w\" sizes=\"auto, (max-width: 662px) 100vw, 662px\" \/><\/a><figcaption class=\"wp-element-caption\">Entering &#8220;alignfull&#8221; or &#8220;alignwide&#8221; will increase the width of your Ninja Table table.<\/figcaption><\/figure>\n\n\n<div class=\"is-text wp-block-ncst-buttons\">\n    \n<div class=\"wp-block-ncst-button\">\n      <a\n        class=\"ncst-block__button-link btn\"\n        href=\"https:\/\/ninjatables.com\/docs\/\"\n        data-ncst-lightbox=\"false\"\n                      >\n                  <span class=\"text\">Read Ninja Tables help documentation<\/span><span class=\"arrow-indicator\"><svg class=\"wolficon wolficon-arrow-right-bold\" role=\"img\"  aria-hidden=\"true\">\n\t\t\t\n\t\t\t<use xlink:href=\"#wolficon-arrow-right-bold\">\n\t\t<\/svg><\/span>\n              <\/a>\n    <\/div>\n  \n\n  <\/div>\n\n\n\n<h2 class=\"wp-block-heading\">TablePress<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">For more complex data that may need advanced features such as filtering, sorting or pagination, using TablePress is recommended. TablePress is a third-party plugin with basic NC State Theme styling support, allowing for more in-depth customization of table functionality.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To view an example of TablePress in action, see the <a href=\"https:\/\/tablepress.org\/demo\/\">official TablePress demo page<\/a>. For full documentation on how to configure and use TablePress, the <a href=\"https:\/\/tablepress.org\/documentation\/\">TablePress Documentation site<\/a> has full details on how to fully use all the features available. As tables become increasingly complex, be sure to keep in mind <a href=\"#table-accessibility\">table accessibility<\/a> requirements and best practices.<\/p>\n\n\n<div class=\"wp-block-ncst-button\">\n      <a\n        class=\"ncst-block__button-link btn\"\n        href=\"https:\/\/university-communications.ncsu.edu\/documentation\/tablepress\/\"\n        data-ncst-lightbox=\"false\"\n                      >\n                  <span class=\"text\">Learn about TablePress<\/span><span class=\"arrow-indicator\"><svg class=\"wolficon wolficon-arrow-right-bold\" role=\"img\"  aria-hidden=\"true\">\n\t\t\t\n\t\t\t<use xlink:href=\"#wolficon-arrow-right-bold\">\n\t\t<\/svg><\/span>\n              <\/a>\n    <\/div>\n  \n\n\n<h2 class=\"wp-block-heading\">Which Do I Use?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">When considering which tool to use, the decision is ultimately determined by the content to be displayed. Because of the Table block&#8217;s ease of use and relatively low need for configuration, this block is a good place to start.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Alternatively, TablePress may be the appropriate solution if your table data meets any of the following criteria:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Contains a complex structure of headings, columns or subgroupings of either<\/li>\n\n\n\n<li>Is long enough to require pagination<\/li>\n\n\n\n<li>Needs to be searchable<\/li>\n\n\n\n<li>Needs to be sortable<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">UComm is <a href=\"http:\/\/go.ncsu.edu\/ucomm-dev-request\" target=\"_blank\" rel=\"noreferrer noopener\">available to assist<\/a>, especially to ensure that the end result is as accessible as possible.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"table-accessibility\">Accessibility<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The <a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/tables\/\">W3.org WAI Table Concepts article<\/a> provides a good overview of the necessary considerations for creating an accessible table. In most cases, the more complex the structure of the table is, the more necessary it is to have mindfully placed scope attributes placed directly within the table&#8217;s markup (that is, directly in the code), with placement and values dependent on the data itself.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Neither the Table Block nor TablePress automatically supports this scope attribute by default. For tables requiring this attribute, please send a <a href=\"http:\/\/go.ncsu.edu\/ucomm-dev-request\">request for assistance<\/a>.<\/p>\n\n\n","protected":false},"featured_media":0,"template":"","meta":{"_acf_changed":false,"ncst_custom_author":"","ncst_show_custom_author":false,"ncst_dynamicHeaderBlockName":"ncst\/default-header","ncst_dynamicHeaderData":"{\"pageIntro\":\"Tabular data is any bulk of data best displayed in some configuration of row\/column format. Knowing your options can help display this data in a way that is most useful and accessible for readers to understand.\"}","ncst_content_audit_freq":"","ncst_content_audit_date":"","ncst_content_audit_display":false,"ncst_backToTopFlag":"","_links_to":"","_links_to_target":""},"availability":[49],"content-type":[52],"class_list":["post-390","reference-article","type-reference-article","status-publish","hentry","availability-nc-state-theme","content-type-third-party-plugin"],"acf":[],"_links":{"self":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/390","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article"}],"about":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/types\/reference-article"}],"version-history":[{"count":13,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/390\/revisions"}],"predecessor-version":[{"id":40077,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/390\/revisions\/40077"}],"wp:attachment":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/media?parent=390"}],"wp:term":[{"taxonomy":"availability","embeddable":true,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/availability?post=390"},{"taxonomy":"content-type","embeddable":true,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/content-type?post=390"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}