Joomla Article Advanced Topics: Table Layouts An HTML Table allows you to arrange data text, images, links, etc., into rows and columns of cells. If you are familiar with spreadsheets, you will understand the structure of a table. Most of the Articles a web editor will create for a school web site or district department web site will be much like a word processing document with paragraphs of text and sometimes bulleted or numbered lists. However, there are occasions where you need more control over the placement of data within the Article. Using tables can assist you with that. Here are some examples of the use of table layouts to organize data in an Article. The home page Articles for our school web sites use tables to layout information in columns and rows. It is easy to see the cells with the yellow background on the Clark home page above. The table actually has 3 columns and two rows. The staff pages display staff member names and positions using a table layout (2 columns multiple rows). The calendar page sample to the right includes two tables, each with 4 columns and three rows to display the monthly calendars. The use of tables in Joomla Articles can range from simple through extremely complex. This set of instructions deals with the creation and use of basic table elements. If you have advanced needs and/or questions, much information regarding table layouts is available on the Internet. You may also contact webmaster@wps60.org for assistance.
CREATE A TABLE WITHIN AN ARTICLE Table Creation: To create a table to display data, place your cursor in the Article where you want to insert the Table and click the Insert Table icon in the Editor toolbar (outlined in red below). Fill in the number of Columns (Cols) and Rows for your table (outlined in red below). You can also set the Cellpadding (number of pixels around any data entered into the cell) and/or Cellspacing (number of pixels cells are spaced apart) if desired. Set the Alignment for your table usually left or center. Unless you want the border of your table to display for a specific reason, leave the Border set at zero. Alignment and Border are outlined in purple below. While it is usually not necessary to set the height of your table (as the height will increase with the amount/size of data in the Cells, you should set the Width (outlined in blue above). Width can be set in percentages or pixels. If you want the table to take up the whole width of the Article area in the template, enter 100% for the width. If you want the table to be indented a small amount from each side, you could enter 96% and then set the Alignment for Center. If you want to use pixels to limit width, enter the number of pixels (example 100) in the Width box. You will quickly see the difference between 100% and 100 px if you compare two tables with these measurements.
Click the Insert button and your table will be created within the Article Editor. Note in the screen shot below of the Article Editor how the tables are displayed with dotted lines outlining the rows and columns. Also note that as soon as you click into a table cell, additional Table editing icons (outlined in red below) are now available on the Article Editor toolbar. You will use these additional tools as you add contents to and edit your table rows, columns and cells. Adding Text to a Table: To add text to a cell, simple click your cursor into the cell and begin typing. Notice how the cell resizes as you begin to enter data. If you want the columns to be a fixed width, this is a good time to set that up. In the example above where you might enter all the months of the year - you want to have each of the four columns (controlled by the cells) set to be 25% of the width. Click in the top cell in the left-hand column and then click the Table Cell Properties button in the Article Editor toolbar (outlined in red below).
The Table Cell Properties window will open. Because in this case you want to set all columns (cells) to be 25% of the total width of the table, you can easily set up the General Properties for the whole table at one time. (Note: If you want columns of different widths, you would need to click in a cell in each column and set the width as needed.) In the sample above the Width (outline in red) is set for 25%. The Alignment and Vertical Alignment (outlined in blue) are also set. Not the dropdown just above the Update button. It has been changed from Update current cell to Update all cells in the table to apply these General Properties to all cells. Click the Update button (outlined in green) to complete the process. Click in each cell and enter the text you want. All text in our example will be aligned to the left and top of the cells and the four columns of cells will each be 25% of the width of the table. Adding Color to a Cell or Row: There may be occasions where you want to highlight the top line of cells in your table that contains the names of the data elements in the columns below or a specific cell or cells in your table. Using colors that complement your web site is one way to do that.
To add color to a whole row of cells, click in the first cell on the left (see sample above) and then click the Row Properties button (outlined in red below) on the Article Editor toolbar. The Row Properties window will appear. Note that you are on the General Tab (outlined in red below). If you have not already set the Alignment and Vertical Alignment, you can do that now for the current row (outlined in blue). Then click the Advanced Tab to display more options for the row you are working on. Click on Background color and use the Picker, Palette, or Named Tabs to select a color that matches your web site color scheme. If you know the Hex code for your color, you can type it into the color box of any of the color selection tabs.
Click the Apply button (outlined in green above) on the Select a Color window to return to the Table Row Properties Window. Note that now your Background color is listed and inserted as a Style as well. To add the selected color to your table row, click the Update button on the Table Row Properties window. You can then review the changes to your table in the Article Editor. You may also want to make your data labels bold by selecting the text and clicking the Bold (B) icon in the Article Editor toolbar. (See Clearview Staff Member for the appearance of bold compared to non-bold text in the example below.) To add color to a specific cell, click in the cell and then click the Cell Properties icon in the Article Editor toolbar. Click on the Advanced Tab on the Cell Properties Window and continue through similar steps to select background color as those described for a whole row above. Note: Not all web browsers support Border Color. It is best not to set this property on a cell, row or table.
Joining Cells in Rows or Columns: In addition to displaying data, you may use tables to layout elements in specific locations in your Article. For example, if you want to create a letterhead appearance surrounding your Article text, you might start with a table that is 4 columns by 3 to 5 rows and 100% width and make some adaptations. To make the layout you want, select the first two cells in the first two rows and then click the Merge Table Cells icon (outlined in red below) to join them together. (Eventually we will insert an image into this location.) The two screen shots above show the drag to select the cells and then the results when the Merge Table Cells icon is clicked. (Note that once you merge table cells, when your cursor is in the merged cells, you will have a new active icon - called Split Merged Table Cells displayed just to the left of the Merge Table Cells icon. Using this button will undo the merge.) Now select the remaining three cells on the right in the top row and merge them. Type the text for your letterhead into the center merged cell area and center the text. Enter the date in the second row, far right column and right justify it. You may want to set width 20% to the date cell. At this point your table will look something like the sample below.
If you need a complex layout for a specific web page, tables are very useful. Inserting an Image into a Table Cell: To complete the sample letterhead above, you will insert the district logo into the two merged cells in the top left corner. Remember, before you can insert an image, you must upload it using the Media Manager. Then click in the cell where you want to insert the image and click the Image button (outlined in red) at the bottom of the Article Editor. Navigate to your image, select it and click the Insert button (outlined in red below).
The image will appear in the cell where your cursor was placed. In the sample letterhead, you can also resize the merged cell holding the image to more closely match the size of the image in order to better center the letterhead text. Adding an image to a cell in a table layout is an easy process. Be sure to Apply or Save any changes you have made to your Article. Always preview your Article as it now appears on your web site. EDITING A TABLE Inserting a Row or Column: Often you will create a table only to find out that you have additional data and need to add another row or column to your table layout. To add a row: Click in a cell the row above or below where you want to add the new row and then select either the Insert Row Above or Insert Row Below icon on the Article Editor toolbar. The new row will appear. [Insert Row Above and Insert Row Below icons from the toolbar] To add a column: Click a cell in the column to the right or left and then select either the Insert Column Before or Insert Column After icon from the Article Editor toolbar. The new column will appear. [Insert Column Before and Insert Column After icons from the toolbar] Deleting a Row or Column: Deleting rows and/or columns from your table is also an easy process. Click in a cell in the row or column you want to delete and then click either the Delete Row (outlined in blue below) or Remove Column (outlined in red below) icon in the Article Editor toolbar.
Editing Cell Contents: Text, links and images stored within table cells are edited the same as text, links and images that are not stored within table cells. See Creating an Article, Editing an Article and other Joomla instructions for details. Be sure to Apply or Save after any editing changes and always preview your Article as it now appears on your web site. DELETING A TABLE Sometimes you create a table within an Article and then determine that you no longer need it. To remove a table, first click in any cell to activate the table. Then click the INSIDE dotted line at the top of the table to select ALL cells in the table. (See sample below.) Then hit the DELETE key on your computer to remove the table from your Article. Be sure to Apply or Save after any editing changes and always preview your Article as it now appears on your web site. LOGOUT When you are done using your Web Site Manager, remember to LOGOUT correctly. Click the Logout button in the upper right-hand corner of your window. (See red outline below.) If the Logout button is not active, you may still have an article or menu item open for editing. Close or Cancel and try the Logout button again.
END NOTES Tables are useful layout tools. After reviewing these instructions, you should be able to create and edit tables and enter text, links and/or images into the table cells to create the desired appearance.