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

Email:  This email address is being protected from spambots. You need JavaScript enabled to view it.

31 Hartington Rd, Nottingham NG5 2GU

LJN Web Design Logo

We use cookies to improve our website and your experience when using it. Cookies used for the essential operation of the site have already been set. To find out more about the cookies we use and how to delete them, see our Privacy Policy.

I accept cookies from this site

EU Cookie Directive Plugin Information