sasit_banner

Home Documentation Web Development FAQ Joomla! Questions Joomla! 3.x Articles Adding and Formatting Tables within an Article (Joomla! 3.x) - Basic Editing

Adding and Formatting Tables within an Article (Joomla! 3.x) - Basic Editing

This procedure explains how to create and edit tables within articles on web sites using Joomla! 3.x and the JCE Editor component.


 

Adding a new table

1.   Open an existing article or create a new article.

2.   Using the WYSIWYG editor, click on the drop down menu to the right of the Inserts a New Table button:

insert table

3.   Select the most appropriate size for your table; you may add and remove both columns and rows later. (if your table will be much larger than 4 rows by 4 columns, you can click on the Inserts a New Table button itself and enter a specific amount of rows and columns).  Initially, the cells will appear as very small, but they will automatically expand as you type text in them.

Note: When navigating the cells in the table, use the mouse to click from one cell to another, or use the arrow keys on your keyboard.  Be careful to avoid typing the "Enter" key inside your table; this will introduce new paragraph markers that will distort the formatting of your table.

select-size

 

Inserting and deleting rows and columns

To add or remove rows and columns, you can use the buttons located to the right of Inserts a New Table:

  • To add a row above an existing row, click inside a cell in the existing row, then click the Insert Row Before button (see #1 below):
  • To add a row below an existing row, click inside a cell in the existing row, then click the Insert Row After button (see #2 below):
  • To delete an existing row, click inside a cell in the existing row, then click the Delete Row button (see #3 below):
  • To add a column to the left of an existing column, click inside a cell in the existing column, then click the Insert Column Before button (see #4 below):
  • To add a column to the right of an existing column, click inside a cell in the existing column, then click the Insert Column After button (see #5 below):
  • To delete an existing column, click inside a cell in the existing column, then click the Delete Column button (see #6 below):

Adding and removing table rows and columns

 

Adjusting the size of cells in your column

  • Click inside one of the cells in your table.  If you want to widen one column only, click on a cell in that column.  If you want to widen all columns in the table, click inside any cell (see #1 below).
  • Click the Table Cell Properties button, found on the third editing toolbar (see #2 below).

    Table: Cell Properties

  • In the Width field (see #1 below), enter either a number (for the width in pixels) or a percentage (for a width equivalent to a percentage of the entire table width).  For example, if you enter "30" for width, it will make the cell 30 pixels wide.  If you enter "30%" for width, it will make the cell 30 percent of the total table width.  Be careful when entering the width in pixels; if the total width of all the columns is too large, the right side of the table will be truncated.  If you are entering percentages, make sure the total of all the columns does not exceed 100%; otherwise, the table may become distorted.
  • To only change the width of the column selected, leave the dropdown menu in the lower right at the default selection of Update current cell (see #2 below).  (Note that if you adjust the width of one cell in a column, the width of all the cells in that column will automatically be adjusted to the same width).
  • To change the width of all columns in the table, select either Update all cells in row or Update all cells in table (either selection will have the effect of adjusting all cells in the table by the same amount).
  • When done, click Update to the lower right (see #3 below).

    Table properties dialog box

 

  • If you are editing the article from the front end of the web site, click the Save button to the upper left to save your changes and close the article.
  • If you are working in the Joomla! Administrator, to save your changes and continue editing the article, click the Save button to the upper left: Save button
  • If you are working in the Joomla! Administrator, when you are done editing the article, click the Save & Close button to the upper left: Save & Close button

Contact Us

scotthall Scott Hall (Main Office)
43 College Avenue
New Brunswick, NJ 08901
(848) 932-2126
This email address is being protected from spambots. You need JavaScript enabled to view it.