  {"id":1107,"date":"2023-11-06T14:23:27","date_gmt":"2023-11-06T19:23:27","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=1107"},"modified":"2026-08-10T20:59:53","modified_gmt":"2026-08-11T00:59:53","slug":"tables","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/intermediate-training\/intermediate-training-module-2-common-content-blocks\/tables\/","title":{"rendered":"Table"},"content":{"rendered":"\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n            <div class=\"cu-textmedia flex flex-col lg:flex-row mx-auto gap-6 md:gap-10 my-6 md:my-12 first:mt-0 max-w-5xl\">\n        <div class=\"justify-start cu-textmedia-content cu-prose-first-last\" style=\"flex: 0 0 100%;\">\n            <header class=\"font-light prose-xl cu-pageheader md:prose-2xl cu-component-updated cu-prose-first-last\">\n                                    <h1 class=\"cu-prose-first-last font-semibold !mt-2 mb-4 md:mb-6 relative after:absolute after:h-px after:bottom-0 after:bg-cu-red after:left-px text-3xl md:text-4xl lg:text-5xl lg:leading-[3.5rem] pb-5 after:w-10 text-cu-black-700 not-prose\">\n                        Table\n                    <\/h1>\n                \n                                \n                                    \n\n<p class=\"wp-block-paragraph\">Intermediate Training Module 2: Common Content Blocks<\/p>\n\n\n                            <\/header>\n\n                    <\/div>\n\n            <\/div>\n\n    <\/div>\n<\/section>\n\n\n\n<p class=\"wp-block-paragraph\">The Table block allows you to organize information into rows and columns, making it easier for visitors to compare data and find information quickly. Tables are particularly useful when presenting structured information that would be difficult to read in a standard paragraph or list.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Common uses include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Program requirements<\/li>\n\n\n\n<li>Fee schedules<\/li>\n\n\n\n<li>Contact information<\/li>\n\n\n\n<li>Deadlines and dates<\/li>\n\n\n\n<li>Comparison charts<\/li>\n\n\n\n<li>Event schedules<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">When used appropriately, tables can make complex information easier to understand and navigate.<\/p>\n\n\n\n<h2 id=\"when-to-use-a-table\" class=\"wp-block-heading\">When to Use a Table<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Use a Table block when information is easiest to understand when displayed in rows and columns.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Examples include:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Program<\/th><th>Duration<\/th><th>Credential<\/th><\/tr><\/thead><tbody><tr><td>Program A<\/td><td>4 Years<\/td><td>Bachelor&#8217;s Degree<\/td><\/tr><tr><td>Program B<\/td><td>2 Years<\/td><td>Diploma<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Or:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Service<\/th><th>Hours<\/th><\/tr><\/thead><tbody><tr><td>Monday-Friday<\/td><td>8:30 AM &#8211; 4:30 PM<\/td><\/tr><tr><td>Saturday<\/td><td>Closed<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Tables work best when displaying structured data rather than large amounts of text.<\/p>\n\n\n\n<h2 id=\"adding-a-table\" class=\"wp-block-heading\">Adding a Table<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To add a Table block:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click the <strong>+<\/strong> button and search for <strong>Table<\/strong>.<\/li>\n\n\n\n<li>Select the Table block.<\/li>\n\n\n\n<li>Choose the number of rows and columns.<\/li>\n\n\n\n<li>Create the table.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Once created, click within each cell to add content.<\/p>\n\n\n\n<h2 id=\"adding-table-headers\" class=\"wp-block-heading\">Adding Table Headers<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Tables should include headers whenever possible.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Headers help visitors understand what information appears in each column.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Example:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Program<\/th><th>Faculty<\/th><th>Degree<\/th><\/tr><\/thead><tbody><tr><td>Biology<\/td><td>Science<\/td><td>B.Sc.<\/td><\/tr><tr><td>History<\/td><td>Arts<\/td><td>B.A.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Without headers, tables can be difficult to understand.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Using headers is also an important accessibility best practice.<\/p>\n\n\n\n<h2 id=\"editing-a-table\" class=\"wp-block-heading\">Editing a Table<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">After creating a table, you can modify its structure using the available editing options.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Common actions include:<\/p>\n\n\n\n<h3 id=\"add-rows\" class=\"wp-block-heading\">Add Rows<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Insert additional rows as needed.<\/p>\n\n\n\n<h3 id=\"remove-rows\" class=\"wp-block-heading\">Remove Rows<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Delete rows that are no longer required.<\/p>\n\n\n\n<h3 id=\"add-columns\" class=\"wp-block-heading\">Add Columns<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Expand the table to include additional information.<\/p>\n\n\n\n<h3 id=\"remove-columns\" class=\"wp-block-heading\">Remove Columns<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Simplify the table by removing unnecessary columns.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">These options allow you to adjust the table without recreating it from scratch.<\/p>\n\n\n\n<h2 id=\"best-practices\" class=\"wp-block-heading\">Best Practices<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Keep Tables Simple<\/strong><br>Use tables only when the information benefits from a structured format. If the content can be presented clearly as a list or paragraph, that is often the better option.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Always Use Headers<\/strong><br>Column headers improve readability and accessibility.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Keep Cell Content Concise<\/strong><br>Long passages of text can make tables difficult to read, especially on mobile devices.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Consider Mobile Users<\/strong><br>Large tables may become difficult to navigate on smaller screens. Before publishing, preview the page and ensure the information remains accessible on mobile devices.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Avoid Using Tables for Layout<\/strong><br>Tables should be used to present data, not to arrange page content visually. For page layouts, use blocks such as Columns instead.<\/p>\n\n\n\n<h2 id=\"common-uses\" class=\"wp-block-heading\">Common Uses<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Table block works well for:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Comparison charts<\/li>\n\n\n\n<li>Contact lists<\/li>\n\n\n\n<li>Event schedules<\/li>\n\n\n\n<li>Deadlines<\/li>\n\n\n\n<li>Program requirements<\/li>\n\n\n\n<li>Service information<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">It is one of the most effective ways to present structured information clearly and consistently.<\/p>\n\n\n\n<figure class=\"wp-block-embed alignwide is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio w-screen ml-offset-center cu-max-w-child-7xl px-4 md:px-6 lg:px-12\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"cutheme Mastery Training - Tables\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/tQ5xnz-VbhU?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n        \n    \n    <dl class=\"cu-description cu-component-updated\">\n        \n    <div class=\"grid pt-4 pb-3 border-b accordion border-cu-black-100 md:pt-6 md:pb-5 first:border-t\">\n        <dt class=\"font-semibold not-prose\">\n            <button class=\"flex items-center justify-between w-full text-left accordion__button\" aria-expanded=\"false\" aria-controls=\"accordion-transcript-tables\">\n                <span class=\"flex-1 ml-auto text-left break-words whitespace-normal cu-icon\">\n                    Transcript \u2013 Tables\n                <\/span>\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewbox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\" class=\"w-5 h-5 ml-auto transition-transform rotate-0 accordion__icon text-cu-black-500\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.25 4.5l7.5 7.5-7.5 7.5\"><\/path>\n                <\/svg>\n            <\/button>\n        <\/dt>\n        <dd class=\"p-0 mt-0 cu-prose cu-prose-first-last accordion__content md:p-0 md:mt-0\" hidden=\"\" id=\"accordion-transcript-tables\">\n            \n\n<p class=\"wp-block-paragraph\">In this video, we are going to look into using tables for your website\u2019s content.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tables allow you to sort data into a more systematic manner. This allows a user to group together and compare a set of data or information together more easily.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As you can currently see in the screen, an example of a table in use is shown.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now that we have explained the purpose of a table and how it can improve your website\u2019s content, we will now show you how to add them to your pages.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">First, you want to go into editing mode of the page you want to add a block into.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Then navigate to the block menu and add the table block to your page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Once its in place, add header information to the table.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">After that, you can now add data below the headers.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you want to add more columns, rows or delete them, you can do so by clicking on the block itself and pressing the edit tool.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">options to modify the table should show up in the dropdown menu that appears.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you want a caption, for example to describe the table and what its contents are about, if the table has footnotes you want to convey, or if the table has a primary source on its data, you can add it on the captions text box below the table.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you want to customize how the table looks, select the block and a menu on the right should appear.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">From there you can:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Fix the width of your table cells,<\/li>\n\n\n\n<li>Disable or enable the header,<\/li>\n\n\n\n<li>Or add a footer.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Once those steps are done, then we have now successfully added a table to a page.<\/p>\n\n\n        <\/dd>\n    <\/div>\n\n\n    <\/dl>\n\n\n    <\/div>\n<\/section>\n\n\n\n<h2 id=\"try-it-out\" class=\"wp-block-heading\">Try it Out<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Practice working with the Table block.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Add a Table block to a page.<\/li>\n\n\n\n<li>Create a table with four columns.<\/li>\n\n\n\n<li>Add column headers.<\/li>\n\n\n\n<li>Enter information into several rows.<\/li>\n\n\n\n<li>Add an additional row.<\/li>\n\n\n\n<li>Remove a row.<\/li>\n\n\n\n<li>Preview the page and review how the table appears on the front end.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Organize structured information using tables with rows, columns, and headers for better readability and comparison.<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":5167,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_cu_dining_location_slug":"","footnotes":"","_links_to":"","_links_to_target":""},"cu_page_type":[61],"class_list":["post-1107","page","type-page","status-publish","hentry","cu_page_type-intermediate-training-module-2"],"acf":{"cu_post_thumbnail":""},"_links":{"self":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/1107","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/comments?post=1107"}],"version-history":[{"count":5,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/1107\/revisions"}],"predecessor-version":[{"id":4501,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/1107\/revisions\/4501"}],"up":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/5167"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/media?parent=1107"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/cu_page_type?post=1107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}