How To Create Tables Using WordPress

Tables are an important part of many websites. They are the best way to display data that reads best in columns. Examples of this kind of data might be the numbers for a company’s balance sheet, a list of files with their descriptions and release dates, a book list showing titles and authors, or an address list.

In this tutorial, I’ll first show you how to create data tables by hand, using HTML and CSS, (I’ll leave out Sass for now), and then I’ll discuss some plugins that will make the task much easier.

The Basics

You define a table and include all of its elements between the “table” tag and its corresponding “/table” end tag. Table elements, including data items, row and column headers, and captions, each have their own markup tags. Working from left to right and top to bottom, you define, in order, the header and data for each column cell across and down the table.

Tables are treated by most browsers as a separate browser window within your page. A table can contain almost any type of HTML tag that holds content such as paragraphs, forms, images, links, scripted applets, and even other tables. Tables can be quite simple or quite complex, depending on your needs.

Tags for Tables

When making tables, you’ll use five tags. There are more tags if you want to get fancy with layouts, but the ones we’ll cover are the tags you’ll use in almost every table you create.

The Table Tag

The table tag is the way you begin every table. It tells the browser that everything you do until you close the table tag is going to be part of a table.

The “table” tag and its “/table” end tag define and encapsulate a table within the body of your document. Unless otherwise placed within the browser window by style sheet, paragraph, division-level, or other alignment options, the browser stops the current text flow, breaks the line, inserts the table beginning on a new line, and then restarts the text flow on a new line below the table.

The only content allowed directly within the “table” tag is one or more “tr” tags, which define each row of table contents, along with the various table sectioning tags: “thead”, “tfoot”, “tbody”, “col”, and “colgroup”.

The “table” tag has several optional attributes as well as many CSS properties that can be used. Some of the optional attributes are being replaced with CSS. You may want to Google these or read a book like CSS The Missing Manual to learn how they all work. We’ll focus on those used most often.

For now, optional attributes include border, cellspacing, cellpadding, background (bgcolor), bordercolor (bordercolordark), (bordercolorlight), class, cols, dir, height (hspace), (), id, lang, nowrap, rules, style, summary, title, valign (vspace), and width. There are also around a dozen mouse and key click events that you can explore if you intend to use scripting in your tables.

Preparing The Ground

Because we’re doing this using WordPress, you’ll need to add any CSS rules to your theme’s stylesheet. If your theme already has styling for tables, you can either modify those styles, or leave them as is. If not, you’ll need to go ahead and add those rules to your stylesheet. If you’re using a Genesis theme, (that’s an affiliate link, so if you click it, and make a purchase, I get a commission),there’s already a structure in place, including a table of contents documenting all the styles that are provided for the theme. You may wish to add an entry in the contents for the tables section. That way, you’ll be able to more easily find that section should you want to make future changes to your table styling. Next, add any style rules for tables. Make sure you add them before the media queries.

Colors

In HTML 5, it is best to specify both the background and other colors using CSS with either a tag selector for all tables or by assigning your table a class and setting colors that way. It saves you time, and the color attributes for the table tag will be going away in a few years.

Aligning Your Table

Like images, tables are rectangular objects that float in the browser display, aligned according to the current text flow. Normally, the browser left-justifies a table, abutting its left edge to the left margin of the display window. Or the table may be centered if under the influence of a centered paragraph or a centered division. Unlike images, however, tables are not inline objects. Text content normally flows above and below a table, not beside it. You can change that display behavior with a CSS definition for the “table” tag using the align property.

The align attribute accepts a value of either left , right , or center , indicating that the table should be placed flush against the left or right margin of the text flow, with the text flowing around the table, or in the middle with text flowing above and below.

Borders

Borders can and should be handled using CSS. However, if you must use this attribute in your table code, here is how it works. The optional border attribute for the “table” tag tells the browser to draw lines around the table and the rows and cells within it. The default is no borders at all. You may specify a value for border , but you don’t have to with HTML. Alone, the attribute simply enables borders and a set of default characteristics, slightly different for each of the popular browsers.) With XHTML, use border=”border” to achieve the same default results. Otherwise, in HTML 5, supply an integer value for border equal to the pixel width of the 3D chiseled-edge lines that surround the outside of the table and make it look like it’s embossed onto the page.

Cellspacing and Cellpadding

Both cellspacing and cellpadding can be handled nicely in CSS and will save you time. Use a tag or class selector, and you’re golden. However, if you want to use the attributes in your “table” tag, here’s what you need to know.

The Cellspacing Attribute

The cellspacing attribute controls the amount of space placed between adjacent cells in a table and along the outer edges of cells along the edges of a table.

Most browsers normally put 2 pixels of space between cells and along the outer edges of the table. If you include a border attribute in the “table” tag, the cell spacing between interior cells grows by 2 more pixels (4 total) to make space for the chiseled edge on the interior border. The outer edges of edge cells grow by the value of the border attribute.

By including the cellspacing attribute, you can widen or reduce the interior cell borders. For instance, to make the thinnest possible interior cell borders, include the border and cellspacing=0 attributes in the table’s tag.

The Cellpadding Attribute

The cellpadding attribute controls the amount of space between the edge of a cell and its contents, which by default is 1 pixel. You can make all the cell contents in a table touch their respective cell borders by including cellpadding=0 in the table tag. You can also increase the cellpadding space by making its value greater than 1.

Combining the Border, Cellspacing, and Cellpadding Attributes

The interactions between the border , cellpadding , and cellspacing attributes of the “table” tag combine in ways that can be confusing. You will need to experiment a bit to understand how these attributes work together.

While all kinds of combinations of the border and cellspacing attributes are possible, these are the most common:

border=1 and cellspacing=0
produces the narrowest possible interior and exterior borders: 2 pixels wide.
border= n and cellspacing=0
makes the narrowest possible interior borders (2 pixels wide), with an external border that is n + 1 pixels wide.
border=1 and cellspacing= n
tables have equal-width exterior and interior borders, all with chiseled edges just 1 pixel wide. All borders will be n + 2 pixels wide.

The Cols Attribute

Setting this attribute can make your web pages load faster and assist with screenreader navigation in large tables. Always use this attribute if you can. To format a table, your browser has to read the entire table contents, determining the number and width of each column in the table. This can be a lengthy process for long tables, forcing users to wait to see your pages. The cols attribute tells the browser, in advance, how many columns to expect in the table. This applies to the virtual buffer used by most screenreaders as well. The value of this attribute is a number, an integer value defining the number of columns in the table.

The cols attribute only advises the browser. If you define a different number of columns, the browser is free to ignore the cols attribute in order to render the table correctly. In general, it is good form to include this attribute with your “table” tag to help the browser do a faster job of formatting your tables.

The Summary Attribute

The summary attribute was introduced to HTML in the 4.0 standard. Its value is a quote-enclosed string that describes the purpose and summarizes the contents of the table. Its intended use, according to the standard, is to provide extended access to nonvisual browsers, particularly for users with disabilities.

The TR Tag

The “tr” tag defines rows in your table. Every row in a table has the same number of cells as the longest row; the browser automatically creates empty cells to pad rows with fewer defined cells. In early versions of HTML, closing the “tr” and “td” tags wasn’t necessary. Most browsers will still display your table if you don’t do this. However, for best compatibility with all browsers, close each row with the “/tr> tag.

Use CSS if you need to style rows in your tables including colors, alignment, and such. If you define classes for rows that need formatting, you won’t have to type a bunch of attributes every time you make a new row.

The “TR” tag will hold either the “td” tag or the “th” tag to make cells. Don’t put data immediately inside a “tr” tag without first adding a “td” or “th” tag first.

The th and td Tags

The “th” and “td” tags go inside the “tr” tags of a table to create the header and data cells, respectively, and to define the cell contents within the rows. These tags make the columns in your table. The tags operate similarly. The only differences are that the browsers render header text, (meant to entitle or otherwise describe table data), in boldface font style and that the default alignment of their respective contents might be different than for data. Data usually gets left-justified by default while headers get centered.

The contents of the “th” and “td” tags can be anything you might put in the body of a document, including text, images, forms, applets… even another table. Browsers automatically create a table large enough, both vertically and horizontally, to display all the contents of any and all the cells.

If a row has fewer header or data items than other rows, the browser adds empty cells at the end to fill the row. If you need to make an empty cell before the end of a row, for instance to indicate a missing data point, create a header or data cell with no content in it.

if the table has borders, empty cells look different than those containing data or headers. The empty cell does not appear embossed onto the window and is simply left blank. If you want to create an empty cell that has borders like all the other cells in your table, use a minimal amount of content in the cell: something like a single “br” tag, for example.

You can use CSS to control the appearance of cells using the “td” tag selector or by giving certain cells a class that contains a style.

The Ccaption Tag

A table often needs a caption to explain its contents, so browsers provide a table-caption tag. Authors typically place the “caption” tag and its contents immediately after the “table” tag, but it can be placed nearly anywhere inside the table and between the row tags. The caption may contain any body content, much like a cell within a table. Screenreaders do read the caption, and it can be helpful to blind and sighted users alike. Unlike the summary attribute, the contents of the caption tag always show visually on screen.

This is a time vampire! Can’t I use a plugin?

One of the great things about WordPress, (or any CMS for that matter), is that it does the heavy lifting for you. And when you’re writing content, and you want to display data in a table, allowing WordPress to handle the creation of that table with a plugin is a lot less time-consuming than switching to the code editor and manually creating it yourself. So if you’ve read this far, here are some plugins that will help.

Ultimate Tables

Ultimate Tables is a free WordPress plugin that allows you to insert tables into posts, pages, and other custom post types.

Six different styles are available with the plugin. Alternatively, you can define your own class or apply no styling to the table. Tables are configured in the settings area. From here you can define rows and columns, and enter text or HTML into cells. Rows and columns can be reordered by defining their row or column number at the side of the table.

The output of Ultimate Tables looks great. Additional rows of data can be broken up into pages.
Ultimate Tables supports search, filtering, and sorting. Once you have completed your table, you can insert it into your website using a shortcode. The table can also be placed in a widget.

TablePress

TablePress, (formerly known as WP Tables Reloaded), is easy to use and offers more custom options than does Ultimate Tables. In the settings area, you define the table name, description, number of rows, and number of columns. It supports any type of data in cells (even formulas). Rows and columns can be moved, inserted, and duplicated. Cells can also be selected and combined into larger cells. One of the great features of the plugin is the ability to select a cell and then add content using an advanced editor. This allows you to style content and insert images. Table headers and footers can be added too. There is also an option for alternating row colors and enabling row hover highlighting. TablePress features search and sorting functionality and table rows can be divided into pages. Custom CSS can be added via the plugin options page and then called in the settings area for individual tables. However, if you don’t want to add your own CSS, the default design will work as well. With the ability to import and export data using CSV, HTML, and JSON, it is a practical option for anyone who works with data tables on a regular basis.

These recommendations should get you started. If you’d like more options, Elegant Themes has compiled a list of WordPress table plugins ranging from simple to advanced, and from free to premium.

I hope you have found this tutorial useful. If you have any questions, please feel free to leave them in the comments. While you’re at it, if you have a favorite table plugin, why not leave it in the comments and I’ll add it to this post.

If You’re Not Watching Genesis Office Hours, You Should Be

Shameless kiss-up: I love Genesis Office Hours. I think it’s one of the best WordPress podcasts out there, not least because it deals with the Genesis framework, which I also love.

What Is Genesis Office Hours?

Genesis Office Hours is a podcast hosted by Carrie Dils, a designer and developer using the Genesis framework. Along with designing and developing sites for cost, she provides a lot of tutorials for Genesis, showing users and other developers and designers how to get Genesis child themes to go beyond their original designs and functionality. On top of that, she hosts Genesis Office Hours, which is a podcast featuring interviews and tips from others in the Genesis community, along with the opportunity for users to ask questions and have them answered by the guest hosts and herself.

Note: I’m not going to get any money for this post, nor have I been featured on the show. I have, however, chatted up Genesis a lot, especially to my students, and I really do believe this is one of the best Genesis podcasts they, and you, could spend your time listening to.

Anyway, back to what it is. Carrie has feature guest hosts ranging from small business owners to some of the folks from Studio Press itself, and everyone’s been amazingly helpful and more than willing to share what they know. Not that this doesn’t happen with the rest of the WordPress community. But Genesis is my favorite framework, so I’m focusing on that.

Can I Watch?

Of course you can! That’s what I’m trying to get you to do after all, right? If you click on the link to Carrie’s site above, and then click on the Genesis Office Hours page, you can watch all past episodes. You can also submit your questions via the Twitter hashtag #gohchat. And here’s a helpful link to a post where Carrie gives you a bit of behind-the-scenes action. And be sure to read Carrie’s blog where she posts the show notes along with her other tutorials.

I hope that Genesis Office Hours will become a regular addition to your list of resources. It’s always great to have those to rely on.

Git: It’s Not Just For Developers

Version control: It’s one of those handy tools developers use to keep track of changes to a project. It also makes it easier to “code in the kitchen”, as it were, by allowing for small changes we may have come up with while, say cooking dinner or cleaning the house to be made and noted, so that we can come back later and decide if we want to keep the little change, or roll it back without having to dig through lines and lines of code to find and delete it. But did you know that Git (or any other method of version control, for that matter), can also be used for design, and even content writing?

I first came across version control in the form of Murcurial while working on a project last year with Monica that involved adding content to a hand-coded site. To be honest, at first, I thought the owner of the site was crazy for insisting on version control for a hand-coded, relatively simple site, but after having switched my own processes over to version control from plain-old work-as-you-go text files, I’m thankful I was introduced.

So how do you, as a content writer or designer, implement version control? There’s an excellent post over at Flywheel that will get you started. It lays out some reasons why version control, (specifically, Git), is a good for designers, and provides some free resources for getting started. Admittedly, the concept took me a while to get used to, and I ran into some issues while getting everything initially set up, but once I got rolling, I’ve never looked back.

Google Brings Out The Big Stick: Search Results To Indicate Whether Older Technology Is Being Used

Google announced on its Webmaster Central Blog that as of Monday, its U.S. search results would begin indicating whether or not a site is supported on your device. Technologies like Flash aren’t supported on Android 4.1 or higher, as well as iOS, and since smartphone usage is increasing, this is becoming a problem for users. It’s actually been a problem for users for a while now, and Google is finally catching up.

There’s of course a lot of pushback in the comments to Google’s post, but since this is Google we’re talking about, anyone maintaining a website will gripe, but be forced to make the change unless they want to see their search ranking plumet. Google is including its technology notice in the snippits section of search results, which raises the question of whether this was one of the intended reasons for implementing snippits in the first place. I can’t say I’m against this. It’s a great way to encourage the adoption of newer technologies like HTML5.

If You’re Using WPTouch, Update Immediately!

WPTouch is a plugin for WordPress that automatically enables a mobile theme for those who may be visiting your site on a smartphone or tablet. With five million downloads to date, it’s one of the most popular plugins in the WordPress plugin directory. Earlier today, Sucuri reported that WPTouch has a dangerous security vulnerability, and users are strongly advised to update immediately. The short version is, unless you’re running the latest update, WPTouch allows users who do not have administrative priveliges to upload php scripts directly to the server, meaning that someone with not-so-good intentions has the capability to take over any site running anything but the latest version of the WPTouch plugin.

The unpatched version of the plugin uses the “admin_init” hook as its authentication method. As was discussed previously, “admin_init” should not be used as an authentication method because it is invoked not only when an administrative user visits any page within wp-admin, but also when wp-admin/admin-post.php is visited, thus allowing anyone to upload potentially malicious code to an effected site.

If you’re using this plugin to create a mobile-friendly experience for your users, update it as soon as possible. Sucuri made the vulnerability known to the authors of the plugin, and they have uickly released a patch to the plugin directory. the only thing users of the pugin need do is update to the latest version.

How to bulk delete posts in WordPress with MySQL

Every once in a while, we need to spend time pruning our WordPress databases. But if part of your pruning task includes deleting a metric ton of posts, this can become time-consuming if you’re using the WordPress Dashboard to do it. Fortunately, there’s a quicker way to delete those hundreds, or even thousands, of posts without checking a bunch of boxes and clicking a button a couple of hundred times.

Enter MYSQL

WP-Guru has a great tutorial, complete with screenshots and example code, that will walk you step-by-step through creating the queries you need to delete those posts. I’ve used this tutorial myself, and it has saved me loads of time. So head on over and take a look, and if you’re in need try it out.

How To Better Detect Your Mobile Visitors with WordPress’s WP_is_mobile Function

Although WordPress themes typically use Responsive Web Design to tailor websites for mobile devices, sometimes you may need to use PHP (the language WordPress is written in) to detect whether your visitor’s web browser is running on a mobile device. For example, you may want to output certain HTML markup (such as a mobile navigation menu) on mobile devices. Alternatively, you may only want to output a slider containing large images on desktop and not mobile devices. Doing this via PHP (instead of CSS) means that your visitor’s mobile browser won’t have to download all of the slider images even though the slider is never displayed, which also means that your site will load faster for your mobile visitors.

wp_is_mobile() is a function built into WordPress that detects whether the visitor is using a mobile device such as iPhone, iPad, Android, Silk, Kindle, BlackBerry, Opera Mini, and Opera Mobi. This is a conditional function, which means it returns one of two results: true or false. It’s located in wp-includes/vars.php.

The function was introduced in WordPress 3.4, and it can be used in a WordPress plugin or theme.

Here’s a simple example:

<?php
if ( wp_is_mobile() ) { // Visitor is on a mobile device} else { // Visitor is on a desktop (not mobile) device}
?>

WordPress core currently uses this function in a few different places:

  • To completely disable the Visual Editor for Opera Mini.
  • To enable jQuery UI Touch Punch in the WordPress dashboard for mobile devices.
  • To detect whether the current device can upload files.
  • To disable the “shake” effect on the WordPress login page when an incorrect username or password is entered using a mobile device.

You can also use this function to hold mobile-specific content, such as the navigation menu mentioned above. <?php if ( wp_is_mobile() ) {
/* Display and echo mobile specific stuff here */
} ?>

How Tony Perez of Sucuri Sets Up His Own Security

there have been a lot of posts about various wordPress security issues over the last couple of weeks, some of them giving good security advice and a lot of others giving not so hot advice. Here’s a post by Tony Perez (who is probably the greatest master of WordPress security) where he talks about what he does when setting up his own wordPress sites. I’m not affiliated with Tony at all, but I’ve heard him talk a couple of times, and he’s extremely knowledgeable when it comes to security. Tony links to a lot of other good posts, so be sure to read those as well.