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.

One thought 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.

    Like

Leave a Reply to Steven Raines Cancel reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: