Help On Tables


Help Menu: Wiki? | Creating A New Page | Editing | Formatting | Emoticons | Headers | Linking | Macros | Processing Instructions | Tables | Images

There are two methods to create a table for displaying data. The simple method uses ||, vertical line or vertical pipe character, to create a table. The simple method does not allow any styling or formatting of the table itself, however, text formatting, such as bold, italic, color, etc, can be applied to the contents of the table.

The more advanced table layout uses macros and allows certain properties of a table to be styled or defined, such as background color and width.

Simple Tables

By using || to denote the beginning and ending of a cell, you can create simple tables. 

|| **ID** || **Name** || **Description** ||
|| 123 || John Foo || Some foo user ||
|| 456 || Mary Richardson || Contact person from Foo Corp. ||

ID Name Description
123 John Foo Some foo user
456 Mary Richardson Contact person from Foo Corp.

You can also insert columns that span more than one column. Simply add more than one || for each column that you want to span. In the example below, the top cell, with the words "Contact Persons", spans 4 columns, so the || appears 4 times, for a total of 8 | characters, before the cell begins. And there is an ending || for the cell as well. In the example below you can also see how the cell containing "Name" spans two columns. 

|||||||| '''''Contact persons''''' ||
|| **ID** |||| **Name** || **Description** ||
|| 123 || John || Foo || Some foo user ||
|| 456 || Mary || Richardson || Contact person from Foo Corp. ||

Contact persons
ID Name Description
123 John Foo Some foo user
456 Mary Richardson Contact person from Foo Corp.

Advanced Tables

The advanced tables uses a total of 6 macros to create a table. A simple table with only one cell requires all 6 macros. From the Macro's etc drop down box when editing, you can select the table macros to insert them into the document.

The macros must be nested in a certain order. You have a table that has a begin and end macro. Then within a table you can have multiple rows, each with a begin and end macro. And within a row, you can have multiple cells, again, each with a begin and end macro.

The ~Cell macros can only appear inside ~Row macros, and ~Row macros can only appear inside ~Table macros. They cannot be used independently.

A quick example: 
<TableBegin()/>
<RowBegin()/>
<CellBegin()/>Row 1, Cell 1<CellEnd/>
<CellBegin()/>Row 1, Cell 2<CellEnd/>
<CellBegin()/>Row 1, Cell 3<CellEnd/>
<RowEnd/>
<RowBegin()/>
<CellBegin()/>Row 2, Cell 1<CellEnd/>
<CellBegin()/>Row 2, Cell 2<CellEnd/>
<CellBegin()/>Row 2, Cell 3<CellEnd/>
<RowEnd/>
<TableEnd/>

Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3

Notice how the CellBegin and CellEnd macros are paired, and how they're between RowBegin and RowEnd macros which are also paired. And all of that is in a TableBegin and TableEnd macro pair.

You can nest tables inside of each other, but order is still important. To do a nested table, you would create a normal table, and then inside a CellBegin and CellEnd macro, you would create another complete table structure, including rows and cells for that table.

Advanced Tables Styling

The three beginning macros allow a list of styling options, enclosed in double quotes and separated by commas.

The RowBegin and CellBegin macros will remember the style of the previous macro, so you only have to apply a style once to have multiple cells or rows styled the same way. To change style, you simply provide a new style to the first cell or row you want to change.

Here are the parameters for each, followed by some examples.

TableBegin

TableBegin accepts up to 7 options. Any thing left blank will use a default value. The options are:
  1. cell padding - Cell padding defaults to 2. This specifies how much space or padding exists around a cell boundary. A large number creates big boxes, a small number creates small boxes.
  2. cell space - Defaults to 0. This specifies how much space there is between cells. If there are borders around the cells, then you'll see a space between those borders.
  3. background color - This defaults to transparent. Other than transparent, the only color format supported is #RRGGBB format. See this for reference html color codes.
  4. border size - Defaults to 1px. This specifies the size of the outer border of the table, and not the borders of internal cells.
  5. border color - Defaults to #888888, which is a medium gray. Again, color format follows standard html color formatting. See background color for link to more info.
  6. border style - Defaults to solid. Possible values for border style are none, dotted, dashed, solid, double, groove, ridge, inset, or outset.
  7. table width - Default value is nothing, which means the table automatically stretches to accommodate content, the same way simple tables work above. This parameter can be a pixel value or percentage value, such as 300 or 50%. Pixel width should not exceed 764 in order to accommodate users with low resolution computer monitors.

If a parameter is not specified, then its default value is used. Not all parameters need to be specified.

Examples: 

<TableBegin("4,3,#CCCCFF,3px,#FF0000,dashed,75%")/>
<RowBegin()/>
<CellBegin()/>Row 1, Cell 1<CellEnd/>
<CellBegin()/>Row 1, Cell 2<CellEnd/>
<CellBegin()/>Row 1, Cell 3<CellEnd/>
<RowEnd/>
<TableEnd/>
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3

RowBegin
RowBegin only has one parameter, background color. The default color is transparent.

CellBegin
CellBegin has 10 parameters.
  1. background color - Defaults to transparent. Follows the same color requirements as TableBegin, see that section for more information on color codes.
  2. border size - Defaults to 1px. This specifies the border size of cells. A cell border is different from the table border.
  3. border color - Defaults to #888888, medium gray. See TableBegin above for color code information. This color effects only the cell border color and not the table border color.
  4. border style - Defaults to solid. Values for this are none, dotted, dashed, solid, double, groove, ridge, inset, or outset. This effects only the cell border and not the table border.
  5. align - Defaults to left. This specifies text alignment in the cell. Possible values are left, right, center, justify.
  6. vertical align - Defaults to middle. Possible values for vertical alignment are top, middle, bottom.
  7. column span - Defaults to nothing, which is no column spanning. To have a cell span more than one column, specify the number of columns the cell is to span, such as 2, 3, etc. This parameter is a number.
  8. row span - Defaults to nothing, which is no row spanning. This is similar to column spanning, however, instead of a cell expanding left or right, this makes a cell expand down into the row below. A number is required to specify the number of rows to span, such as 2, 3, etc.
  9. cell width - Defaults to nothing, which is auto expand. This can be either a percent or a number indicating pixel size. Percentages are often more useful, such as specifying that a cell is 50% of the table width.
  10. cell height - Defaults to nothing, which is auto expand. It may be best to leave this as a default. However, if needed, a number indicating pixel size works best. A percent value may not work in all browsers. This parameter specifies the height of a cell.

Advanced Table Examples - Putting it all together

<TableBegin("4,3,#CCCCFF,3px,#FF0000,dashed,75%")/>
<RowBegin("#CCFFCC")/>
<CellBegin()/>Row 1, Cell 1<CellEnd/>
<CellBegin("#FFCCCC")/>Row 1, Cell 2<CellEnd/>
<CellBegin()/>Row 1, Cell 3<CellEnd/>
<CellBegin("transparent")/>Row 1, Cell 4<CellEnd/>
<RowEnd/>
<RowBegin("transparent")/>
<CellBegin()/>Row 2, Cell 1<CellEnd/>
<CellBegin()/>Row 2, Cell 2<CellEnd/>
<CellBegin()/>Row 2, Cell 3<CellEnd/>
<CellBegin()/>Row 2, Cell 4<CellEnd/>
<RowEnd/>
<RowBegin()/>
<CellBegin()/>Row 3, Cell 1<CellEnd/>
<CellBegin(",,,,,,2,2")/>Row 3, Cell 2<CellEnd/>
<CellBegin("transparent")/>Row 3, Cell 3<CellEnd/>
<CellBegin()/>Row 3, Cell 4<CellEnd/>
<RowEnd/>
<RowBegin()/>
<CellBegin("#ffffcc,5,#FFFF00,ridge,right,bottom,,,,100")/>Row 4, Cell 1<CellEnd/>
<CellBegin()/>Row 4, Cell 2<CellEnd/>
<CellBegin()/>Row 4, Cell 3<CellEnd/>
<CellBegin("transparent")/>Row 4, Cell 4<CellEnd/>
<RowEnd/>
<TableEnd/>

Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3 Row 1, Cell 4
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3 Row 2, Cell 4
Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3 Row 3, Cell 4
Row 4, Cell 1 Row 4, Cell 2 Row 4, Cell 3 Row 4, Cell 4

Now, a detailed explanation of the example.

In the <TableBegin("4,3,#CCCCFF,3px,#FF0000,dashed,75%")/> macro, cell padding is 4, cell spacing is 3, then the table background color is set to #CCCCFF, which is a light blue. Then the border size is specified at 3px, the border color is set to #FF0000, which is red, and the border style is set to dashed. Then, the overall with of the table is specified at 75%. The table only expands 75% of the website's middle column, not 75% of the entire window.

Then, the <RowBegin("#CCFFCC")/> macro sets the row background color. This effects all cells that have a transparent background color. The row's background takes precedence over the table's background color.

<CellBegin("#FFCCCC")/> is the next macro with any parameters. Notice, only a background color is specified, all other parameters assume a default value. The cell background color takes precedence over of the row background color.

Because style information is remembered, "Row 1, Cell 2" and "Row 1, Cell 3" have the same background color.

"Row 1, Cell 4" is defined by <CellBegin("transparent")/> , and this resets the background color to transparent for this and all subsequent cells. If this were not defined, then the background color specified in "Row 1, Cell 2" would continue to be used throughout the table on subsequent rows.

Row 2 begins with <RowBegin("transparent")/> to reset the row background color. If this were not present, then the same row color would continue to be used throughout the table on all subsequent rows.

"Row 3, Cell 2" is defined by <CellBegin(",,,,,,2,2")/> , which setting the column span equal to 2, and the row span equal to 2. Other parameters are left out, but a series of commas are still needed in order to specify column span and row span in the proper order. The cell immediately after, "Row 3, Cell 3", specifies a transparent background color. This is only to reset the column span and row span values to a default setting, otherwise all subsequent cells would have the same column span and row span settings. Of particular interest in this example is how "Row 3, Cell 2" pushes other cells out of the way to expand.

"Row 4, Cell 1" begins with <CellBegin("#ffffcc,5,#FFFF00,ridge,right,bottom,,,,100")/> . The background color is set to #ffffcc, which is a pale yellow, the border width is set to 5 and border style is ridge, with a color of yellow, #FFFF00. Alignment is then specified to be right and bottom. Then cell height is set to 100 pixels. This explicit height assignment effects all cells on this row, even cells with an explicit height. The cell with largest height takes precedence over other cells on a particular row. This height value effects the height of "Row 3, Cell 2" because it extends into row 4. The last cell, "Row 4, Cell 4", defined by <CellBegin("transparent")/> , clears the style set by "Row 4, Cell 1". This last cell doesn't have any height value, however it's the same height as the other cells on the row because it's still part of row 4. Because style information is remembered, "Row 4, Cell 2" and "Row 4, Cell 3" have the same style as "Row 4, Cell 1".

Category Help

  Last Edited January 18, 2009


-Article List | TOS
Contact Webmaster
sugarglider.com		This wiki is licensed under
a Creative Commons
Attribution-ShareAlike 2.5 License. 		-