Actions

J1.5

Difference between revisions of "Add a table: Joomla! 1.5"

From Joomla! Documentation

(Adding and editing tables)
(Adding and editing tables)
Line 13: Line 13:
  
 
<div style="border:thin solid green; margin-left:50px; background: #f5f5f5;  width: 80%;">
 
<div style="border:thin solid green; margin-left:50px; background: #f5f5f5;  width: 80%;">
 +
'''Using HTML code'''
 
:To see the HTML code - click the edit code icon [[Image:EditCode.png]] .
 
:To see the HTML code - click the edit code icon [[Image:EditCode.png]] .
 
This changes the editor display from shoing just the text and layouts to allowing you to edit the HTML code.
 
This changes the editor display from shoing just the text and layouts to allowing you to edit the HTML code.
Line 21: Line 22:
 
</div>
 
</div>
  
'''The best tip''' - keep it simple to start with and don't over-use tables for layouts as they slow down the display of the pages
+
'''The best tip''' - keep it simple to start with.
  
 
=== Create a table ===
 
=== Create a table ===
Line 33: Line 34:
 
::Place the cursor where you want the table to be located in the article
 
::Place the cursor where you want the table to be located in the article
 
::Click the create table icon
 
::Click the create table icon
<div style="border:thin solid red; margin-left:50px;  width: 50%;">
 
screen of the dialog box
 
 
 
</div>
 
  
 
A dialog box appears to enable you to define some of the characteristics of the table. In the dialogue box:-
 
A dialog box appears to enable you to define some of the characteristics of the table. In the dialogue box:-
Line 45: Line 41:
 
::Click create
 
::Click create
  
If you have entered a width, the result on the screen is an empty table. Otherwise the rows and columns only expand when text or data is added.
+
If you have entered a width, the result on the screen is an empty table. Otherwise the rows and columns are squashed together and only expand when you add text or data.
  
 
Look at the icons along the top of the editor - those that allow you to do things to tables will have become active.
 
Look at the icons along the top of the editor - those that allow you to do things to tables will have become active.

Revision as of 05:46, 27 December 2010

Replacement filing cabinet.png
This Namespace has been archived - Please Do Not Edit or Create Pages in this namespace. Pages contain information for a Joomla! version which is no longer supported. It exists only as a historical reference, will not be improved and its content may be incomplete.
Quill icon.png
Content is Incomplete

This article or section is incomplete, which means it may be lacking information. You are welcome to assist in its completion by editing it as well. If this article or section has not been edited in several days, please consider helping complete the content.
This article was last edited by LornaS (talk| contribs) 3 years ago. (Purge)

Contents

Index to the other documents in this series

Adding and editing tables

A table is useful for presenting tabular information. Some people use them to help layout pages, especially those with illustrations. There is no icon for adding a table on the simplest editors, so you cannot try this using the sample data on localhost.

  • Tables can be tricky and you need some experience to do this.
  • Adding a table may seem cumbersome if you are used to using a word processor or spreadsheet. It uses code (HTML) behind the scenes and is less flexible than a word processor.
  • You can copy tables from spreadsheets and word processors but it does not always give a good layout. If you have the experience, you may need to edit the HTML code in order to get a good layout.

Using HTML code

To see the HTML code - click the edit code icon EditCode.png .

This changes the editor display from shoing just the text and layouts to allowing you to edit the HTML code.

If you know enough HTML, you may find it easier to get the layout to your liking using the code.

If you are a novice - don't! - or at least not yet.

The best tip - keep it simple to start with.

Create a table

Beware - Do not insert a table on the very top line of a page because it upsets the layout and pushes the table off screen to the right of the page!

Before you create a table:-

Write some text (or press Enter) on the first line of the article

Now you can do it:-

Place the cursor where you want the table to be located in the article
Click the create table icon

A dialog box appears to enable you to define some of the characteristics of the table. In the dialogue box:-

Define the number of horizontal rows and vertical columns
Enter a Width (This will present the table in the editor in a helpful way, so that you can see the cells. If you do not enter a width - the cells are squashed together and are hard to populate.
Fine tune the rest - such as adding a 1 for the thickness of the borders. (A zero does not show any borders)
Click create

If you have entered a width, the result on the screen is an empty table. Otherwise the rows and columns are squashed together and only expand when you add text or data.

Look at the icons along the top of the editor - those that allow you to do things to tables will have become active.

Getting a table to look as you wish usually is a case of trial and error. (While you are editing you will probably need to use the undo icon (little round arrow) - (or control Z on your keyboard)

Editing the table's properties

Highlight the table
Select the Insert/Edit icon
Make changes to such things as border widths.
Look under the Advanced Tab. You can change the border and background colours here.

Change rows, columns or cells

There are icons on the editor for doing most of the formatting you may need. You can make text appear to the right, centre or left or to the top, bottom or centre of the cell - just as you can using a word processor

Position the cursor in the row or cell you wish to change
Click on the "table row properties" or "table cell properties" icon as appropriate
Change the settings in the dialogue box
Click update

To add a row

Position the cursor in one of the cells
Click either the "insert row before" icon or the "insert row after" icon as appropriate

To delete a row

Position the cursor in one of the cells
Click the "delete row" icon

To add a column

Position the cursor in one of the cells
Click either the "insert column before" icon or the "insert column after" icon as appropriate

To delete a column

Position the cursor in one of the cells
Click the "delete column" button

To merge cells

Highlight the cells to be merged using the mouse
Click the "merge cells" button

To split cells

Highlight the cell to be unmerged
Click the "split merged table cells" button

Links to more about tables


--Lorna Scammell December 2010