seancarmody

Protovis Loader is a plugin which faciliates the use of <a href="http://vis.stanford.edu/protovis/" rel="nofollow ugc">Protovis</a> scripts. Protovis is a javascript data visualisation library being developed at Stanford, which allows the creation of interactive charts on web pages.
Incorporating Javascript code into WordPress posts can be tricky as it (deliberately) sanitises text typed into posts, which interferes with Javascript. When I first began experimenting with Javascript, this cause me some difficulties, as described in this post. In the end, I decided to roll up my sleeves and write a plugin to make the whole process a lot easier. Protovis Loader was the result.
Protovis Loader makes the whole process a lot easier in two ways:
<ol>
<li>It ships with a copy of the Protovis javascript library and once the plugin is activated, links to the library will automatically be included in page headers.</li>
<li>It creates a shortcode called [pvis] which makes it very easy to include Protovis scripts in blog posts and pages.</li>
</ol>
Usage:
Simply use the [pvis] shortcode in your posts and pages where you want to include a Protovis chart. There are a number of optional parameters:
<ul>
<li>type: ‘chart’ (default) displays a chart in a box with an optional caption, ‘inline’ has no box (e.g. useful for sparklines)</li>
<li>src: path to a Protovis (javascript) code file</li>
<li>height: height of canvas box for the chart</li>
<li>width: width of canvas box for the chart</li>
<li>img: path to a fallback image to use when scripts are blocked or the browser does not support Protovis</li>
<li>alt: alt text for the fallback image</li>
<li>caption: image caption</li>
</ul>
If any content is supplied between the opening [pvis] tag and the closing [/pvis] tag, it is taken to be javascript for inclusion. It may also be interpreted as a caption, but only if a caption field is not supplied and a src field is supplied.
Here is an example of use of the tag:
[pvis src=”http://www.example.com/chart.js” img=”fails.png” height=”125px”]My Caption![/pvis]
You can see the plugin in action on <a href="http://www.stubbornmule.net/resources/protovis-loader/" rel="nofollow ugc">the Stubborn Mule</a>.
<h3>To-Do List</h3>
This list is not really prioritised yet.
<ol>
<li>Improve user-agent (browser) detection</li>
<li>Create an options page</li>
<li>Allow custom CSS files</li>
<li>Allow for alterntive specification of the protovis js library</li>
<li>Replace tags in the imported script to allow shortcode parameters to be used in the script</li>
</ol>
I’m sure there’ll be a lot more!

Protovis Loader

Creates a shortcode to faciliate the use of Protovis data visualization scripts in blog posts.

DotCamp

Imtiaz Rayhan

Istiak Rayhan

Ultimate Blocks

WP Table Builder

Saad

erdembircan

Zahin Azmayeen

The “Table Block by Tableberg” plugin for WordPress simplifies creating and managing tables within the block editor. It features intuitive sub-blocks, allowing users to add and customize tables easily. 
From pricing tables to product tables, you can build any type of tables using Tableberg. The plugin is designed for both novices and experienced users. It offers advanced functionalities like responsive controls, alignment adjustments, and cell merging, ensuring that tables look great on all devices without the need for coding skills.
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/TKsL_bUVCTU?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>
It comes with the following easy-to-use sub-blocks:
<ul>
<li>Paragraph: Allows for simple text entries within a table cell.</li>
<li>List: Facilitates the addition of organized lists to enhance clarity.</li>
<li>Button: Enables the insertion of clickable buttons for calls to action.</li>
<li>Image: Supports adding images directly into the table cells.</li>
<li>Star Rating (Pro): Provides an option to include interactive star ratings.</li>
<li>Styled List (Pro): Offers lists with additional styling options.</li>
<li>Icon (Pro): Allows for the integration of icons to visually represent concepts or actions.</li>
<li>Ribbon (Pro): Adds decorative ribbons for highlighting special information.</li>
<li>Custom HTML (Pro): Enables the use of HTML for complex customizations.</li>
</ul>
And here are the key features of the Tableberg plugin:
<ul>
<li>Header Settings: Options to disable the header, designate the top row as header, or insert a new header.</li>
<li>Footer Settings: Similar to header settings, with options for the footer including disable, designate, or insert.</li>
<li>Table Width & Alignment: Adjust the overall table width and its alignment on the page.</li>
<li>Responsive Settings: Ensures the table adapts to different device screens (Desktop, Tablet, Mobile) for optimal display.</li>
<li>Color Customizations: Change colors for the header, footer, even and odd rows for better visual hierarchy.</li>
<li>Cell Padding & Cell Spacing: Customize the space within and between cells to improve readability.</li>
<li>Border Options: Set the table border size, color, and decide whether to include inner borders with customization.</li>
<li>Global Font Style: Control the font color, link color, and font size across the entire table.</li>
<li>Column Width & Row Height: Adjust the size of columns and rows to fit content or aesthetic preferences.</li>
<li>Customizations for Each Block: Detailed settings for each type of block inserted into the table.</li>
</ul>
Now let’s see some of the use cases of the Tableberg plugin:
<ul>
<li>Pricing Tables: Ideal for displaying different pricing tiers with clear comparisons of features and costs.</li>
<li>Comparison Tables: Compare products, services, or options side by side to aid decision-making.</li>
<li>Amazon Product Tables: Showcase Amazon products effectively, enhancing affiliate marketing efforts.</li>
<li>Pros & Cons Table: Clearly list the advantages and disadvantages of any item, helping readers make informed choices.</li>
<li>Team Members Table: Display team member information such as roles, bios, and contact info in an organized manner.</li>
<li>Schedule Tables: Perfect for laying out event schedules, class times, or appointment slots.</li>
<li>Restaurant Menu Tables: List menu items along with descriptions and prices in an attractive, easy-to-read format.</li>
<li>More: The plugin’s flexibility supports a wide range of other applications tailored to specific needs.</li>
</ul>
If you have any suggestions or have faced any issues, contact us <a href="https://tableberg.com/contact/" rel="nofollow ugc">here</a>. You can also follow Tableberg on <a href="https://twitter.com/Tableberg" rel="nofollow ugc">Twitter</a>.

Tableberg – Simple Gutenberg Table Block


I used to have to delve in to custom css codes to create tables that were responsive using grid and flex. Now I may do so straight from the Gutenberg editor. What a major convenience. Great plugin.


Fast and Easy Table Creator

Table Block For the Block Editor. Craft Beautiful Tables With Ease.

Protovis Loader vs Tableberg – Simple Gutenberg Table Block