Training

How to Use Tables

If your website has the Table Buttons plug-in, here are some tips on how to use it. It functions similarly to tables in Microsoft Word.

How do you know if you have the Table Buttons?

Table Button in WordPress

Take a look in your Editor options and see if you have an icon that looks like the image above. If you do, you have Table Buttons.

Adding a Table

Click on the table icon. Menu options will appear. Hover over “Insert Table” and drag out how many columns and rows you want your table to be.

Table Buttons in WordPress

Editing Table

When your table has been inserted into the content area, you’ll notice that it’s squished itself to be the smallest size possible. This can make adding content a bit difficult. The easiest way to do this is to set the table width.

  • Click into your table. This will highlight it. Once the table is highlighted, go back up to your table icon and click on it. This time, select “Table Properties”.Adjusting Table Properties
  • We recommend setting the width of your table with percentages. This will ensure that your table will adjust with the width of your site if it is a mobile responsive website. Also add some “cell padding” to your table as well. This helps keep the content in the table cells from bumping into one another making it difficult to read.table-properties-2
  • Now your table is ready for content. You can add and style content as you normally would, adding heading tags, bullets, etc. (Note: Sometimes the formatting of the content in the table looks a little bit different than the content outside the table. Best practice to use the “Preview” to make sure everything is looking how you want it.)Adjusted Table in WordPress

Adjusting Table Cell Width and Height

If you want to force a table cell to be a certain width or height to fit content, you can do so by using “Table Cell Properties”.

  • Select a cell or highlight cells you’d like to change. Click on the Table icon, hover over “Cell”, and select “Table Cell Properties”.Adjusting Table Cells
  • From here you can adjust the width and height of the cell(s). It is recommended to use percentages for the width – again to help keep your content responsive if your website is responsive. You can add a fixed height if you need to, though this can keep your table from growing taller if it needs to. tablecell-2
  • Once you have everything adjusted to the way you’d like, click “OK” and you’ll see your table adjust to the new properties.tablecell-3

Adjusting Content Alignment Within Cell

By default, your content is going to be left justified (horizontally) and centered (vertically) within the table. You can adjust this in the same “Table Cell Properties” options from above.

  • Select a cell or highlight cells you’d like to change. Click on the Table icon, hover over “Cell”, and select “Table Cell Properties”.contentalign-1
  • Use the “H Align” to change content to left, right, or center justification. Use the “V Align” to move your content to the top, middle, or bottom of the cell.
  • contentalign-2  contentalign-3
  • Once you have everything adjusted to the way you’d like, click “OK” and you’ll see your table adjust to the new properties.contentalign-4

Adding Borders and Background Colors to Table

There are 2 options when adding tables to borders. You can do so within the “Table Properties” (where we adjusted the width of our whole table) or within the “Table Cell Properties” (where we adjusted individual cell properties). The difference being:

  • Table Properties: Adds border and background color to entire table and table cells
  • Table Cell Properties: Adds border and background color to individual cells

How to Style

  • Select or highlight a cell within your table. Click on the Table icon in the Editor options and go to “Table Properties” (or “Cell” > “Table Cell Properties” if adjusting an individual cell).tableborder-1
  • Under the “General” tab, put “0” into the Cellspacing option. This keeps your table border in 1 line. Otherwise, you may get a double border. Now adjust the border option. For this table, we used “1”. The number indicates how thick you’d like your border to be. “1” is a 1 pixel border.tableborder-2
  • Next go over to the “Advanced” tab. Here is where you adjust the colors for your border or background. If can either type the hex number in or if you click the box next to the hex number field, a color picker will appear. (You’ll notice the “Style” populate automatically.)tableborder-3
  • Once you’ve decided how you want your border and background to look, click “OK”.tableborder-4

Additional Table Options

These work very similar to Microsoft Word. Select a cell or highlight cells to adjust.

  • Merge/Split Cell
    • Cell > Merge Table Cells / Split Table Cell
  • Row Options
    • Add/delete rows
    • Adjust table row properties
  • Column Options
    • Add/delete columns