Tackling Tables in

PURPOSE OF THIS DOCUMENT

This document will assist you in building tables and tackling table issues in Joomla! After reading this document,
you should have a better understanding of tables and table issues in Joomla!, as well as, a better appreciation of
how tables can help you organize your content.

The first thing that you need to understand is there is no single right answer to every problem. Because Joomla! is
a web-based tool, many of the problems that will be addressed by this document are web browser dependent
issues or are dependent on the version of Microsoft Word that you have on your computer (assuming each person
uses Joomla’s Paste from Word functionality). As a result, not all of the solutions presented here will be helpful to
everyone, but they should be helpful to a large majority.

As always, if you encounter a problem that you are unable to resolve, please visit
http://www.sph.unc.edu/helpme/ and submit a UNC-CH Remedy Help Ticket to: Manage School of Public Health
website content.

AN INTRODUCTION TO TABLES

Tables created on the web are very different from tables created in a word processing application, like Microsoft
Word. In this section, we are going to start by giving you a different point of view, by examining a key difference
between tables on our web site and tables in Microsoft Word.

Let’s look at how tables are created and edited. In Microsoft Word, you can create and/or modify a table’s layout
by editing columns and rows in a table, but in Joomla!, you create and/or modify tables by first editing the rows in
a table because you cannot edit columns, only individual cells within a column. The example below should help
illustrate:

Column A Column B Column A Column B

Figure 1: Tables In Word Figure 2: Tables In Joomla!

Tackling Tables in Joomla! 18-Feb-08 Page 1

Tackling Tables in

BUILDING A TABLE

Building tables on the web, as well as, building them in Joomla! come with their own set of issues, which are
different from tables in a word processing application, like Microsoft Word. However, even with all of their
differences, building tables in Joomla! can be rather simple as long as some proper planning is employed before
you create your table. In this section, we are going to examine how to create a table, and more importantly, how
to properly modify a table to suit your needs.

STEP 1: ADDING TABLES TO THE CONTENT

1) You can add tables to content in the Joomla! by selecting the “Insert Table” button.

Insert Table

2) In the Insert Table dialog box, enter the requirements for your table. You can view a style preview of your
table at the bottom of the dialog box.

Rows & Columns – Tables on the web consist of

rows and cells. Entering the number of rows
and columns your table requires will allow
Joomla! to properly build your table translating
it into rows and cells.

Width & Height – Specifying the width and

height on your tables can make your pages
easier to control. There are two ways of
marking the width and height of your tables.
One way is by specifying a certain number of
pixels. The other is by marking the width and
height using percents. Pixels will make it your
table a fixed length. Percents will take up a
certain percent of the content area, and will
change with the size of the user’s browser
window or screen resolution size.

Cell Spacing - Cell spacing controls the distance between the cells.

Cell Padding - Cell padding controls the distance between the text in the cell and edge of the cell.

Tackling Tables in Joomla! 18-Feb-08 Page 2

Tackling Tables in
Border Size - Putting a border on your table, means that each cell has a small border surrounding it. This
can be helpful to your viewers by making the table more organized by using these dividers.

Border Collapse - This property specifies whether your table cells will share borders or have their own
distinct borders.

Background Color – This property specifies the background color of the table.

Border Color – This property specifies the border color of the table.

3) Choose “OK” when you are done, and the table will be inserted into the page.

STEP 2: MODIFYING A TABLE USING TABLE, ROW AND CELL PROPERTIES

1) You can modify an existing table at any time by placing your cursor in the row or cell that you want to
modify, and select the “Table, Row and Cell Properties” button. You can also access more table formatting
options by right-clicking your mouse inside a table.

Table, Row and Cell Properties

Table Shortcut: You can also access this and other table functions by right-clicking
your mouse inside a table after your cursor has been placed in a row or cell that you
want to modify.

Tackling Tables in Joomla! 18-Feb-08 Page 3

Tackling Tables in

2) In the Table, Row and Cell Properties dialog box, select the corresponding tab at the top of the screen
based on what you want to modify: This Cell, This Row, or This Table. Each tab has different options based
on what you are choosing to modify. Each tab will also contain a style preview of your table at the bottom
of the dialog box to allow you to view some of your changes. Each tab and their options are listed below:

This Cell

Cell Size:
Width & Height – Specifies the width and height of
your cells, either in pixels or percent.

Text Alignment:
Vertical Alignment - Controls the vertical orientation
of text within a given cell.

Horizontal Alignment - Controls the horizontal

orientation of text within a given cell.

Borders and Shading:

Background Color – This property specifies the
background color of the cell.

Background Image – This property takes an image

and makes it the background color of a cell.

This Row

Text Alignment:
Vertical Alignment - Controls the vertical orientation
of text within a given row.

Horizontal Alignment - Controls the horizontal

orientation of text within a given row.

Borders and Shading:

Background Color – This property specifies the
background color of a given row.

Tackling Tables in Joomla! 18-Feb-08 Page 4

Tackling Tables in

This Table

Spacing and Padding:

Cell Spacing - Cell spacing controls the distance
between the cells.

Cell Padding - Cell padding controls the distance

between the text in the cell and edge of the cell.

Table Size:
Width & Height – Specifies the width and height of
your cells, either in pixels or percent.

Alignment:
Alignment on page – Controls the horizontal
orientation of table on the page.

Borders and Shading:

Border Size - Putting a border on your table, means
that each cell has a small border surrounding it.

Border Collapse - This property specifies whether your table cells will share borders or have their own
distinct borders.

Background Color – This property specifies the background color of the table.

Border Color – This property specifies the border color of the table.

Background Image – This property takes an image and makes it the background color of your table.

3) Choose “Apply” when you are done, and the table will be updated.

STEP 3: INSERTING OR DELETING A COLUMN OR ROW

You can insert or delete a column or a row by placing your cursor either in the column or row next to the column
or row you wish to insert or in the column or row you wish to delete. You can also access more table formatting
options by right-clicking your mouse inside a table.

STEP 4: MERGING / UNMERGING CELLS

You can merge or unmerge cells by placing your cursor in the cell you wish to merge/unmerge. Joomla! will allow
you to merge/unmerge with any cell that is to the right or below the cell you place your cursor in. You can also
access more table formatting options by right-clicking your mouse inside a table.

Tackling Tables in Joomla! 18-Feb-08 Page 5

Tackling Tables in

BEST PRACTICES: HOW TO REDUCE PROBLEMS WITH TABLES

This section will outline some best practices to use to reduce problems with tables in Joomla!

BUILD TABLES IN JOOMLA!

It is strongly encouraged that users build their tables in Joomla! rather than building their tables in Microsoft
Word, and using “Paste from Word” to move them to Joomla! Tables built in Microsoft Word, typically do not
translate over well into Joomla!, and users will usually be unable to modify the table, if necessary later.

USING A TABLE BORDER TO BUILD YOUR TABLE

When creating and modifying a table, it is highly recommended that you use a table border to prevent problems
during the editing process. Table borders give you a quick perspective not only on how your table looks, but how
your content looks in relation to the table around it. Are all your cells aligned correctly? Do you have the same
amount of spacing inside each of your cells? It is highly recommended that you always use a border when editing a
table, and then, if needed, remove the border when you are done.

Table, Row and Cell Properties

How do you correct the problem?

If you need to edit a table the border has been removed from, simply place your cursor inside the existing table
and select the “Table, Row and Cell Properties” button, or right-click your mouse inside the table and select the
“Table, Row and Cell Properties” option. In the Table, Row and Cell Properties dialog box, select the “This Table”
tab and place a number in the Border Size field. Choose “Apply” when you are done.

ISSUES FROM TROUBLESHOOTING IN JOOMLA! STILL MUST TO BE OBSERVED

Issues discussed in the Troubleshooting in Joomla! document still must be observed when tackling tables in
Joomla! You will see many of these issues arise while creating and modifying tables since many of the problems
that were addressed by this document were web browser dependent issues.

Tackling Tables in Joomla! 18-Feb-08 Page 6