What are tables?

In its simplest form, a table is a group of rows and columns, with each “cell” containing an item of some sort. Spreadsheets with rows of data are a common type of table. In fact, when introduced as part of HTML, that was their intended use — a way to present tabular data.

Back in the day, however, web developers quickly realized that because website designs could pretty easily be broken down into grids, it made perfect sense to divvy up a layout into rectangular sections and place HTML components — whether that was simple content (e.g., text) or graphic “pieces” of the design — into table cells. It was the standard method of building websites.

Nowadays, with the advent of responsive web design, relying on tables isn’t the best solution for putting a site together. They’re just too rigid. CSS, with its ever-growing accepted properties is the method of choice.

However, this doesn’t mean that tables have no place in your site.

Back to the original intention

There’s still really no better way to present tabular data than, well, in a table. So do feel free to use them in that manner.

How to Create a Table in WordPress

When you’re in the WordPress wysiwyg editor, to add a new table, make sure your cursor is in the spot on the page where you want to add it, then select the Table menu item. From the first item in the dropdown list (again, called Table), you’ll see a grid appear to the right. This is where you’ll set the initial number of rows and columns of your table. Don’t worry if you don’t know the exact number of either — you may have a large table of data that you can’t be bothered counting one or the other — just give it your best guess; you can always change it later. When you make your selection, you’ll see the dimensions (e.g., 4×3) at the bottom of the grid. Click and the new, empty, table will be inserted into your page.

Table Properties

Before you start inputting your data into the table, you might want to set its properties — i.e., how it will look. To do so, select the table, by clicking anywhere in one of its cells (you should see little boxes appear in the four corners of the table). Then, from the Table menu, you can select Table Properties. From there, you have two tabs to select from, General and Advanced. Let’s start with the General tab and discuss its options.

• Width: you can enter a number (in pixels), e.g., 500, or in percent, e.g., 50%. The latter is a percentage of the width of the containing element, often the page or column. If you want a maximum width table, enter 100%. Although an exact number (in pixels) gives you more specific control, using a percentage works better in terms of the table adjusting to fit the screen size (i.e., is responsive).
• Height: unless you’re attempting to make the table take up a certain amount of vertical space, I wouldn’t recommend setting this option.
• Cell spacing: this is the amount of space between table cells, again, it can be in pixels (default) or percentage.
• Cell padding: there’s a subtle difference between this and cell spacing. Cell padding is the amount of space within each cell. You can usually achieve similar results using either spacing or padding.
• Border: pretty self-explanatory. This is an outline of each cell. Entering a number here defines how wide (in pixels) you want the border around each cell to be. Setting it to 0 or leaving it blank will result in no border.
• Caption: this allows you to add a title above the table. I don’t think I’ve ever used this attribute; I prefer using sub-headings (e.g., Heading 3), but it’s up to you.
• Alignment: sets whether the table is left-aligned, centered, or right-aligned, to the page (or containing element).

The Advanced Table Properties tab gives you the following options:

• Style: this is where you can set CSS properties (to be covered in a more advanced lesson).
• Border color: you can either input a hexadecimal number or (easier) click on the box on the right and use the color selector to choose a color of your preference (and then you’ll see a hexadecimal number automatically displayed).
• Background color: this is the color behind the full table. You can use the same methods as for border color to select one you like. Leaving this blank with give you a table with a background the same color as your page (or containing element).

Once you’ve finished setting the properties, you can re-select the table and change any of those settings and you’ll notice if you click in a cell, you can “pull” any of the little squares in the table corner to adjust its size.

Continuing with the Table dropdown menu, the next item down is the self-explanatory Delete table. Not much to say about that one!

Cell Properties

The next item down, though, is worth covering — Cell > Table cell properties. Click on that and you have the following General properties:

• Width: similar to the table width, this can either be set to a number (pixels) or percentage. The latter, though, is a percentage of the total table width. Best to have the total width of all cells across a row equal 100% (or the number of pixels of the table’s width). If they don’t add up, the browser will adjust accordingly.
• Height: generally more useful than the table’s height, this allows you to set the vertical space for the cell (and, automatically, for the rest of the cells in that row). This can be handy for offsetting a row from others. But if you want the same vertical space between each row, you might be better off setting the table’s cell spacing or padding.
• Cell type: you can usually leave this blank. However, if you want to define a header row, with a different style (e.g., bold text), this is an option.
• Scope: not fully supported and not really used.
• H Align: the H stands for horizontal. You have the options of left-aligning, centering, or right-aligning the item within the cell.
• V Align: you guessed it, this is vertical alignment. You can align to the top, middle, or bottom of the cell.

The Advanced options are the same as for the Table Properties (above), only instead of applying to the full table, they apply to just the selected cell. So, if you had chosen yellow as the background color for the table and red as the background color for a cell, the table would have a yellow background with one cell having a red background. Lovely!

Also under the Table > Cell submenu, is Merge table cells. If you want to merge two or more adjacent cells (horizontally, vertically, or both), you do so by selecting those cells and selecting this item. Why would you want to do this? Say you had a block of cells that you want to mark with one “N/A” or if you had a heading that applies to two or more columns, this option comes in handy. Once you’ve merged cells, you can set the H align, V align, and background color as for any other cell.

If you need to split a merged cell back into its original two or more cells, you would select Table > Cell > Split table cell.

Row Properties

Often when you’re entering table data, you’ll need to go back and insert a row to add in new data (or data that was missed). To do so, you simply click in a cell and select Table > Row > Insert row before (or Insert row after). Doing so will, not surprisingly, add a table above or below the row you’re in.

If for any reason you need to get rid of a whole row from your table, you would select Table > Row > Delete row. Note that all content in that row will be gone.

Let’s now examine the next item in the Row submenu list: Table row properties. Again we’ve got a General and an Advanced tab. We’ll start with General:

• Row type: the options are header, body, and footer, with ‘body’ being the default. Again these are advanced formatting options, which we’re not going to cover in this beginner’s lesson.
• Alignment: to be honest, this one flummoxes me! Setting it just seems to override the table’s left, center, or right alignment.
• Height: once again, you can set the height for the whole row, in pixels (or percent).

As for the table and cell, the Advanced tab allows you to set the color for the border or background for that specific row. Continuing with our previous example (yellow table, red cell), if you were to set the background color of the row the cell was in to blue, you’d have a table with a yellow background, one blue row, containing one red cell. Even lovelier!

The remaining items in the Row submenu are for moving or copying an entire row. To do so, you would simply click on a cell in the row you want to move or copy, then select Table > Row > Cut table row (or Copy table row) then click to where you want to move or copy the row to and select Table > Row > Paste table row before or Paste table row after.

Column

The final item in the Table dropdown menu is Column. Clicking on this item, gives you three options: Insert column before, Insert column after, and Delete column. Since these are all pretty self-explanatory, I won’t go into details, other than to say that these all apply to (or relative to) the cell you’ve clicked in. There’s no option to copy/paste an entire column.

So there you have it. Tables can, indeed be your friend. Used wisely and for their intended purpose, they can be an effective way of displaying information on your web page.