Contents
Making changes – Important!
01. Basic coding
02. Table width
03. Table alignment and text wrap
04. Column width
05. Borders
06. Vertical alignment of cell content
08. Padding inside each cell
09. Other styling inside each cell
10. Background color
11. Cells that span more than one column
12. Cells that span more than one row
13. Optional elements
14. Images
Introduction
Tables are created in the “Text” (=code) editor. They are used to display content in rows and columns; that is, to display content as a grid of cells, with or without visible borders:
| ROW1 COL1 CONTENT | ROW1 COL2 CONTENT | ROW1 COL3 CONTENT |
| ROW2 COL1 CONTENT | ROW2 COL2 CONTENT | ROW2 COL3 CONTENT |
| ROW3 COL1 CONTENT | ROW3 COL2 CONTENT | ROW3 COL3 CONTENT |
Note the plural and the conjunction in “rows and columns”: you do not need a table if you simply want to display some content in two or three columns, you do not need a table if you simply want to display a few thumbnails side by side, and you do not need a table if you simply want a left-aligned image with some text next to it (or even a column of images with some text next to each image). See my post Formatting text pt.1.
Most table tutorials and table generators use outdated coding. Moreover, tables on many of the newer WP themes aren’t ‘neutral’: each theme has its own default styling for tables. For both of these reasons, if you rely on an outdated table tutorial or table generator to create a table, you may get results other than the ones you expect: some of the coding may not work at all, some of it may work on older themes but not on newer ones, some of it may work now but stop working in the near future, plus the formatting may seem puzzling till you become familiar with what the CSS of a particular theme specifies for tables.
This tutorial is designed specifically for wordpress.com users, it’s designed to help you construct a table the way you want it regardless of what theme you’re using,* and it’s designed to keep working when HTML5 will have become the web standard.
* Unfortunately, this cannot also mean that your tables will remain unchanged if you switch to a different theme: since each theme has its own default styling, changing theme may result in a different appearance, i.e. different quirks you may need to override. To do this really effectively, you need to examine the CSS of the theme.
Prerequisite reading (for basic HTML terminology etc):
Introduction to HTML for wordpress.com users
Making changes
The basic table HTML will produce the required structure. Depending on the theme, the content of each cell, and what you’re aiming at, it may or may not produce the intended result: it may produce desirable or undesirable width(s), desirable or undesirable borders, desirable or undesirable spacing and alignment.
So you’ll often need to modify things. To do this, do not use any of the following attributes inside any opening tag:
Everything you need to change or specify, except column width(s) as well as cells that span more than one row or column, requires the style attribute, with appropriate properties and values.
Note well: unlike other attributes (which accept only a single value), the style attribute accepts multiple properties and values. In the following sections you’ll see several related suggestions. When you need to use more than one of them for the same element, you write all the properties and values inside the straight quotes that follow the style attribute (syntax: property followed by colon followed by value followed by semicolon).
For example, in two different sections of this article you’ll see these two different suggestions:
If you need both of them, you combine them this way (the order doesn’t matter):
Naturally, if you have the Custom Design upgrade, you can change the default styling of tables once for all in the CSS editor. (But, again, if you switch theme you’ll have to make new changes.)
Tip: if you have created a table with many cells, and you need to make the same change to all of the opening td tags, the fastest way is to copypaste the whole table into a text file, use the find-and-replace tool, then copypaste the result back into the “Text” editor of your post or page.
01. Basic coding
To mark a table cell, you enclose its content in a pair of td tags:
To mark a table row, you enclose a series of cell tag pairs in a pair of tr tags:
To mark a complete table, you enclose all the tr tag pairs in a pair of table tags:
So, a basic 3-column 3-row table would be this:
Naturally, all the rows need to have the same number of cells (exception: see sections 11 & 12).
Note: in the “Text” editor, each tag can be written on a separate line (as in the first three examples above), or on the same line with the previous or the next tag or the content it encloses (as in the fourth example) – no difference. For extra clarity, you can also add a blank line before any opening tag or after any closing tag – again no difference in the result.
02. Table width
On newer themes, the default table width is usually 100%. So if you want a table that covers the whole width of the post or page, you don’t have to do anything.
If you want a narrower table, you specify a percentage in the opening table tag, for example:
If you do want a table that covers the whole width of the post or page but you’re using a theme that doesn’t do that by default, you turn the opening table tag to this:
Note: in fixed-width themes you can also specify the width by using px values, but in flexible-width or responsive themes this is wrong, as it will produce a fixed-width table inside a non-fixed post/page column (so if one views the post/page on a lower resolution screen, the table may be cut off or stretch into the sidebar area). If you aren’t sure about the theme you’re using, drag the browser window to make it narrower and see if the content area shrinks or not.
03. Table alignment and text wrap
Tables narrower than 100% are usually left-aligned, with no text wrap (the rest of the content will start below the table).
To right-align such a table, you specify a percentage for its width, and set the remaining percentage as a left margin; for example:
To center such a table, you specify a percentage for its width, divide the remaining percentage by two, and set the result as a left and a right margin; for example:
To make the rest of the content wrap around a left-aligned table (start next to the table instead of below it), you specify a percentage for its width, and set the table to float left:
You’ll probably need to add a right margin as well (blank space between the table and the content that shows up next to the table):
You must also paste this at the point where the wrap around effect should stop:
Same things for a right-aligned table with text wrap, only with float:right and margin:left, of course.
04. Column width
If the amount of content inside the cells varies, the table columns will adopt varying widths, not necessarily in a satisfactory way. You can force the width(s) you prefer, by using the self-contained col tag.
This tag is added right after the opening table tag (exception: see section 13/A).
To specify unequal column widths, you add col tags, as many times for as many columns:
Naturally, the percentages need to add up to 100 (even if the table width is set to less than 100%: the col widths refer to the width of the table itself, not to the width of the post).
For example, if you want a three-column table with its first column twice as wide as the other two, you’ll add this:
To make the width of all the columns equal, you add a col tag with the span attribute, once:
Naturally, the percentage needs to be 100 divided by the number of columns.
For example, to make all the columns of a six-column table equal, you write:
You can also use this version more than once, to specify groups of columns. For example, suppose you want a six-column table, with two equal columns that take up half of the table width, then four equal columns that take up the other half; you write:
Note: the specified width may not be applied if the columns are too many and/or too narrow, and contain words that are too long. In that case you probably need to decrease the overall font size.
05. Borders
If the theme automatically produces a border around the table (or on any of its sides), and you don’t want that, you write the opening table tag this way:
If the theme automatically produces borders around the cells (or on any of their sides), and you don’t want that, you write each and every opening td tag this way:
Note: the default appearance of a table can be misleading on some themes. For instance, if you see horizontal lines only, you may think they are table row borders (that is, applied to the tr tags), but usually they are top or bottom cell borders (applied to the td tags).
If you do want a border around the whole table and/or around the table cells, or if you wish to change the border color (or its thickness or its style), you specify it this way:
Same thing for each and every opening td tag.
Note: the border property applies to all four sides of an element. You can apply changes to specific sides only, by using the respective properties: border-top, border-bottom, border-left, border-right.
The above example means thinnest possible, continuous line, light grey.
– Change the hex color code to change the color. For palettes and color codes see the Hex Hub.
– Change the adjective to modify the style (see my post on borders).
– Change the px value to increase the thickness.
Note: on some themes adjoining borders automatically collapse into a single border, but on some themes they don’t (so you may end up with borders that are twice as thick as you specify). If you’re using such a theme, you write the opening table tag this way:
You might want borders around each cell, but with blank space around them; example:
| ROW1 COL1 CONTENT | ROW1 COL2 CONTENT | ROW1 COL3 CONTENT |
| ROW2 COL1 CONTENT | ROW2 COL2 CONTENT | ROW2 COL3 CONTENT |
| ROW3 COL1 CONTENT | ROW3 COL2 CONTENT | ROW3 COL3 CONTENT |
To do this, you specify a border for each opening td tag and you also style the opening table tag this way:
If you try this and it doesn’t work, it means the theme specifies collapsing. In that case you need this:
If you want a certain amount of space left & right, and a different amount above & below, you write two values instead of one (for instance, border-spacing:10px 24px;).
06. Vertical alignment of cell content
When cells in a row have content of varying height, you may need to adjust its default vertical positioning. The required property is vertical-align, and the usual values are top, middle or bottom.
This is most commonly needed when a cell contains text and another cell on the same row contains an image. In that case the top of the image may be aligned with the bottom of the text (making the image seem almost as if it’s in its own row). To correct this, you need to specify the vertical alignment in all the opening td tags of the row, for example:
07. Horizontal alignment of cell content
As a rule, the content of each cell is left aligned by default. To change this, you need to specify one of the other options:
Don’t be misled by the name of the property: centering or right-aligning the content this way will work for images as well.
Note: there’s also text-align:justify, but justified text is highly unlikely to work well in a table cell (except if you only have very few very wide columns). More often than not, it will produce ugly gaps between words.
08. Padding inside each cell
Padding is the space between some content and the (visible or invisible) box that surrounds it. You may need to change the padding in a table, because the default might be too little or too much, or unequal while you want it equal (or vv). Excessive default padding on some themes is often the reason why the content doesn’t show up the way you think it should.
If you want the same amount of space around all four sides, you add one value; for example:
If you want a certain amount of space above and below the content, and a different amount of space left and right, you add two values; for example:
If you need a different amount of space on each one of the four sides of the content, you add four values; for example:
The four values apply clockwise from top.
You can also use three values (top, left&right, bottom).
For no padding at all, you replace the single value, or any of the multiple values, with a plain zero (without “px”).
09. Other styling inside each cell
The possibilities are too numerous to mention (you can find some of them in my posts on formatting text etc). One thing should be noted, however: amateurish instructions (including the slapdash WP doc on changing font color, size and font) may have taught you to use span tags for this purpose. As I’m pointing out in my Introduction to HTML as well as my posts on formatting text, this is correct only when you wish to change isolated characters, words or phrases inside a paragraph. If you wish to change the whole content of a cell, you don’t use span tags (or p tags or any other extra tag), you add the appropriate properties and values in the opening td tag, for example:
Same way in an opening tr tag, if you wish to change the whole row, or in the opening table tag, if you wish to change the whole table.
10. Background color
To add bg color, you use the background-color property with the desired hex color code, for example:
Same thing in an opening tr tag, to add bg color to the whole row, or in the opening table tag, to add bg color to the whole table.
You can also use it in a col tag (see section 4), to add bg color to a column. For example, to add bg color to the first column of a 3-column table, you can use this:
For palettes and color codes see the Hex Hub.
Some themes display tables with a colored bg by default (either for the whole table, or for every other row). If you’re using such a theme but you want no bg color, you need to write each opening td tag this way:
Or this way, if the theme displays borders as well and you don’t want those either:
11. Cells that span more than one column
To merge two or more cells horizontally, you use the colspan attribute:
In this case, the row that contains such a cell will have fewer td tag pairs, of course.
For example:
| ROW1 COL1 CONTENT | ROW1 COL2 CONTENT | ROW1 COL3 CONTENT |
| ROW2 COL1 CONTENT | ROW2 COL2 CONTENT | ROW2 COL3 CONTENT |
| ROW3 COL1+COL2 CONTENT | ROW3 COL3 CONTENT | |
12. Cells that span more than one row
To merge two or more cells vertically, you use the rowspan attribute:
In this case, the row(s) below the one in which the merged cell starts will have fewer td tag pairs, of course.
For example:
| ROW1 COL1 CONTENT | ROW1 COL2 CONTENT | ROW1 COL3 CONTENT |
| ROW2+ROW3 COL1 CONTENT | ROW2 COL2 CONTENT | ROW2 COL3 CONTENT |
| ROW3 COL2 CONTENT | ROW3 COL3 CONTENT |
13. Optional elements
A. The “caption” (that is, table title):
This tag pair is placed right after the opening table tag. The so-called caption will show up above the whole table.
B. Headings:
They can be used in any row in place of td tag pairs. The default styling of the text will be different than the default styling in normal cells (usually bold and centered).
C. Header and footer sections:
These tag pairs are used to mark initial and ending sections that may have different default styling than the main table (tbody tag pair). The thead and tfoot tag pairs are both placed after the opening table tag (and after the caption and col tags, if you use these).
So the order, if you use all the optional elements, would be this:
14. Images
To insert an image in a table cell, don’t insert it in a post then copypaste the whole code from the “Text” editor: some of that code is unnecessary, and some of it won’t work. Upload the image to your blog, but simply copy the file URL and use the HTML coding for images, with the required attributes only:
You can also add the appropriate class, if you need an image plus wrap-around text, or a centered image:
For a linking image, you enclose the image code in the code for links (second version will open in a new browser window or tab):
The width of the displayed version depends on the column width of the table. If the table has many columns, or if another column has a lot of text, the table may try to adapt by making the image column as narrow as possible. To display images in the relative width you prefer, you need to set the column widths yourself – see section 4.
wordpress tips 
Nicely done. Of course it would be so much better if we could create WP tables using CSS, but there you go…
Posted by billbennettnz | April 9, 2013, 22:35Would you be able to tell me exactly the code I should use for my theme (twenty eleven)? I have social media icons on the sidebar in a table but I can tell they’re not aligned equally. I am using this right now:
I have six icons in 3 col and 2 rows. I’d eventually like to align them in 6 col 1 row with reduced size and less white space. The simple table code isn’t generating the desired effect I’m looking for which is most likely due to what you said above: each theme has its own default styling for tables
I also have multiple image widgets on the side bar which I wanted to replace with a grid of images in a table. The way twenty eleven shows its image grid for Top Post & Pages widget is perfect. But I could not figure out how to generate the same grid using the table code manually.
Posted by ismailimail | April 10, 2013, 06:00@BB:
What do you mean by “create WP tables using CSS”?
@IM:
As I’m saying in the introduction, you don’t need a table to display six images in a row. And as I’m saying in section 14, you shouldn’t copy the image codes from a post. You need to remove the table coding, remove the paragraph tags, remove the classes, remove the width and height indications, and add the appropriate width using the style attribute. In short, you need this:
http://textsnip.com/060f72
Posted by Panos | April 11, 2013, 04:12@Panos – Inserting HTML tables into WordPress pages works fine – I’ve done it myself – but *in general* using HTML code to position items on web pages can be a problem. CSS is usually better at the job, but isn’t great for making tables.
Posted by billbennettnz | April 11, 2013, 07:07Well, it depends. I wouldn’t have any difficulty creating a table without table coding. As an example, I simulated the table you’ve got on this post:
http://billbennett.co.nz/2013/03/28/basic-ufb-plans-compared/
Code in the Text editor:
http://textsnip.com/bba15a
Code in the CSS editor (note – if I wanted this as a general model, I would use classes instead of IDs):
http://textsnip.com/29fa99
Try it and see. The result (on Twenty Twelve) is this:
But I don’t really see what the advantage is.
Posted by Panos | April 11, 2013, 14:57This is awesome. Thank you so much.
Posted by ismailimail | April 11, 2013, 23:30Beautifully done. Thanks so much for this excellent reference.
Posted by timethief | April 12, 2013, 17:30@IM: You’re welcome. See? some things can be done in a less complicated way.
@TT: Thanks – I think I can be proud of this article! I had been thinking of doing a table tutorial for quite some time, but never actually sat down to try it till now. Suddenly everything clicked. Partly thanks to all the questions in the forum!
Posted by Panos | April 12, 2013, 22:18Thank you, Panos!!! Up to now I had no idea how to make even a rudimentary table. This is a wonderful resource….
Posted by ingridcc | April 13, 2013, 10:06Thanks! But if you now know how to make a table, that doesn’t necessarily mean you need one.
Posted by Panos | April 16, 2013, 02:27Thanks now i know how to make tables in my blog because of you GOD BLess You :)
Posted by aamirlehri1 | April 24, 2013, 10:51This is an extremely useful tutorial. Why is this not part of the WP Help files? It took me an hour of searching and reading a lot of irrelevant files and messages before I found this gem through a link “Panos” left inside an answer to a WP user’s question that itself didn’t interest me too much. WP executives, PLEASE TAKE NOTE!
Posted by Erich Weingartner | April 26, 2013, 20:05@AAMIRLEHRI1: You’re welcome!
@ERICH: Thanks!
I’ve got lots of stuff that aren’t part of the ‘official’ Support docs. As an example, check the WP doc on custom menus:
http://en.support.wordpress.com/menus/
Compare with my own article on custom menus and see which one is more thorough:
https://wpbtips.wordpress.com/2011/12/19/custom-menus/
Posted by Panos | April 26, 2013, 20:15Brilliant guide, thanks very much.
Do you know how to set length of a row? I post videos to a table and they end up very narrow and long. I have the width set to 50% but would like to know how to set the length to make sure they appear in the correct aspect ratio. The page I am referring to is http://championtips.net/sports-humour/ so that you know exactly how it appears at present. Thanks.
Posted by championtips | June 7, 2013, 09:17Hi,
Of course I know how to set the length (=height). This is deliberately missing from my guide, because in most cases (including the one in question) the height should be auto, i.e. determined by the content, not by you.
What you’re trying to do is not correct: the result will vary, depending on the browser and browser version. For example, in Safari I’m seeing what you’re describing, but in Firefox I’m seeing full-width videos: left-side videos in the main column, left part of right-side videos in your sidebar, rest of them cut off.
What you need to do is downsize the videos themselves. Insert each video this way:
[youtube=URLHERE&w=300]
300 is just an example: change the number to adjust the size.
By the way, do the plus signs mean you’re going to insert 32 videos on that page? The page will take too long to load if you do that. You could publish separate pages instead, and turn them into a dropdown to a “Sports Humor” menu item. Or you could split the page into a series of numbered pages:
http://en.support.wordpress.com/splitting-content/nextpage/
Posted by Panos | June 7, 2013, 11:51Thanks for the reply, couple of queries:
1. When you say “300 is just an example: change the number to adjust the size” – where abouts is this number located in order for me to change it?
2. By the way, do the plus signs mean you’re going to insert 32 videos on that page? The page will take too long to load if you do that” – yes the plus signs mean I am going to insert more videos but obviously now under your advise, that is too many. What is the maximum number of videos I should have per page to ensure their is no slow down? Thanks for the link on creating more pages.
3. I am new to this wordpress thing, what additions and/or improvements should I make to my site to improve it overall, as I think it needs to be advanced / developed. Any assistance is greatly appreciated.
Posted by championtips | June 7, 2013, 12:09You’re welcome.
Sorry, I didn’t notice the editor ate up what I had written between “this way” and “300”. I edited the previous reply to make it show up. See here as well:
http://en.support.wordpress.com/videos/youtube/
“What is the maximum number of videos I should have per page to ensure their is no slow down?”
There’s no reply to this question, because it depends on how fast each visitor’s connection is. So the only thing I can say is the fewer the better.
Posted by Panos | June 7, 2013, 20:56Thanks for that, any other advice for overall improvement of my site?
Last question for the minute. Thanks again
Posted by championtips | June 7, 2013, 20:59Sorry, I help on specific issues or if I see a glaring mistake – the rest are mostly subjective.
The only veritable mistake I’m seeing is the blown up image in your image widget (I don’t suppose that’s intentional). Using images stored elsewhere isn’t good practice. Better copy the image to your computer, upload it to your blog via Media > Add New, click Edit, copy the image URL from the File URL of the Save module, use that URL in the widget.
Posted by Panos | June 7, 2013, 21:10Thanks for that Panos.
Is there a way to post a news feed directly to a page that automatically updates. I currently have sky sports news posting updates through the RSS Feed through the widget on the sidebar but would like it or something similar to post to the main body of a page.
Posted by championtips | June 8, 2013, 01:44You’re welcome.
But this is a post on table coding: we cannot turn it into questions and answers on any issue. You can ask about any issue at the WP forum:
http://en.forums.wordpress.com/
Posted by Panos | June 8, 2013, 13:58What a superb resource. I followed the advice and it worked – it took me several hours but I got there. The result maybe isn’t as impressive as it could be but I have a warm glow of satisfaction. Thank you!!!!
Posted by BookerTalk | June 15, 2013, 19:33You’re welcome!
A table is a set of data: it doesn’t have to be impressive (visually)!
A couple of remarks on this:
http://bookertalk.com/reviews/authors-a-h/
a) If I were you I would either decrease the font size or adjust the column widths, to avoid the line breaks in the “Date Read” column.
b) “Bainbridge” row, date cell: you’re missing the closing angle bracket after “td”, so this cell isn’t working and its content shows up above the table.
Posted by Panos | June 17, 2013, 11:47This is great and most helpful! I was struggling to format a table and now I’m not anymore! :)
Thank you so very much!
Posted by a ferreira | June 20, 2013, 15:51Is there an easy way to add rows in the visual screen. Like in Word where you tab past the last column and it adds a new row?
Posted by cbcseniors | July 12, 2013, 20:38My article is a thorough tutorial. If there was such an easy way, it would have been mentioned.
Posted by Panos | July 13, 2013, 03:32Need to set table column width that doesn’t change in latest version of WordPress.
Need equal widths. Above code has no effect. Need to remove css control of tables and use normal table code. Have tables of varying configurations. css complicates that.
Posted by Dzhugash | July 16, 2013, 19:59I don’t use visual editors because they change code.
Posted by Dzhugash | July 16, 2013, 20:01lifesaver!
Posted by ariflovesguitars | September 3, 2013, 22:36Thanks much for the great resource – this be bookmarked and I will use it to fine tune the table I just put in a couple of days ago to make the table look like I wanted it to look (make the divider lines more prominent
Well done as always – thanks again for the help & resource
Posted by captnmike | November 3, 2013, 22:13You’re welcome, Mike, and thanks!
Note I added a suggestion here:
http://en.forums.wordpress.com/topic/formatting-table-problems?replies=8#post-1509809
Posted by Panos | November 6, 2013, 13:06how to change the display color on comments that could be colorful. I use the black theme leterhead. and my blog is on http://jitu99.com
please help me..
Posted by angkajt | November 29, 2013, 22:26Hi Mike,
Thanks for a great, comprehensive post. I can’t seem to get a simple table to behave in this wordpress post:
http://nicholasrobertlim.wordpress.com/2013/12/15/bench-warfare-published/
I want the buttons to appear alongside the cover image, on the right. But the button images appear to be aligned to the bottom of the row with the cover image in. Here’s the simple HTML. What am I doing wrong?
http://textsnip.com/en5qvf
[Code removed – P.]
Posted by Nicholas Lim | December 19, 2013, 02:22PS you’re approach in your first tutorial using Divs works, but I still don’t understand why the table above doesn’t work…
Posted by Nicholas Lim | December 19, 2013, 03:19I’ve had to remove the post but here’s another page with the issue on it:
http://wp.me/P4aMyY-27
Posted by Nicholas Lim | December 19, 2013, 19:33a) Mike is a fellow forum volunteer. I’m Panos!
b) When you’re talking about a published post or page, you don’t need to paste the code here or anywhere: I can see the code.
c) If my post is comprehensive, then why don’t you read it? Under “Making changes” you can see that you shouldn’t use the valign attribute, and under “Vertical alignment of cell content” you can see what you should use.
Posted by Panos | December 20, 2013, 07:17