In a web building galaxy long ago (the 1990s), HTML tables were the way to control the layout of your web sites. Right now, we have much more elegant tools, and ones that work better on different sized devices,
But there are times in a blog page or post when you may need to present data or information in a columnar format. There is a place for those <table>...</tables> after all.
This just came up in the WordPress Mattermost channel (why are you not in there?) via a question from Emily at Camosun College.
Hi all! My question (via a faculty member at Camosun). Tables in the OpenETC WP – possible? And it’s ok if the answer is no.
And this is how a co-op should work, right? Tannis was unsure but Troy quickly pointed out there is a Table block in the visual editor. I was double checking as I had not used it, but when you click the + sign to add a new paragraph, enter “Table” in the search for a block type, and you will find it is waiting for you.
It’s not all that different from creating a Table in Google docs, you first pick the number of rows and columns (you can add/delete later). I made a simple one summarizing our exchange in Mattermost:
| Name | When | Notes |
|---|---|---|
| Emily | 2:15pm | asked about tables in WP |
| Tannis | 2:19pm | said probably not easy? |
| Troy | 2:20pm | yes, use the Table Block |
| Alan | 2:20pm | doing a demo now! Can we have longer rows? |
The options are not very sophisticated and any one wanting to precisely format tables might be frustrated. Primarily, the tables are meant to be flexible, so the expand/contract to fit the available space. The options on the block let you make fixed width tables (making them equal width proportional to the space available, and to add column labels for the header and optionally footer.
For more, I found table making tips from WPBeginner and also from MotoPress.
Editing in the WordPress block editor interface is far from everyone’s favorite mode and despite using it since it came out I shake my head often at it.
But as I was curious to see how it would do copy/pasting from Google Docs, as much content does do well in the transfer (I imagine that Word would do okay too). I thought I could find an existing document with tables in my Drive, but after 20 minutes of rummaging, I just made a quick silly demo document with a table inside of it. Copying the entire table, and pasting into a blank block here brings it over fairly well:
| Dinner Idea | Main | Need |
| Tacos | Shrimp | Jalapenos, tortillas |
| BBQ | Steak | Propane, potatoes |
| Italian | Spaghetti | Noodles, garlic |
So this might be an easier way for designing your tables.
I’ve only dabbled here, but if you know more or have examples, share with us! But better, join our OpenETC Mattermost Community and then find your way to the WordPress channel. If you have a question, like Emily knows, I bet you will get an answer.
Image Credit: lined up for lunch 01 flickr photo by byronv2 shared under a Creative Commons (BY-NC) license