Difference between revisions for Playground / Table Markup Guide
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
|| 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 |?
||(colspan=2 rowspan=2 bgcolor=pink) 2x2 |(colspan=2 bgcolor=lightblue) 2x1 |(rowspan=2 bgcolor=lightyellow) 1x2 ||
||(rowspan=2 bgcolor=lightyellow) 1x2 |(bgcolor=darkslategray) !!(white)1x1!! ||
||(bgcolor=lightblue) 1x1 |(bgcolor=darkslategray) !!(white)1x1!! |(colspan=2 bgcolor=pink) 2x1 ||
?| Give priority |?
||(colspan=2 rowspan=2 bgcolor=pink) 2x2 |(colspan=2 bgcolor=lightblue) 2x1 |(rowspan=2 bgcolor=lightyellow) 1x2 ||
||(rowspan=2 bgcolor=lightyellow) 1x2 |(bgcolor=darkslategray) !!(white)1x1!! ||
||(bgcolor=lightblue) 1x1 |(bgcolor=darkslategray) !!(white)1x1!! |(colspan=2 bgcolor=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=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
|| 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}1x1|(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}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||
!|(u:The number of employees and the foundation year of some imaginary companies.)|!
*| |(o=col)Employees|(o=col)Founded|*
^|(o=row)ACME Inc|1000|1947||
^|(o=row)XYZ Corp|2000|1973||