Difference between revisions for Playground / Table Markup Guide




← Previous edit
Next edit →

Additions:
===Cell Spans===
**Cell spans** are used to combine multiple cells or multiple headings
vertically or horizontally and are created using the following
[[TableMarkupReference 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===
|| Image links: | file:/IMG_20250615_134454_135-min.jpg?600 ||
|| Image links: | file:/IMG_20250615_134454_135-min.jpg?600 ||
===HTML===
===Styling===
##""||""{''style options''}
Element content ""||""##
?| Give priority |?
||(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 ||
?| Give priority |?
||(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
[[TableMarkupReference 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===
|| Image links: | file:/Przewalski-horses.jpg?600 ||
|| Image links: | file:/Przewalski-horses.jpg?600 ||
===Adding HTML within tables===
===Adding a touch of style===
##""||""{''style
options''}Element content""||""##
?|Give priority|?
||(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}1
x1|(x=2){background-color:pink}2x1||
?|Give priority|?
||(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}1
x1|(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||