{"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":"2024-12-11T10:26:23","modified_gmt":"2024-12-11T15:26:23","slug":"tables","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/mastery\/module-1-text-block-mastery\/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>Module 1.3 \u2013 Mastery: Text Blocks: Tables<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/carleton.ca\/cutheme-docs\/block-library\/table-block-example\/\">Examples: Table Block<\/a><\/div>\n<\/div>\n\n\n                            <\/header>\n\n                    <\/div>\n\n            <\/div>\n\n    <\/div>\n<\/section>\n\n\n\n\n<div class=\"w-full max-w-xl mx-auto overflow-hidden bg-white rounded-lg shadow-lg cu-stackedlist cu-component not-contained not-prose\">\n    <h2 class=\"px-6 py-4 text-base font-semibold border-b rounded-t-lg md:text-xl bg-gray-50 text-cu-black-800\">\n        Table of Contents\n    <\/h2>\n    <div class=\"grid cu-scrollto cu-stackedlist--toc cu-stackedlist--1 md:grid-cols-1\">\n            <div class=\"space-y-1\">\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        1.\n                    <\/span>\n\n                    <a href=\"#step-by-step\" class=\"font-medium hover:underline\">\n                        Step-by-Step\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        2.\n                    <\/span>\n\n                    <a href=\"#video-tutorial\" class=\"font-medium hover:underline\">\n                        Video Tutorial\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        3.\n                    <\/span>\n\n                    <a href=\"#try-it-out\" class=\"font-medium hover:underline\">\n                        Try it Out\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n            <\/div>\n\n    <\/div>\n<\/div>\n\n\n\n<h2 id=\"step-by-step\" class=\"wp-block-heading\">Step-by-Step<\/h2>\n\n\n\n<p><strong class=\"myprefix-text-bold\">1.<\/strong> <a href=\"https:\/\/carleton.ca\/cutheme-docs\/getting-started\/module-3-essential-text-blocks\/module-3-blocks-overview\/#addblock\">Add the&nbsp;Table&nbsp;block using the block menu.<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"148\" height=\"144\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-07-at-13.41.18@2x.png\" alt=\"Add table block\" class=\"wp-image-1307\" style=\"aspect-ratio:1.0277777777777777;width:90px;height:auto\"\/><\/figure>\n\n\n\n<p><strong class=\"myprefix-text-bold\">2.<\/strong> Add header labels to the table columns<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"131\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-07-at-14.42.24@2x-1024x131.png\" alt=\"Add header labels\" class=\"wp-image-1315\" style=\"aspect-ratio:7.816793893129771;width:853px;height:auto\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-07-at-14.42.24@2x-1024x131.png 1024w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-07-at-14.42.24@2x-320x41.png 320w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-07-at-14.42.24@2x-512x65.png 512w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-07-at-14.42.24@2x-768x98.png 768w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-07-at-14.42.24@2x-1536x196.png 1536w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-07-at-14.42.24@2x.png 1814w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong class=\"myprefix-text-bold\">3.<\/strong> Use the Edit tool to insert and delete rows and columns.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"858\" height=\"582\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-07-at-14.43.10@2x.png\" alt=\"\" class=\"wp-image-1317\" style=\"aspect-ratio:1.4742268041237114;width:405px;height:auto\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-07-at-14.43.10@2x.png 858w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-07-at-14.43.10@2x-320x217.png 320w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-07-at-14.43.10@2x-512x347.png 512w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-07-at-14.43.10@2x-768x521.png 768w\" sizes=\"auto, (max-width: 858px) 100vw, 858px\" \/><\/figure>\n\n\n\n<h2 id=\"video-tutorial\" class=\"wp-block-heading\">Video Tutorial<\/h2>\n\n\n\n<div class=\"cu-section cu-section-5xl not-contained  cu-prose cu-prose-dark\"><figure class=\"cu-embed cu-component not-contained mx-auto max-w-5xl\"><div class=\"relative w-full pb-[56.25%] overflow-hidden border border-cu-black-100\"><iframe title=\"Videos Embed\" src=\"https:\/\/www.youtube.com\/embed\/tQ5xnz-VbhU\" class=\"cu-embed-iframe\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/div><\/figure><\/div>\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>In this video, we are going to look into using tables for your website\u2019s content.<\/p>\n\n\n\n<p>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>As you can currently see in the screen, an example of a table in use is shown.<\/p>\n\n\n\n<p>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>First, you want to go into editing mode of the page you want to add a block into.<\/p>\n\n\n\n<p>Then navigate to the block menu and add the table block to your page.<\/p>\n\n\n\n<p>Once its in place, add header information to the table.<\/p>\n\n\n\n<p>After that, you can now add data below the headers.<\/p>\n\n\n\n<p>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>options to modify the table should show up in the dropdown menu that appears.<\/p>\n\n\n\n<p>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>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>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>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>Now that you have learned how to work with the table block, it&#8217;s time to try it out!<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Add a table to your page<\/li>\n\n\n\n<li>Add table headers<\/li>\n\n\n\n<li>Make it a 4 column table<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/carleton.ca\/cutheme-docs\/mastery\/module-1-text-block-mastery\/testimonials\/\">Next Up: Testimonial Block<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Step-by-Step 1. Add the&nbsp;Table&nbsp;block using the block menu. 2. Add header labels to the table columns 3. Use the Edit tool to insert and delete rows and columns. Video Tutorial Try it Out Now that you have learned how to work with the table block, it&#8217;s time to try it out!<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":1095,"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":[11],"class_list":["post-1107","page","type-page","status-publish","hentry","cu_page_type-general"],"acf":{"cu_post_thumbnail":false},"_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\/4"}],"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\/1095"}],"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}]}}