{"id":1361,"date":"2024-05-12T08:44:51","date_gmt":"2024-05-12T08:44:51","guid":{"rendered":"https:\/\/tableberg.com\/?post_type=docs&#038;p=1361"},"modified":"2025-07-01T08:51:37","modified_gmt":"2025-07-01T08:51:37","password":"","slug":"how-to-add-custom-html-to-wordpress-tables","status":"publish","type":"docs","link":"https:\/\/tableberg.com\/ja\/docs\/how-to-add-custom-html-to-wordpress-tables\/","title":{"rendered":"\u30ab\u30b9\u30bf\u30e0HTML\u30d6\u30ed\u30c3\u30af"},"content":{"rendered":"<p>The Custom HTML block allows you to add a personalized code snippet directly to your site to display interactive elements, embedded media, etc. With the <a href=\"https:\/\/wordpress.org\/plugins\/tableberg\/\" target=\"_blank\" rel=\"noopener nofollow\" title=\"\u30c6\u30fc\u30d6\u30eb\u30d0\u30fc\u30b0\">\u30c6\u30fc\u30d6\u30eb\u30d0\u30fc\u30b0<\/a> plugin, you can now add the Custom HTML block to your WordPress tables as well.<\/p>\n\n\n\n<p>In this documentation post, we\u2019ll show you how to add Custom HTML to WordPress tables with a step-by-step guide.<\/p>\n\n\n<div style=\"width: 100%; \" class=\"ub-advanced-video-container wp-block-ub-advanced-video\" id=\"ub-advanced-video-2b1dca56-0cd7-426f-bcc2-9aaaba915d93\"><div class=\"ub-advanced-video-embed ub-advanced-video-autofit-youtube\" style=\"box-shadow: 0px -0px 0px 0px rgba(0, 0, 0, 1); border-top: 1px solid #abb8c3; border-left: 1px solid #abb8c3; border-right: 1px solid #abb8c3; border-bottom: 1px solid #abb8c3; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; --ub-advanced-video-aspect-ratio: 480\/360; \"><iframe loading=\"lazy\" width=\"480\" height=\"360\" src=\"\/\/www.youtube.com\/embed\/cVjNUr1jYRk\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n\t\t<div class=\"ub-advanced-video-channel-details\">\n\t\t<div class=\"ub-advanced-video-channel-content-wrapper\">\n\t\t\t<div class=\"ub-advanced-video-thumbnail-wrapper\">\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/yt3.ggpht.com\/oKziEGn9FgE4x1-YJFN2BlhUBADEjBAjmVMAZr1BRD0PxwNOq56Z3gM5LLmyjrKPxUMXs_i4Ug=s88-c-k-c0x00ffffff-no-rj\" class=\"ub-advanced-video-thumbnail\" \/>\n\t\t\t<\/div>\n\t\t\t<div class=\"ub-advanced-video-title-wrapper\">\n\t\t\t\t<p class=\"ub-advanced-video-title\">DotCamp - WordPress\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb<\/p>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t<div class=\"ub-advanced-video-channel-subscribe\">\n\t\t\t<a href=\"https:\/\/www.youtube.com\/channel\/UChfvkb8WxFHAhjkl7CJrQtQ?sub_confirmation=1\" class=\"ub-advanced-video-channel-subscribe-button\" target=\"_blank\" rel=\"noopener\">\n\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"24\" width=\"24\" viewbox=\"0, 0, 576, 512\">\n\t\t\t\t\t<path fill=\"currentColor\" d=\"M549.7 124.1c-6.281-23.65-24.79-42.28-48.28-48.6C458.8 64 288 64 288 64S117.2 64 74.63 75.49c-23.5 6.322-42 24.95-48.28 48.6-11.41 42.87-11.41 132.3-11.41 132.3s0 89.44 11.41 132.3c6.281 23.65 24.79 41.5 48.28 47.82C117.2 448 288 448 288 448s170.8 0 213.4-11.49c23.5-6.321 42-24.17 48.28-47.82 11.41-42.87 11.41-132.3 11.41-132.3s0-89.44-11.41-132.3zm-317.5 213.5V175.2l142.7 81.21-142.7 81.2z\" \/>\n\t\t\t\t<\/svg>\n\t\t\t\t<span>\u30b5\u30d6\u30b9\u30af\u30e9\u30a4\u30d6<\/span>\n\t\t\t<\/a>\n\t\t<\/div>\n\t\t<\/div>\n    <\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\">Step 01: Add the Custom HTML Block to the Table<\/h2>\n\n\n\n<p>Go to the cell where you want to add the block. Click the <strong>\u30d7\u30e9\u30b9\uff08\uff0b\uff09\u30a2\u30a4\u30b3\u30f3<\/strong>. Type <strong>Custom HTML<\/strong> in the search box. Add the block to the cell once it appears.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-Custom-HTML-Block-to-the-Table.webp\" alt=\"Add the Custom HTML Block to the Table\" class=\"wp-image-1362\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-Custom-HTML-Block-to-the-Table.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-Custom-HTML-Block-to-the-Table-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-Custom-HTML-Block-to-the-Table-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-Custom-HTML-Block-to-the-Table-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>The block will be added to the cell in no time.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Custom-HTML-block-is-added.webp\" alt=\"Custom HTML block is added\" class=\"wp-image-1363\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Custom-HTML-block-is-added.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Custom-HTML-block-is-added-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Custom-HTML-block-is-added-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Custom-HTML-block-is-added-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Step 02: Add an HTML Code Snippet to the Block<\/h2>\n\n\n\n<p>Simply <strong>copy-paste an HTML code snippet<\/strong> to the block. Get the code from anywhere of your desired source.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-an-HTML-Code-Snippet-to-the-Block.webp\" alt=\"Add an HTML Code Snippet to the Block\" class=\"wp-image-1364\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-an-HTML-Code-Snippet-to-the-Block.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-an-HTML-Code-Snippet-to-the-Block-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-an-HTML-Code-Snippet-to-the-Block-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-an-HTML-Code-Snippet-to-the-Block-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3002 <strong>Preview button<\/strong> \u30c4\u30fc\u30eb\u30d0\u30fc\u306e<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Go-to-preview-of-the-custom-HTML-block.webp\" alt=\"Go to preview of the custom HTML block\" class=\"wp-image-1365\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Go-to-preview-of-the-custom-HTML-block.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Go-to-preview-of-the-custom-HTML-block-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Go-to-preview-of-the-custom-HTML-block-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Go-to-preview-of-the-custom-HTML-block-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>The preview option will instantly display the content embedded with the HTML link.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"523\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Content-displayed-with-the-Custom-HTML-block-1024x523.webp\" alt=\"Content displayed with the Custom HTML block\" class=\"wp-image-1367\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Content-displayed-with-the-Custom-HTML-block-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Content-displayed-with-the-Custom-HTML-block-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Content-displayed-with-the-Custom-HTML-block-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Content-displayed-with-the-Custom-HTML-block.webp 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Step 03: Configure Setting of the Custom HTML Block<\/h2>\n\n\n\n<p>By togglin on the this option on the right sidebar, you can preview the Custom HTML snippet while the block is deselected.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"523\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Configure-Setting-of-the-Custom-HTML-Block-1024x523.webp\" alt=\"\" class=\"wp-image-1370\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Configure-Setting-of-the-Custom-HTML-Block-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Configure-Setting-of-the-Custom-HTML-Block-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Configure-Setting-of-the-Custom-HTML-Block-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Configure-Setting-of-the-Custom-HTML-Block.webp 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Hope you are satisfied with this documentation. The Custom HTML block doesn\u2019t have the stylization option. It\u2019s one of the simplest block of the TableBerg plugin.<\/p>\n\n\n\n<p>The plugin also allows you to add Styled List to the table. Let\u2019s take a look at <a href=\"https:\/\/tableberg.com\/ja\/%e8%ab%b8%e6%b3%a8%e6%84%8f\/tableberg-one\/%e3%83%86%e3%83%bc%e3%83%96%e3%83%ab%e3%83%90%e3%83%bc%e3%82%b0\/how-to-add-styled-lists-in-wordpress-tables\/\" target=\"_blank\" rel=\"noopener\" title=\"how to add Styled Lists to WordPress tables\">how to add Styled Lists to WordPress tables<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>The Custom HTML block allows you to add a personalized code snippet directly to your site to display interactive elements, embedded media, etc. With the TableBerg plugin, you can now add the Custom HTML block to your WordPress tables as well. In this documentation post, we&#8217;ll show you how to add Custom HTML to WordPress tables with a step-by-step guide. Step 01: Add the Custom HTML Block to the Table Go to the cell where you want to add the block. Click the plus (+) icon. Type Custom HTML in the search box. Add the block to the cell once it appears. The block will be added to the cell [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_eb_attr":"","footnotes":""},"doc_category":[94],"doc_tag":[79,80],"class_list":["post-1361","docs","type-docs","status-publish","hentry","doc_category-sub-blocks","doc_tag-custom-html-block","doc_tag-html-block"],"year_month":"2026-04","word_count":239,"total_views":0,"reactions":{"happy":0,"normal":0,"sad":0},"author_info":{"name":"\u30a4\u30b9\u30c6\u30a3\u30a2\u30af\u30fb\u30ec\u30a4\u30cf\u30f3","author_nicename":"wpx_irayhan","author_url":"https:\/\/tableberg.com\/ja\/author\/wpx_irayhan\/"},"doc_category_info":[{"term_name":"Sub-Blocks","term_url":"https:\/\/tableberg.com\/ja\/docs-category\/sub-blocks\/"}],"doc_tag_info":[{"term_name":"Custom HTML Block","term_url":"https:\/\/tableberg.com\/ja\/docs-tag\/custom-html-block\/"},{"term_name":"HTML Block","term_url":"https:\/\/tableberg.com\/ja\/docs-tag\/html-block\/"}],"_links":{"self":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/docs\/1361","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/comments?post=1361"}],"version-history":[{"count":3,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/docs\/1361\/revisions"}],"predecessor-version":[{"id":9886,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/docs\/1361\/revisions\/9886"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/media?parent=1361"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/doc_category?post=1361"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/doc_tag?post=1361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}