translogo Joomla Specialist Nottingham

Call:  0115 9621218

JCE for Joomla - Creating a Table

JCE for Joomla - Creating a Table

Firstly, if you are planning on using tables to display tabular data and you want to be able to add table captions (ideal if you want to have your tables accessible to users who use screen readers), you can only do this if you set up the Doctype to HTML5 in the JCE Editor Global Configuration. Access this from your Components > JCE menu item > Global Configuration.

JCE global config


Tables SHOULD ONLY be used for conveying tabular data, not presentational (layout) use.

If you wish to apply a caption to your table you SHOULD use a caption tag to do this, e.g. source or copyright of data or some text to describe the contents of the table – very good for people who use screen readers. You can then type into the caption cell like a normal table cell. See above.

If you wish to supply a title to your data you MUST use a heading tag, so as to enable navigation to the table within the page by screen readers. Table headings are defined with the tag <th>.

Do not use your normal h1 to h6 tags to make your headings bigger or bolder.

By default, all major browsers display table headings as bold and centred but this may be over-ridden by the styles in the template style sheets.

To create a table, first take note of how many rows and how many columns you will need. If you make a mistake here, it’s not really a problem as you can insert/delete rows and columns later. Use the Table tools in the JCE toolbar and select the Insert Table Tool.

insert table tool


Type in how many rows and how many columns you want, alignment left, right or centred, tick the border (just to make it easier to see in the editor), tick the Caption checkbox, put your width as a % - in this case I’m using 100%.

table general properties

Now switch to the Advanced Tab and type: table table-bordered table-striped into the Classes box. (These are bootstrap styles). Click Insert.

table advanced properties


Your empty table now appears in the editor.

empty table


Place your cursor somewhere just above the table and you can enter your Caption here (optional). Type in your content and headings in all the table cells.

content in table


Now we need to format the content.

Place your cursor in the top left cell and right-click. Select Table Row Properties.

select table row properties


Select Table Head from the drop-down list ‘Row in table part’.

table head


Now right-click in each of the top row cells and choose Cell – Table Cell Properties. Pick Header in the Cell Type and Save, then OK.

cell header


When you’ve done this to all the headers, save your article and see what it looks like from the frontend.

finished table


Finally, I added some styling to my custom stylesheet:

thead th {

background-color: #006DCC;

color: white; font-size: 110%;


caption {color:#006DCC; font-size:95%;}


And now my table looks like this;

table with custom styling

Get In Touch

Joomla Specialist Nottingham

Tel:  0115 9621218

Mb:  07775 510326

12 Redhill Lodge Drive, Redhill,  Nottingham NG5 8JH

LJN Web Design Logo