Manual:VisualEditor/Tables/Examples

Tables are useful for clearly displaying information in the wiki. Just note that multi-column tables are not suitable for display on mobile devices, since table columns cannot wrap.

The background colors and formatting of the tables are copied into the page MediaWiki:Common.css:

                    table.portal {border-spacing: 20px 2px; border-collapse: separate;}
table.portal th, table.portal td {padding:10px; border:0; vertical-align:top;}

.tblue th {background-color:#CADAEA;}
.tblue td {background-color:#E0ECF8;}

.tyellow th {background-color:#F7E1B2;}
.tyellow td {background-color:#E0ECF8;}

.twhite th {background-color:#787878; color:#FFF;}
.twhite td {background-color:#FFF;}

.tgrey th {background-color:#ACB1CF; color:#FFF;}
.tgrey td {background-color:#E6E7EB}

                

Design 1

Introduction	Important documents
The department Human Resources provides the following content in the wiki: Important announcements Employee handbook Information for new employees Organization charts Contacts	What you should know: Data protection guidelines (Status: 1/2020) Vacation request Business trips All forms

Insert this code in the source view of the wiki page:

                    {| class="portal tblue" style="width:100%;"
! style="width:50%;" |'''Column 1'''
! style="width:50%;" ! |'''Column 2'''
|-
| Content column 1
| Content column 2
|}

                

Design 2

Heading	Heading
Content	Content

Insert this code in the source view of the wiki page:

                    {| class="portal tyellow" style="width:100%;"
! style="width:50%;" |'''Heading'''
! style="width:50%;" |'''Heading'''
|-
|Content
|Content
|}

                

Design 3

Did you know?	Our mission	Contact
Since April 1, 2020, Ms. Yildiz supports us with our administrative tasks. We warmly welcome Ms. Yildiz and wish her lots of fun in our department.	We work diligently to provide you with the most important and up-to-date information. Let us know if there are things we can do better.	If you have any questions about the content of our wiki pages, please contact Mr. Baumeister.

Insert this code in the source view of the wiki page:

                    {| class="portal twhite" style="width:100%;"
! style="width:33%;" |'''Heading 1'''
! style="width:33%;" |'''Heading 2'''
! style="width:33%;" |'''Heading 3'''
|-
|  Content column 1
|  Content column 2
|  Content column 3
|}

                

Design 4

Box 1	Box 2	Box 3	Box 4
Box 5	Box 6	Box 7	Box 8

Insert this code in the source view of the wiki page:

                    {| class="portalboxes tgrey" style="width:100%;"
|-
| style="width:25%;" |'''Box 1'''
| style="width:25%;" |'''Box 2'''
| style="width:25%;" |'''Box 3'''
| style="width:25%;" |'''Box 4'''
|-
| '''Box 5'''
| '''Box 6'''
| '''Box 7'''
| '''Box 8'''
|}