Difference between revisions for Playground / Table Markup Guide




← Previous edit
Revision 17 as of 02/28/2026 07:03 ▼
18 03/01/2026 08:05 WikiAdmin 17 02/28/2026 07:03 WikiAdmin 16 02/28/2026 07:00 WikiAdmin 15 02/27/2026 17:41 WikiAdmin 14 02/27/2026 17:41 WikiAdmin 13 02/27/2026 17:37 WikiAdmin 12 02/27/2026 15:23 WikiAdmin 11 02/27/2026 15:23 WikiAdmin 10 02/27/2026 15:10 WikiAdmin 9 02/27/2026 15:08 WikiAdmin 8 02/27/2026 10:21 WikiAdmin 7 02/25/2026 18:55 WikiAdmin 6 02/25/2026 18:07 WikiAdmin 5 02/25/2026 16:03 WikiAdmin 4 02/25/2026 15:51 WikiAdmin 3 02/25/2026 15:20 WikiAdmin 2 02/25/2026 14:10 WikiAdmin 1 02/25/2026 14:06 WikiAdmin

(15.4 KiB)
WikiAdmin
 Next edit →
Revision 19 as of 03/01/2026 08:06 ▼
22 03/19/2026 08:34 WikiAdmin 21 03/03/2026 09:52 WikiAdmin 20 03/01/2026 13:03 WikiAdmin 19 03/01/2026 08:06 WikiAdmin 18 03/01/2026 08:05 WikiAdmin

(15.6 KiB) +194
WikiAdmin

Additions:

Cell Spans

Cell spans are used to combine multiple cells or multiple headings vertically or horizontally and are created using the following attribute parameters:
||(''span options'') Element content ||
A cell spanning multiple columns is generated by prefixing the cell content with a (colspan=''n'') parameter, where ''n'' is the number of columns to be spanned. The following example shows how to create a cell spanning two columns:
||(colspan=2) Cell spanning 2 columns | Cell 3 ||
||(colspan=2) Cell spanning 2 columns | Cell 3 ||
Spans can also be applied to rows. A cell spanning multiple rows is generated by prefixing the cell content with a (rowspan=''n'') parameter, where ''n'' is the number of rows to be spanned. The following example shows how to create a cell spanning two rows:
||(rowspan=2) Cell spanning 2 rows | Cell 2 | Cell 3 ||
||(rowspan=2) Cell spanning 2 rows | Cell 2 | Cell 3 ||
|| 8-9 | |(rowspan=9) Outreach | |(rowspan=9) Outreach | ||
|| 14-15 |(rowspan=3) CSCI 102 | CSCI 101 | CSCI 101 ||
|| 8-9 | |(rowspan=9) Outreach | |(rowspan=9) Outreach | ||
|| 14-15 |(rowspan=3) CSCI 102 | CSCI 101 | CSCI 101 ||
*| |(colspan=2) Apples |(colspan=2) Pears |*
*| |(colspan=2) Apples |(colspan=2) Pears |*
||(colspan=2 rowspan=2) 2x2 |(colspan=2) 2x1 |(rowspan=2) 1x2 ||
||(rowspan=2) 1x2 | 1x1 ||
|| 1x1 | 1x1 |(colspan=2) 2x1 ||
||(colspan=2 rowspan=2) 2x2 |(colspan=2) 2x1 |(rowspan=2) 1x2 ||
||(rowspan=2) 1x2 | 1x1 ||
|| 1x1 | 1x1 |(colspan=2) 2x1 ||

Formatting text

|| !!Highlighted!! | --Strikethrough-- |(colspan=2) **//Bold italics//** ||
|| !!Highlighted!! | --Strikethrough-- |(colspan=2) **//Bold italics//** ||

Actions and images

Links

HTML

|| And here's some subscript too: avv2kvv ||
|| And here's some subscript too: avv2kvv ||

Styling

||(x=2 y=2){background-color:pink} 2x2 |(colspan=2){background-color:lightblue} 2x1 |(rowspan=2){background-color:lightyellow} 1x2 ||
||(rowspan=2){background-color:lightyellow} 1x2 |{background-color:#333;color:white} 1x1 ||
||{background-color:lightblue} 1x1 |{background-color:#333;color:white} 1x1 |(colspan=2){background-color:pink} 2x1 ||
||(x=2 y=2){background-color:pink} 2x2 |(colspan=2){background-color:lightblue} 2x1 |(rowspan=2){background-color:lightyellow} 1x2 ||
||(rowspan=2){background-color:lightyellow} 1x2 |{background-color:#333;color:white} 1x1 ||
||{background-color:lightblue} 1x1 |{background-color:#333;color:white} 1x1 |(colspan=2){background-color:pink} 2x1 ||
id attributes are used to refer to unique elements in a page and to provide an anchor for styling and linking. You can specify an id for any table element by using the (id=''id'') parameter.
!|(id=main_table)|!
||(id=cell_1)This cell can be referred to by using the ##cell_1## id||
||(id=cell_2)This cell can be referred to by using the ##cell_2## id||
||(id=cell_1)This cell can be referred to by using the ##cell_1## id||
||(id=cell_2)This cell can be referred to by using the ##cell_2## id||
  • Column heading scopes can be specified using the (scope=col) parameter in the corresponding column heading;
  • Row heading scopes can be specified using the (scope=row) parameter in the corresponding row heading;
*| |(scope=col)Employees|(scope=col)Founded|*
^|(scope=row)ACME Inc|1000|1947||
^|(scope=row)XYZ Corp|2000|1973||
*| |(scope=col)Employees|(scope=col)Founded|*
^|(scope=row)ACME Inc|1000|1947||
^|(scope=row)XYZ Corp|2000|1973||

Deletions:

Spans

Spans are used to combine multiple cells or multiple headings vertically or horizontally and are created using the following attribute parameters:
||(''span options'')Element content||
A cell spanning multiple columns is generated by prefixing the cell content with a (x=''n'') parameter, where ''n'' is the number of columns to be spanned. The following example shows how to create a cell spanning two columns:
||(x=2) Cell spanning 2 columns | Cell 3 ||
||(x=2) Cell spanning 2 columns | Cell 3 ||
Spans can also be applied to rows. A cell spanning multiple rows is generated by prefixing the cell content with a (y=''n'') parameter, where ''n'' is the number of rows to be spanned. The following example shows how to create a cell spanning two rows:
||(y=2) Cell spanning 2 rows | Cell 2 | Cell 3 ||
||(y=2) Cell spanning 2 rows | Cell 2 | Cell 3||
|| 8-9 | |(y=9) Outreach | |(y=9) Outreach | ||
|| 14-15 |(y=3) CSCI 102 | CSCI 101 | CSCI 101 ||
|| 8-9 | |(y=9) Outreach | |(y=9) Outreach | ||
|| 14-15 |(y=3) CSCI 102 | CSCI 101 | CSCI 101 ||
*| |(x=2) Apples |(x=2) Pears |*
*| |(x=2) Apples |(x=2) Pears |*
||(x=2 y=2) 2x2 |(x=2) 2x1 |(y=2) 1x2 ||
||(y=2) 1x2 | 1x1 ||
|| 1x1 | 1x1 |(x=2) 2x1 ||
||(x=2 y=2) 2x2 |(x=2) 2x1 |(y=2) 1x2 ||
||(y=2) 1x2 | 1x1 ||
|| 1x1 | 1x1 |(x=2) 2x1 ||

Formatting text within tables

|| !!Highlighted!! | --Strikethrough-- |(x=2) **//Bold italics//** ||
|| !!Highlighted!! | --Strikethrough-- |(x=2) **//Bold italics//** ||

Adding actions and images within tables

Adding links within tables

Adding HTML within tables

|| And here's some subscript too: a,,2k,, ||
|| And here's some subscript too: a,,2k,, ||

Adding a touch of style

||(x=2 y=2){background-color:pink} 2x2 |(x=2){background-color:lightblue} 2x1 |(y=2){background-color:lightyellow} 1x2 ||
||(y=2){background-color:lightyellow} 1x2 |{background-color:#333;color:white} 1x1 ||
||{background-color:lightblue} 1x1 |{background-color:#333;color:white} 1x1 |(x=2){background-color:pink} 2x1 ||
||(x=2 y=2){background-color:pink} 2x2 |(x=2){background-color:lightblue} 2x1 |(y=2){background-color:lightyellow} 1x2 ||
||(y=2){background-color:lightyellow} 1x2 |{background-color:#333;color:white} 1x1 ||
||{background-color:lightblue} 1x1 |{background-color:#333;color:white} 1x1 |(x=2){background-color:pink} 2x1 ||
id attributes are used to refer to unique elements in a page and to provide an anchor for styling and linking. You can specify an id for any table element by using the (i=''id'') parameter.
!|(i=main_table)|!
||(i=cell_1)This cell can be referred to by using the ##cell_1## id||
||(i=cell_2)This cell can be referred to by using the ##cell_2## id||
||(i=cell_1)This cell can be referred to by using the ##cell_1## id||
||(i=cell_2)This cell can be referred to by using the ##cell_2## id||
  • Column heading scopes can be specified using the (o=col) parameter in the corresponding column heading;
  • Row heading scopes can be specified using the (o=row) parameter in the corresponding row heading;
*| |(o=col)Employees|(o=col)Founded|*
^|(o=row)ACME Inc|1000|1947||
^|(o=row)XYZ Corp|2000|1973||
*| |(o=col)Employees|(o=col)Founded|*
^|(o=row)ACME Inc|1000|1947||
^|(o=row)XYZ Corp|2000|1973||