How to Create Tables

Working with Table Content

When working with content on PLOW Web sites it is important to note that copying and pasting from MS Word is a very bad idea. The problem with this process is that it often carries over MS Word's underlying formatting. In many cases the text editor on the website is smart enough to deal with this but not always. Creating tables and entering content directly within the Web site using the Kupu editor is the best method.

The way text looks on the web site is determined by styles. Styles are pre-set collections of text formats that can be applied quickly, easily, and most importantly, consistently across all pages of the site.

Creating a table:

1. Create a new page to edit or open an existing page to edit
2. Click the table button in the Kupu editor
3. Select your table style (plain, listing, vertical listing or unsorted listing)
4. Enter the number of rows and columns needed
5. Check the "Create Headings" box if your table needs heading
6. Click Add Table

Now that your table is created you can enter in the appropriate heading and get ready to move content over. In order to move your content and strip out any behind the scenes formatting we will need to do an additional copy/paste.

Move text from Word to the web site

1. Create a temporary text file
1. On the desktop right click in an empty area
2. Choose New -> Text File
3. Double click the newly created file to open it up
2. Open the Word file that has the content you want placed in a table on the website
3. Copy one cell's text in your Word file
4. Paste the text into the blank text file
5. Copy the text from the text file
6. Paste the text into the appropriate cell in the web site table
7. Repeat until complete

Please note that all formatting will be lost so it really does not pay to spend time formatting things in Word. For many, the comfort level with Word formatting is much greater than the limited formatting offered through the web site's Kupu editor. While it may seem easier to create content in Word as you can see from the steps above it can be a rather large pain to move the information over if you are dealing with sizable content.

Formatting in the Kupu editor

Styles are used while editing the website for the ease in which they allow a consistent format to be applied site wide. The pre-existing styles in the editor can be seen in the drop down menu on the left hand side of the toolbar. In order to set a style, highlight the text you want to style and then choose the appropriate style from the drop-down menu.

You can also change styles on elements such as tables. To do this click on the table (small boxes appear around the edge of the table when the table is selected) and then click the table button. You will now see all of the available editing options. Once you have made your changes click close to return to the edit screen.

Table styles

Unsorted Listing

The unsorted listing table style is a plain, readable style that contains no additional horizontal or vertical lines. Current thought on table formatting is that extra lines and color distract rather than enhance the readability of the data presented. The data in and of itself presents itself into visual groups by alignment alone.

Listing

The listing style is a more colorful style that also adds in a handy sort feature. Each column heading can be clicked to sort the table by that column. This table could be used for the sorting feature or for the added color.

Vertical Listing

Vertical Listing is a more traditional table that includes vertical and horizontal lines, with a colored background. Tables like this are typically not used much anymore. One possible use for a grid styled table would be if you wanted to place small images in a table. The extra lines could serve as a border.

Plain

The plain table style is another more current style that adds in a few extra lines to distinguish the header row but leaves out extra lines in the body portion of the table. This, again, is done to limit visual noise as the rows and columns of data create visual groupings without additional lines.

Editing Tables

You can make changes to a table's structure or style in one of two ways. First you can click on the table once to select it (once a table is selected you will see little white boxes show up around its outer edge) and then click the table button in the Kupu editor bar. This will allow you to change the style, alignment and add/remove rows and columns. You can also delete a table this way. When clicking on the add/remove buttons, columns and rows will be added or taken away based on your cursor position in the able.

A second way to make changes is by using the add and delete buttons that get added to the table border while editing. To take advantage of this feature you will need to be using a current version of Firefox as your web browser. If you are using Firefox when you click into a cell you will see a small circle with an X in it along with 2 triangles on each side of the circle. Triangles add a row or column and the circle with an X deletes a row or column.

Remember that using circle and triangle buttons are in relation to the cell your cursor is currently in. So for example if we could click into the first cell of the first row (top left corner) clicking on the circle with an X on top would delete the column while clicking on the circle with an X to the left would delete the whole row. Clicking on the right pointing triangle at the top would add a column to the right and the clicking on the left pointing triangle would add a column to the left. The same goes for the upward pointing triangle and the downward pointing triangle. Up would add a row above our position and down would add a row below our current position.