Using Static Data Tables in Posts

UPDATE: We’ve improved functionality on tables for reporters and readers. See the updated documentation. You can still use this tutorial for small graphics, if you choose, but the newer solution might save you some time.


StateImpact bloggers will occasionally need to include basic data tables in posts. Here’s a simple method that doesn’t involve too much code.

First, structure your data in Microsoft Excel or Google Docs so its rows and columns appear as you want them in the post. Copy the data:

Open this converter, which changes your copied text to HTML. Paste your data in the form. Notice that tabs are used to denote columns in text copied from the spreadsheet:

Next, tell the tool you want it to separate columns with the tab character:

Now select “Convert to HTML”:

Almost done. First you need to change a few lines of code so the table’s column headers are bold. Copy the code from the browser and paste it into the post (or a text editor).To do that, change the <td > and </td> tags in the first table row (here it’s “Program” and “Cost”). The “td” tells the browser you want a table cell within a row. We want a table header, so use <th> and </th> tags instead, like this:

If you haven’t already, paste the table (from <table> to </table>) into your post. It will render at 620 pixels after you align the field headers to the left. Like this:

Not all tables need to be full post. Feel free to experiment with widths for tables with, say, only two columns (like this one) by tinkering with the table tag:

<table style=”width: 400px;“>

Lastly, make sure your data table has a clear sub-headline (bold regular paragraph text will do). Also, it’s important that you include a source below the table. (If possible, link to the organization or, better yet, the full data set or report from which you grabbed the data). This should be styled as an H6, which you can find in the visual editor’s kitchen sink.

Comments are closed.