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 ||
|| !!Highlighted!! | --Strikethrough-- |(colspan=2) **//Bold italics//** ||
|| !!Highlighted!! | --Strikethrough-- |(colspan=2) **//Bold italics//** ||
Actions and images within tables
Links within tables
|| Image links: | file:/IMG_20250615_134454_135-min.jpg?600 |||| Image links: | file:/IMG_20250615_134454_135-min.jpg?600 ||
HTML within tables
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=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 ||
|| !!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||
Adding titles
Any table element can be given atitle attribute to enhance its accessibility. Titles are typically displayed in graphical browsers by hovering over the corresponding element and are useful to display unobtrusive descriptions about specific elements. You can specify a title for any table element by using the (t=''title'') parameter.The following example adds titles to several table elements (you can hover over the table to display them):
!|(t="Comparative figures for fruit production in the last year"){width: 350px}|!
?|Fruit production in 2026|?
*| |(t="yearly production of apples")Apples|(t="yearly production of pears")Pears|*
^|(t="Mary's contribution to 2026 production")Mary|(t="Mary's production of apples in 2026"){text-align:center}300Kg|(t="Mary's production of pears in 2026"){text-align:center}320Kg||
^|(t="John's contribution to 2026 production")John|(t="John's production of apples in 2026"){text-align:center}400Kg|(t="John's production of pears in 2026"){text-align:center}630Kg||
!|(t="Comparative figures for fruit production in the last year"){width: 350px}|!
?|Fruit production in 2026|?
*| |(t="yearly production of apples")Apples|(t="yearly production of pears")Pears|*
^|(t="Mary's contribution to 2026 production")Mary|(t="Mary's production of apples in 2026"){text-align:center}300Kg|(t="Mary's production of pears in 2026"){text-align:center}320Kg||
^|(t="John's contribution to 2026 production")John|(t="John's production of apples in 2026"){text-align:center}400Kg|(t="John's production of pears in 2026"){text-align:center}630Kg||
- 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||