Who Can Help With a Little Web Design Problem?

As you may know, I run this site as an on-my-own-time, on-my-own-dime project to pull together online resources for researching ancestral & architectural history in Buffalo. I host it at WordPress with a personal account.

For $25 a month, I could upgrade to the business plan, which opens up all the WordPress plug-ins, of which there is an impressive variety, and the ability to edit CSS. In this precarious economy, that is more than I am willing to spend on a hobby.

Also, I have never learned CSS. My 20+ years of web design relied on self-taught HTML. There is a lot of disdain for HTML now, but for the first 20 years of the web, it enabled untrained, non-coding laypeople to master and put together their own websites. It was an era of exuberant and sometimes excessive self-expression. Anyone remember the blinking text tag and text superimposed on busy wallpapers? Good times.

This spring, I moved the languishing BuffaloResearch.com to WordPress (WP) and began recreating my most heavily-used pages, teaching myself WP as I went. And discovering its limitations in the process.

One of its limitations is with tables. I love tables. They are now considered bad form, but there is nothing like a good chart or grid for organizing & displaying a bunch of variables, which is why we are so reliant on spreadsheets.

Here at WordPress, I have two options for table design: fixed, equal-width columns, which I use when I can, or “flexible” column widths, which means that WP decides how wide my columns should be. And WP guesses wrong, which makes for a bad user experience.

My work-around was to create the page at my Google Docs account, matching the BuffaloResearch.com look and feel, and link out to it. In a Google Doc, I can set my columns widths as I see fit by simply clicking & dragging. But when I use a Google Doc, its content is not findable by WP’s site search.

If you wish to compare:

My Buffalo Newspapers page utilizes WordPress’s tables.

My Deaths & Obituaries page resides entirely at Google Docs.

My other option is to embed a Google Doc in a page here at WP, using the iFrame embed code. So I figured that out and got a usable result with my custom column widths. It gives the page a legible, easily shared BuffaloResearch.com URL instead of an endless string of random characters. There’s one problem: my pages are dense with links. That’s kind of the point of them.

If I embed a Google Doc table in a page here at WP, it breaks my links. If you click on one of them, you get a screen with a plain-text redirect notice, and no further action. No page will load for you. When Google Docs were first launched, you could open the HTML and edit it yourself. That function has been removed, or I would try inserting “target=_blank” everywhere. This tag opens a link in a new browser tab, which is what I am trying to accomplish.

Does anyone know an HTML work-around for this problem? I know that WP has iFrame plug-ins, so before you suggest one, please recall that with a personal-level account, I cannot use WP plug-ins. Likewise, at the personal account level, my CSS editing options are quite restricted, even if I did know how and where to paste CSS code.

Drop your suggestions in the comments and thanks in advance!

Published by Cynthia Van Ness

Librarian, author, webmaster. BuffaloResearch.com is an on-my-own-time project, reflecting my own views and idiosyncracies.

4 thoughts on “Who Can Help With a Little Web Design Problem?

  1. Here is an option, although it is a little more work… especially if you are going to update the tables frequently.

    1. Create your table in Google Docs, sizing your columns as you like. Don’t have anything on the page except the table.
    2. From the Google Docs “File” menu, choose, choose “Download -> Web Page (.html, zipped)
    3. Unzip the file that downloads and open the .html page in a text edtior.
    4. Copy the entire contents of the file to your clipboard.
    5. Open WordPress and create a new page or post
    6. Add a block of type “Custom HTML”
    7. Paste the contents of your file into the Custom HTML block.

    At this point, WordPress will show your table with the column widths. However, your HTML isn’t semantically correct. To fix that, do the following:

    a. In the Custom HTML block, remove the , , and tags. You will need to remove the closing tags, as wel..
    b. Leave the style tag… that is what sets the column widths.
    c. Remove the tag.
    d. Keep all the table tags.


  2. Finally giving this a spin and the result is that my table doesn’t render in WP. The preview shows a block of code. Darn. I’d post a screenshot but either WP or I disallowed it in comments.


  3. Check this site out:


    I use their marquee generator for the Elma Historical Society website. I paste their code into an HTML box.

    Otherwise, if it were me, I might go old-school, such as: #1) create a Word doc with tables containing hyperlinks, #2) convert to a PDF; #3) paste the PDF on the webpage; and #4) set the PDF to open in a new window when clicked on. Yeah, it’s a Plan B for sure… OK, so maybe it’s more like Plan Z. But, it’d work, hmmm, sorta of.

    /Brian in Elma


Comments are closed.