What's The Best Way To Make a Table In WordPress

You could use this plugin: TablePress

While I agree that TablePress is an excellent plugin with regards to creating tables, I would rethink your design about the use of a table on that particular page.

Tables are great for displaying data in an organized format, but most designers use DIVs combined with CSS instead of tables for the type of layout that I think you want. The one bad thing about using tables is that you can’t float images in a way that text wraps around them naturally.

Another bad thing is that table cells won’t re-align properly like DIVs when the view port resizes, meaning it won’t look good on a mobile devices, an important consideration given how many people access the internet on a smart phone or tablet nowadays.

Learning how to use DIVs along with CSS can seem somewhat intimidating, but it’s easy once you get the hang of it. It will make your site a lot better looking, more responsive, and easier to maintain than tables. There’s a good CSS tutorial on W3Schools if you want to learn the basics of CSS.

Here’s a sample page I whipped up to show you how your page would look using DIVs for your images. I’m not sure I got all the picture placements correct, but the important thing to notice is how the text flows around the MAX CAM image, especially when the browser is resized. The two images which are side by side will also collapse, one below the other, at a narrow view port. A table would not be able to do that.

If you take a look at the source code, you’ll see that the code is a lot simpler, too, without all the coding for a table; you just stick the img tag inside a DIV and give it a “float” value of left or right, depending upon whether you want the picture to appear on the left or right.

Hey guys, thanks for the responses. Since I posted the question, I tried the TinyMCE Advanced plugin and it displays well on the wordpress edit page screen but not the browser (chrome).

I also went live with the new version of my website last night (10/21/13).
I checked out your sample page CrouchingBruin, but to me it still doesn’t really have the look I’m going for. I also am far from fluent in php coding.

The new addresses for the pages I desperately need good tables on are https://shootingtime.com/mathews-archery/ and https://shootingtime.com/bow-tuning/timing-a-bow/.

With dreamweaver, inserting a table that displays properly was easy, but not the case with wordpress… Still looking for an easy solution. Thanks for the help.

Corey

I also am far from fluent in php coding.

No PHP is needed. Using DIVs is just straight HTML, like table tags, although you do need to know CSS in order to position them properly.

If you still want to go with a table, just know that you will have a difficult time with the responsiveness, i.e., your page is going to stretch out such that mobile users will have to scroll to the right, and your text may not fit within the margins correctly. Perhaps a minor issue.

So I take it that you can’t really make a table responsive with width percentages instead of a fixed pixel value? The pages I listed have html tables in them and you can see that those are generated correctly even on a desktop. Still scratching my melon.

Well, it could be that a table is what you need, I just can’t tell from the page how you want the text & images organized. In general, the only time you would use a table is to display tabular data, i.e., stuff that is normally arranged into rows and columns.

Yes, you can get the table to change width by setting the width of the columns to a percentage instead of a pixel value. However, let me illustrate what could happen. Suppose you create a table with one row and two columns. In the left cell, you put some text; in the right cell, you add an image. You get it sized correctly so the lines of text match up pretty well with the height of the image, there’s no or very little empty white space below either the text or the image.

Then you make your browser narrower so you can mimic the view port size of a tablet or smart phone. The width of the cells get narrower in proportion, but the cell with the text will grow taller, because the cell will have to accommodate the same amount of text. The cell with the picture will also get taller, because it has to stay the same height as the text cell. The image itself, though, will get smaller (or maybe taller & thinner), depending upon how you set the styling), so you’ll get a bunch of empty white space below the picture.

If you want to give a table a try, let me know how the images and pictures are supposed to be arranged and I can try to help you work it out.

Here’s one link https://web.archive.org/web/20120429225831/https://www.shootingtime.com/mathews-compound-bow-specs.htm

And the other https://web.archive.org/web/20120405115623/https://www.shootingtime.com/timing-a-compound-bow.htm

Have done some more researching and hear that some plugin with the word dean in it works well. Let me know what u think. Thanks

OK, now I can see what it’s supposed to look like.

I updated my sandbox page using the source from the link you provided. It wasn’t too hard, and I didn’t need to use a plugin, I just copied over the straight HTML. Is this the effect you’re trying to get?

You can see my source code in this Pastebin. The top part of the code has the CSS styling for the table border color and some padding. Once you get the layout the way you want it, you use CSS for the styling (appearance).

Here are some simple things you can do on your Timing a Bow page to get the table to display correctly (you can worry about things like border color later):

1. Change width on the table tag from 700px to 90%.
2. In the first td tag, add a width attribute of 47%.
3. Copy & paste the following CSS script at the very beginning of your page (make sure you are using the Text editor and not the Visual editor). This will get the contents of the table cells to align at the top:

   <style>
   #post-139 td {
      vertical-align: top;
   }
   </style>