RealEstate Web Design
 


Knowledgebase

Creating/modifying a table using the online editor


Problem:

How do I create/modify a table using the online editor?



Solution:

Creating and formatting tables represents a more advanced form of text formatting.
In an online editor window, select the placement of the table (click a spot with the left mouse button) and click the Insert Table button (the 14th button on the second line of the editor toolbar with a table on it). This action will open a popup window. Enter the necessary parameters to create a new table: the number of rows and columns which will determine the number of cells (fill in the two fields on the right Rows and Cols? respectively) and the width of each cell (fill in the Width field and use the drop-down menu next to it to set the measurement unit e.g. percent, pixels).
You also have the tools to customize the layout: the alignment of the table by selecting your option from the drop-down menu and the border thickness by filling in the field beneath it, as well as the spacing: cell spacing and cell padding respectively by filling in the two fields at the bottom right of the window. The cell spacing specifies the amount of spacing between each table cell, not including the border and the cell padding represents the space between the contents and inside edges of a table cell.
After you have finished inputting the table characteristics, click on the Ok button. The popup window will close and the table will be inserted in the online editor.
So now you have a table ready for your data.
You can enter both text and images in any cell. You can align and format the text in the table the same way you would work on a normal piece of text (the same applies to the images). (For more details, check the visual tutorials How to: Use the online editor- Basic operations, text formatting and How to: Use the online editor-Image editing )
Clicking the right mouse button inside a cell will open an editing menu containing various tools: Paste, Cell Properties, the Row group: Row properties, Insert Row Before, Insert Row After and Delete Row, 'table Properties?, the Column group: Insert Column Before, Insert Column After and Delete Column, the four Justify buttons: Left, Center, Right and Full and last, the ?Remove the <TD> element? (pressing this button will remove the formatting of the cell content).
Left click on Cell properties to format the table cells. This action will open a popup window which you can use to customize the width and the height of each cell by filling in the appropriate fields (choose a measurement unit from the drop-down menus on the right of the two fields), the text alignment and the vertical alignment (use the drop-down menus on the right of the popup).
Using the 'style[CSS]? form, you can customize the background color of the cell and the color of the text, clicking the two buttons Background (you can also choose a background image by entering the URL in the Image URL field ) and "FG color." Also, you can choose between border options (dotted, dashed etc.) and set its color. Each of these three buttons has two parts: an ordinary gray button (by clicking it you will open a color palette - click on the desired color) and a smaller button marked with an X for deleting your color option.
When all the properties are set, click OK.
The Row properties dialog box has the same options as the Cell properties and works the same.
You can edit properties the entire table from the Table properties buttons. Clicking it will open a popup window. Fill in the first two fields with a Caption (a title that will appear above the table) and a 'summary? for the table. The next form is for editing the table layout: the Float drop-down menu (none, left and right ? tables are said to float when their actual place in the document is not fixed), the Width and Height fields with their correspondent measurement unit drop-down menus and the 'text align? and 'vertical align? drop-down menus. Then fill in the Cell spacing and Cell padding fields. The Frame and borders form allows you to set the borders? thickness (measured in pixels), the way the borders frame the table (choose this from the drop-down menu e.g. no sides, the top side only, the bottom side only etc.) and the rules (select your option from the drop-down menu e.g. rules will appear between rows only). The 'style[CSS] form is similar to the one from Cell Properties? except that you'll be able to set the style for the entire table not just a specific cell.
To add a new column, select a cell from an existing one and click Insert column after or Insert column before.
Inserting a new row is just as easy. Select a cell from an existing one and click Insert row after or Insert row before.

You can do these operations using the buttons from the third line of the editor's toolbar. Read the labels by hovering the mouse pointer over each of them.
Important: In normal text editing mode this line's buttons are inactive. To activate them, left click anywhere in the table.
The first button is the 'table properties? button. Next is the Row group: Row properties, Insert Row Before, Insert Row After, Delete Row and the inactive 'split Row? button. The third group is the Column group: Insert Column Before, Insert Column After, Delete Column and 'split Column?. All these active buttons are identical in their actions with the buttons from the right-click menu described above. The fourth group is the Cell group who next to the familiar Cell properties buttons has three new ones: Insert Cell Before, Insert Cell After and Delete Cell. You can use these three to manage the number of cells in the table.
The last two buttons are the active Merge cells button and the inactive 'split cell? button.
To merge two or more cells, first select a cell and click the Merge cells button. A script prompt will appear in a popup window. First enter the number of columns to merge (from the selected cell to the right) and then enter the number of rows to merge (from the selected cell down). With the merged cells selected, you can now click the Split column, Split row or Split cell buttons which have become active.
Important: You cannot split elements that have not been merged before.
Also see the visual tutorial How to: Use the online editor-Creating and formatting tables.