|
 Table
This function inserts a Table into the Editor Workarea. Tables are one of the primary design tool for HTML documents. Tables serve several functions. Tables allow for greater control over page layout, allowing creation of more visually interesting pages. A Table can be divided into vertical or horizontal sections called Table Cells. Table Cells can spaced and sized as desired. Placing the page content strategically into the Table Cells can have a visually pleasing effect on how a page will appear to visitors.
Deleting Table Columns.
Merging Table Cells.
Table Padding.
Table Width & Alignment.
Cell Properties.
Cell Border.
Cell Font.
Cell Padding.
Cell Width & Height.
Cell Background Color.
Cell Alignment.
Cell Spacing.
Example
- If you do not wish to use your website pages for testing you can visit http://www.ezeditor.net/ and click on the EZEDITOR DEMO page. Once there click the Login button to be logged in as Guest Administrator. After logging in click on the TEST AREA page then click the Edit button at the top of the page. Once the page reloads in Edit Mode you can move on to Step 6 and begin this exercise.
- If you wish to use your own website for testing then Login to your website as Administrator.
- Go to a page with eZ Editor installed.
- Do not save any of the changes you make while performing this exercise if you do not want to affect the current contents of the page you are using.
- Once logged in switch into Edit Mode on the page that you will be performing this exercise on.
- In this example we will create the table structure below to demonstrate how to work with the various table and table cell properties.
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. |
| It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). |
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). |
- Position the mouse cursor anywhere inside the Editor Workarea by clicking the left mouse button at the point where you would like to insert the Table.
Cursor positioned at top left inside the Editor Workarea (outlined in red).
The Table will be inserted at the cursor position.
- With the cursor at the position where you wish to insert the Table click the Table button on the Editor Toolbar to open the Table dialog box. Click the OK button on the Table dialog box to accept the default settings.
- There should now be a Table inserted into the Editor Workarea with 6 Table Cells spanning 2 rows and 3 columns. Each Table Cell is capable of holding content. As well each Table Cell has various properties which can be modified to control how the contents inside that cell are displayed which will be discussed later on in the Cell Properties Section of this example.
- The Table example we are trying to create has only 2 rows and 2 columns. In order to duplicate the Table in the example above we must remove on of the columns. To do this left click your mouse button inside the Top or Bottom cell of the last column as in the image below.
Top
Deleting Table Columns
- With the cursor positioned inside either the Top or Bottom Cell of the last column click the right mouse button to display the Table Cell Right Click Menu.
- From the Table Cell Right Click Menu select Delete Column to remove the last column of the Table.
- There should now be only 2 rows and 2 columns in the Table.
Top
Merging Table Cells
- Next we must combine the first or top row in the Table, into 1 Cell instead of 2 or 1 column instead of 2 columns without affecting the 2 columns in the bottom row.
- To do this type a few characters into each of the 2 Cells in the Top Row. Whether you type a single character or a whole sentence in each cell doesnt matter but there must be at least one character in each cell to combine them. For this example we will enter the word Left in the Left Cell and the word Right into the Right Cell. It is easier to combine the Cells when there is more than a single character in each cell but it is not a neccesity.
- With at least 1 character entered into each of the Top 2 Cells use your mouse to highlight at least 1 character in each of the cells to be combined. In this case you must highlight the content in both the Right and Left Cells in the Top Row.
- To highlight the contents in the cells hold down the left mouse button while moving the mouse left, right, up, or down until at least one character or all of the text in each cell is highlighted.
- With contents in both Cells highlighted click the right mouse button to display the Table Contents Right Click Menu.
- From the Table Contents Right Click Menu select Merge Cells to combine the 2 Cells in the Top Row. If you do not see the Merge Cells option then try re-highlighting the Cell contents again until the correct menu is displayed.
- The Table should now have 2 rows still but the Top Row should have only 1 Cell or Column and the Bottom Row should still have 2 Cells or Columns. The Top Row should now have the contents from the original 2 Cells in it combined together. Delete the contents of the newly combined Cell.
- Copy and Paste the paragraph below into the Top Cell.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
- Copy and Paste the paragraph below into the Left Cell of the Bottom Row.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
- The contents in the Bottom Left Cell have forced the Cell to expand causing the Bottom Right Cell to become smaller because there are no contents in the Bottom Right Cell and no Cell Width has been set.
- Place your cursor in the Bottom Right Cell by carefully clicking inside the Cell or by pressing the Right Arrow Key on your keyboard until the cursor moves inside the Bottom Right Cell.
- With your cursor inside the Bottom Right Cell, copy and Paste the paragraph below into the Left Cell of the Bottom Row.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
- You should now have contents in all 3 Cells of the Table. The contents currently appear to be very squished together. To help the appearance of the Table we will need to modify some of the Table Properties which were left at their default settings when we first created the Table.
- To modify the Table Properties the Table must be selected. To select the Table click anywhere on the Table border. A selected Table will appear with Table Resizing Handles displayed around the edge of the Table.
Top
Table Padding
- Once you have selected the Table click the Table button on the Editor Toolbar to open the Table dialog box.
- From the Table dialog box enter the value 5 into the Cell Padding field and click the OK button.
- The Table should now appear with 5 pixels of space between the contents and the edge of the Cells.
Top
Table Width & Alignment
- Next we will adjust the Table Width. Once again select the Table by clicking on the Tables border.
- With the Table selected click the Table button on the Editor Toolbar to open the Table dialog box.
- From the Table dialog box enter the value 90 into the Width field and click the OK button.
- The Table width by default is set to % Percent but can be set using px Pixels by selecting px from the Width Unit list to the right of the Table Width field.
- Select Center from the Table Alignment list to have the Table appear centered within the Editor Workarea.
- Click the OK button to accept the modified Table Properties.
- The Table should now appear smaller in width and centered within the Editor Workarea.
- Next we will hide the Table Border to give the appearance of structured content without actually showing all of the border lines.
- With the Table selected click the Table button on the Editor Toolbar to open the Table dialog box.
- From the Table dialog box enter the value 0 into the Border Size field and click the OK button.
- The Table should now appear with an invisible border.
Top
Invisible Border Tables
- Working with Tables within the Editor Workarea that have invisible borders can be difficult when it comes to selecting the Table. To select a Table you must click on the Tables Border which can be tricky if you cannot see the border.
- To temporarily view a Tables Border you can click the Show Borders button on the Editor Toolbar. Clicking the Show Borders button will cause any elements within the Editor Workarea to display there borders including Tables, Images and Anchors
Top
Cell Properties
- Next we will modify the Cell Properties to demonstrate how you can format the layout and appearance of contents in a Table Cell.
- Position your cursor inside the Top Cell and click the Cell Properties button on the Editor Toolbar to open the Cell Properties dialog box. Optionally you can also click the right mouse button to diplay the Cell Properties Right Click Menu and select Cell Properties.
- Optionally you can also click the right mouse button to diplay the Cell Properties Right Click Menu and select Cell Properties.
Top
Cell Border
- From the Cell Properties dialog box click the Border Color icon to the right of the Border Color field to open the Border Color dialog box.
- From the Border Color dialog box select any color and click the OK button. In this example we will select #6666FF as the Border Color.
- Even though we have selected a Border Color based on the current Cell Property settings the Border will not be visible. We still need to enter values into the Border Left, Border Top, Border Right and Border Bottom fields to determine the Border Size. By default the Border Size fields have no values in them meaning the Border Size will default to 0 pixels.
- Enter a value of 2 into the Border Left, Border Top, Border Right and Border Bottom fields to set the Border Size to 2 pixels.
- We will leave the Border Style set to the default value of Solid however you can choose from 8 different styles for the Border.
- Dotted
- Dashed
- Solid
- Double
- Groove
- Ridge
- Inset
- Outset
- Click the OK button on the Cell Properties dialog box to accept the Cell Border settings.
- You should now see a 2 pixel #6666FF color border around the top Cell.
Top
Cell Font
- Next we will set the Font Size, Font Color and Font Line Spacing for the Cell.
- With the cursor still positioned in the Top Cell click the Cell Properties button on the Editor Toolbar to re-open the Cell Properties dialog box.
- The Font Size field allows you to enter the exact size font that will be displayed within the Cell. Font Size can be set to PT (Point) or px (Pixels).
- Enter a value of 14 into the Font Size field and select px from the Font Unit list to the right of the Font Size field.
- To set the Font Color for the Cell click the Text Color icon to the right of the Font Color field to open the Font Color dialog box.
- From the Font Color dialog box select any color and click the OK button. In this example we selected #6699FF as the Font Color.
- You can also adjust the amount of space between each line of Text within the Cell by setting the Line Height Cell Property. Setting the Line Height to a larger number means that there will be more space between each line of text. Entering a smaller Line Height value will decrease the amount of space between each line of text.
- Enter a value of 24 into the Line Height field and select px from the Line Height Unit list to the right of the Line Height field.
- Click the OK button on the Cell Properties dialog box to accept the Cell Font settings.
- The text within the Cell should now be set to 14 px with more space between each line and appear #6699FF in color.
Top
Cell Padding
definition. Cell Padding
Cell Padding is used to determine how much blank area or padding you want around the inside edge within each segment of a table (called a cell). Cell Padding creates blank space around the text or other elements that are inside each segment or cell of the table. You do this by typing in a number, with 0 being no padding, 1 being a very small amount of padding, and so on.
- Finally for this Cell we will add some extra Cell Padding to add more space between the Cell contents and the Cell Border. In the steps earlier we set the Table Cell Padding to 5 pixels which was applied to every cell in the Table. Setting the Padding of the Cell itself overides the Table setting for that Cell.
- With the cursor still positioned in the Top Cell click the Cell Properties button on the Editor Toolbar to re-open the Cell Properties dialog box.
- Enter a value of 15 into the Padding Left, Padding Top, Padding Right and Padding Bottom fields to set the Cell Padding to 15 pixels.
- Click the OK button on the Cell Properties dialog box to accept the Cell Padding settings.
- The Cell should now have 15 pixels of space between its border and the text inside the Cell.
- We will now modify the bottom 2 Cells to demonstrate the last of the Cell Properties.
Top
Cell Width & Height
- You also have the ability to control the Width and Height of a Cell.
- Position your cursor inside the Bottom Left Cell and click the Cell Properties button on the Editor Toolbar to re-open the Cell Properties dialog box.
- Enter a value of 220 into the Cell Width field and select px from the Cell Width Unit list to the right of the Cell Width field.
- Enter a value of 300 into the Cell Height field.
- Click the OK button on the Cell Properties dialog box to accept the Cell Width and Height settings.
- The Cell should now have a Width of 220 pixels and a Height of 300 pixels.
Top
Cell Background Color
- Since it is difficult to see the change in Width and Height of the Bottom Cells we will add some color to the Cell background.
- Position your cursor inside the Bottom Left Cell and click the Cell Properties button on the Editor Toolbar to re-open the Cell Properties dialog box.
- From the Cell Properties dialog box click the Background Color icon to the right of the Background Color field to open the Background Color dialog box.
- From the Border Color dialog box select any color and click the OK button. In this example we will select #EEEEEE as the Background Color.
- Click the OK button on the Cell Properties dialog box to accept the Cell Background Color setting.
- Repeat the last 4 steps for the Bottom Right Cell.
- The Bottom Cells should now have a Background Color of #EEEEEE.
Top
Cell Alignment
- You also have the ability to control the Alignment of the contents within the Cell both Vertically and Horizontally.
- Position your cursor inside the Bottom Left Cell and click the Cell Properties button on the Editor Toolbar to re-open the Cell Properties dialog box.
- Select Top from the V Alignment list and Right from the H Alignment list.
- Click the OK button on the Cell Properties dialog box to accept the alignment settings.
- The text inside the Cell should now be aligned to the Top and Right of the Cell.
Top
Cell Spacing
definition. Cell Spacing
Cell Spacing is used to determine how much blank space you want to insert between each segment or cell. You do this by typing in a number, with 0 being no space, 1 being a very small amount of space, and so on.
- To end this example we will modify the Table Properties. Currently the 2 Bottom Cells have the same Background Color which makes it difficult to see any seperation between the 2 Bottom Cells. To show some seperation we will add some Cell Spacing to the Table.
- Select the Table by clicking anywhere on the Table border. If you cannot see the Table Border to select it then you can click the Show Borders button on the Editor Toolbar to temporarily view the invisible borders.
- Once you have selected the Table click the Table button on the Editor Toolbar to open the Table dialog box.
- From the Table dialog box enter the value 2 into the Cell Spacing field and click the OK button.
- The Table should now appear with 2 pixels of space between the Table Cells.
| 
