Using Tables With The FCK Editor – WP Tutorial

Using Tables With The FCK Editor - WP TutorialHey Everyone,

I've been getting a lot of requests for a basic tutorial on how to use the table feature of the Dean's FCK Editor to create page elements like a Features and Benefits table ad client testimonial.  So without further ado:

Jump To Video

First We Have Table Properties

Inserting a table is as simple as clicking the icon.  The menu that displays controls the tables properties and display settings.  PLEASE NOTE: To access the table properties after you insert it into the post, right click on the table and select "Table Properties".

  • The number of Row(s) and Column(s) values are self explanatory, but I do want to recommend taking a minuet to think through the object you want to create.  As you'll see, in some cases you'll nest tables inside of tables.
  • The Width and Height values are also obvious, but many of you may not know what the difference is between pixels and percent.  Think of pixels as a specific unit of measure with defined increments.  The percent option of the other hand will calculate the width using its outside container as the reference point.  In other words, if my content container was 1000px wide, and we insert a table at 90% wide, the width would calculate  to be 900px wide.
  • Headers are special rows and columns designated for labeling a the chart (table).  Because I don't think you'll use this all that much, I choose to skip it in this tutorial, but please, feel free to give it a go.
  • The Border value is defined in pixels; so a value of 1 means a border 1px wide.  Increasing the number value will increase the boarder thickness, and a value of zero (0) means no border at allLET ME STRONGLY SUGGEST… While editing your content, keep a border value of at least 1 so you can see it in the visual editor.  Then before you publish the content, update the boarder value to 0.
  • The default Alignment value is right.  If you want it centered make sure to explicitly set it to Center
  • A table is divided up into rows and columns that create boxes.  Those boxes are called Cells.  The Cell Spacing and Cell Padding values are defined in pixels and represent the distance each cell is away from the other and the distance the border is away from content the cell contains respective. 
  • You probably wont use the Caption and Summary values all that much, but again, feel free to play around with them.

And Then There Are Cell Properties

In addition to table properties, the individual cells have their own set of values you can tweak to further customize the look of the table:  PLEASE NOTE: To access the cell properties, right click INSIDE the cell you want to modify.  Go to Cell -> Cell Properties.

  • Again you have a Width and Height PropertyLET ME STRONGLY SUGGEST… if you want to explicitly define a column width, modify the top most cell of that column; this will set the width for all the cells below it as well.
  • The Word Wrap, Cell Type, Row Span, and Column Span can all be left as is in 99% of the cases
  • The Background Color value obviously does what it says.  The plug in only provides a few options but you can put almost any value you want to in there.
  • The Border isn't much use and, (Between you and me) should go on the Table Properties menu not the Cell Properties. 
  • Horizontal and Vertical Alignment tell the cell how to position the content it's holding.  The default position is the middle and center of the cell, but you can change it to align at the top, bottom, left, and right as well.

Some Good Things To Keep In Mind

  • 5 – 15 are good values for Cell Padding.
  • If your in your visual editor and you can't see to get your cursor below a table (if it's at the end of your content for example), Switch to your Source view, scroll down to the bottom, insert some dummy text below the </table> tag and switch back to your visual view
  •   Make sure you table and cell widths work out mathematically!  You can't set a two column table width to 500px and then set each cell to 300px wide.  Just wont work.
  • If you want to set a column width, all you have to do is set the top most cell width of that column.
  • While editing your content, keep a border value of at least 1 so you can see it in the visual editor.

And Of Course, The Video…

 

This text will be replaced

 


Comments

  1. Dario says:

    Hi!
    Can You help me to find NextGEN icon in FCK Editor, so I can manage galerys, or I can use that solution only in Tiny advanced

    thanks a lot
    Dario

  2. Mark Buzan says:

    I'm trying to build a table but I don't understand the rowspan and colspan commands can you help?

Speak Your Mind

*

CommentLuv Enabled