ModEnc is currently in Maintenance Mode: Changes could occur at any given moment, without advance warning.

Difference between revisions of "ModEnc:Tables"

From ModEnc
Jump to: navigation, search
(I can sense D nearing already...trying to make me go to bed.....trying to take away our precious!)
 
m (Updated templates)
 
(6 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
In the process of creating a ModEnc page, you might be faced with the challenge of creating a table; while creating a basic table is fairly easy thanks to wikicode, a plain, style-less table also drags down the general quality of a page.<br>
 
In the process of creating a ModEnc page, you might be faced with the challenge of creating a table; while creating a basic table is fairly easy thanks to wikicode, a plain, style-less table also drags down the general quality of a page.<br>
Now you face a dilemma: Add content quickly, and accept it's design leaves something to be desired, or abandon the ease of a few lines of wikicode and dig out your HTML and CSS references.
+
Now you face a dilemma: Add content quickly, and accept its design leaves something to be desired, or abandon the ease of a few lines of wikicode and dig out your HTML and CSS references.
  
 
And if you did the latter, you just might be lucky enough to create something not fitting the general ModEnc theme, and have it rewritten by someone else the next day.
 
And if you did the latter, you just might be lucky enough to create something not fitting the general ModEnc theme, and have it rewritten by someone else the next day.
Line 6: Line 6:
 
To both save you the work of writing as well as standardize certain appearances, this page will hold the code for several "official" tables used on ModEnc, ready for you to copy and paste; the cells are all descriptively filled, and the table itself is shown so you can look what text appears where.
 
To both save you the work of writing as well as standardize certain appearances, this page will hold the code for several "official" tables used on ModEnc, ready for you to copy and paste; the cells are all descriptively filled, and the table itself is shown so you can look what text appears where.
  
You are free to add new tables here, as long as they fit the general style of the others.
+
You are free to add new tables here, as long as they fit the general style of the others. You can put up a request to add your custom classes to the stylesheet at [[ModEnc:CSS]].
  
  
Line 25: Line 25:
 
|#e5e5e5
 
|#e5e5e5
 
|Medium Grey - standard darker background
 
|Medium Grey - standard darker background
 +
|-
 +
|width="50px" bgcolor="#C9C9C9"|
 +
|#c9c9c9
 +
|Medium Grey 2 - something even darker
 
|-
 
|-
 
|width="50px" bgcolor="#AAAAAA"|
 
|width="50px" bgcolor="#AAAAAA"|
 
|#aaaaaa
 
|#aaaaaa
|Darker Grey - For lighter borders
+
|Darker Grey - For borders
|-
 
|width="50px" bgcolor="#000000"|
 
|#000000
 
|Black - should only be used for borders, and not a lot (i.e. either dashed or not all borders)
 
|-
 
|width="50px" bgcolor="#F00000"|
 
|#F00000
 
|Red - should only be used for backgrounds, in certain "Attention! Warning!" scenarios
 
 
|}
 
|}
Resulting from this color set, it is apparent that contrasting lightnesses are the best way to create effects - light colored borders on dark backgrounds or vice-versa, light and dark-backgrounded rows in succession, etc. Look at the designs below to get a feeling for it. Also, while not a general enough to be on the list below, the Introduction Table on [[RockPatch:Wishlist]] shows a nice way to work with the colors.
+
Resulting from this color set, it is apparent that contrasting lightnesses are the best way to create effects - light colored borders on dark backgrounds or vice-versa, light and dark-backgrounded rows in succession, etc. Look at the designs below to get a feeling for what you can do.
 +
 
 +
Other colors may be used (notably red), but only for effect, not as the basis of the design.
  
 
==Content Tables==
 
==Content Tables==
While the tables in the other categories are mainly used for templates and template-like applications, the tables in this category are intended for actual inline-use, to be filled with data. After you have seen the code of these monsters, you will understand why copying a pre-made style is favorable to creating a new one...especially in terms of time spent.<br>
+
While the tables in the other categories are mainly used for templates and template-like applications, the tables in this category are intended for actual inline-use, to be filled with data.
To extend these tables, always copy middle rows and/or columns, as the bordering cells have special style attributes for their borders.
 
 
===Description Row and Description Column===
 
===Description Row and Description Column===
 
Original base used on [[NavalTargeting]] and [[LandTargeting]].
 
Original base used on [[NavalTargeting]] and [[LandTargeting]].
{| align="center" cellspacing="2" cellpadding="4" style="border-collapse: collapse; border: 1px dashed #aaaaaa;background:#F0F0F0;"
+
{| align="center" cellpadding="4" class="table_descrowdesccol"
!bgcolor="#e5e5e5" style="border-bottom: 1px solid #000000;border-right: 1px solid #000000;"|desc col desc
+
!desc col desc
!bgcolor="#e5e5e5" style="border-bottom: 1px solid #000000;border-left: 1px solid #000000;border-right: 1px solid #000000;"|1st col desc
+
!1st col desc
!bgcolor="#e5e5e5" style="border-bottom: 1px solid #000000;border-left: 1px solid #000000;"|2nd col desc
+
!2nd col desc
 
|-
 
|-
!bgcolor="#e5e5e5" style="border-bottom: 1px solid #000000;border-right: 1px solid #000000;border-top: 1px solid #000000;"|1st row desc
+
!1st row desc
|style="border: 1px solid #aaaaaa;"|1st row, 1st col
+
|1st row, 1st col
|style="border-bottom: 1px solid #aaaaaa;border-left: 1px solid #aaaaaa;border-top: 1px solid #aaaaaa;"|1st row, 2nd col
+
|1st row, 2nd col
 
|-
 
|-
!bgcolor="#e5e5e5" style="border-right: 1px solid #000000;border-top: 1px solid #000000;"|2nd row desc
+
!2nd row desc
|style="border-left: 1px solid #aaaaaa;border-right: 1px solid #aaaaaa;border-top: 1px solid #aaaaaa;"|2nd row, 1st col
+
|2nd row, 1st col
|style="border-left: 1px solid #aaaaaa;border-top: 1px solid #aaaaaa;"|2nd row, 2nd col
+
|2nd row, 2nd col
 
|}
 
|}
<pre>{| align="center" cellspacing="2" cellpadding="4" style="border-collapse: collapse; border: 1px dashed #aaaaaa;background:#F0F0F0;"
+
<pre>{| align="center" cellpadding="4" class="table_descrowdesccol"
!bgcolor="#e5e5e5" style="border-bottom: 1px solid #000000;border-right: 1px solid #000000;"|desc col desc
+
!desc col desc
!bgcolor="#e5e5e5" style="border-bottom: 1px solid #000000;border-left: 1px solid #000000;border-right: 1px solid #000000;"|1st col desc
+
!1st col desc
!bgcolor="#e5e5e5" style="border-bottom: 1px solid #000000;border-left: 1px solid #000000;"|2nd col desc
+
!2nd col desc
 
|-
 
|-
!bgcolor="#e5e5e5" style="border-bottom: 1px solid #000000;border-right: 1px solid #000000;border-top: 1px solid #000000;"|1st row desc
+
!1st row desc
|style="border: 1px solid #aaaaaa;"|1st row, 1st col
+
|1st row, 1st col
|style="border-bottom: 1px solid #aaaaaa;border-left: 1px solid #aaaaaa;border-top: 1px solid #aaaaaa;"|1st row, 2nd col
+
|1st row, 2nd col
 
|-
 
|-
!bgcolor="#e5e5e5" style="border-right: 1px solid #000000;border-top: 1px solid #000000;"|2nd row desc
+
!2nd row desc
|style="border-left: 1px solid #aaaaaa;border-right: 1px solid #aaaaaa;border-top: 1px solid #aaaaaa;"|2nd row, 1st col
+
|2nd row, 1st col
|style="border-left: 1px solid #aaaaaa;border-top: 1px solid #aaaaaa;"|2nd row, 2nd col
+
|2nd row, 2nd col
 
|}</pre>
 
|}</pre>
 
===Description Row only===
 
===Description Row only===
 
Original base used on [[Powerups]].
 
Original base used on [[Powerups]].
{| align="center" cellspacing="2" cellpadding="4" style="border-collapse: collapse; border: 1px dashed #aaaaaa;background:#F0F0F0;"
+
{| align="center" cellpadding="4" class="table_descrow"
 
|+'''Here goes the headline'''
 
|+'''Here goes the headline'''
!bgcolor="#e5e5e5" style="border-bottom: 1px solid #000000;border-right: 1px solid #000000;"|1st col desc
+
!1st col desc
!bgcolor="#e5e5e5" style="border-bottom: 1px solid #000000;border-left: 1px solid #000000;border-right: 1px solid #000000;"|2nd col desc
+
!2nd col desc
!bgcolor="#e5e5e5" style="border-bottom: 1px solid #000000;border-left: 1px solid #000000;"|3rd col desc
+
!3rd col desc
 
|-
 
|-
|style="border-bottom: 1px solid #aaaaaa;border-right: 1px solid #aaaaaa;border-top: 1px solid #aaaaaa;"|1st row, 1st col
+
|1st row, 1st col
|style="border: 1px solid #aaaaaa;"|1st row, 2nd col
+
|1st row, 2nd col
|style="border-bottom: 1px solid #aaaaaa;border-left: 1px solid #aaaaaa;border-top: 1px solid #aaaaaa;"|1st row, 3rd col
+
|1st row, 3rd col
 
|-
 
|-
|style="border-right: 1px solid #aaaaaa;border-top: 1px solid #aaaaaa;"|2nd row, 1st col
+
|2nd row, 1st col
|style="border-left: 1px solid #aaaaaa;border-right: 1px solid #aaaaaa;border-top: 1px solid #aaaaaa;"|2nd row, 2nd col
+
|2nd row, 2nd col
|style="border-left: 1px solid #aaaaaa;border-top: 1px solid #aaaaaa;"|2nd row, 3rd col
+
|2nd row, 3rd col
 
|}
 
|}
<pre>{| align="center" cellspacing="2" cellpadding="4" style="border-collapse: collapse; border: 1px dashed #aaaaaa;background:#F0F0F0;"
+
<pre>{| align="center" cellpadding="4" class="table_descrow"
 
|+'''Here goes the headline'''
 
|+'''Here goes the headline'''
!bgcolor="#e5e5e5" style="border-bottom: 1px solid #000000;border-right: 1px solid #000000;"|1st col desc
+
!1st col desc
!bgcolor="#e5e5e5" style="border-bottom: 1px solid #000000;border-left: 1px solid #000000;border-right: 1px solid #000000;"|2nd col desc
+
!2nd col desc
!bgcolor="#e5e5e5" style="border-bottom: 1px solid #000000;border-left: 1px solid #000000;"|3rd col desc
+
!3rd col desc
 
|-
 
|-
|style="border-bottom: 1px solid #aaaaaa;border-right: 1px solid #aaaaaa;border-top: 1px solid #aaaaaa;"|1st row, 1st col
+
|1st row, 1st col
|style="border: 1px solid #aaaaaa;"|1st row, 2nd col
+
|1st row, 2nd col
|style="border-bottom: 1px solid #aaaaaa;border-left: 1px solid #aaaaaa;border-top: 1px solid #aaaaaa;"|1st row, 3rd col
+
|1st row, 3rd col
 
|-
 
|-
|style="border-right: 1px solid #aaaaaa;border-top: 1px solid #aaaaaa;"|2nd row, 1st col
+
|2nd row, 1st col
|style="border-left: 1px solid #aaaaaa;border-right: 1px solid #aaaaaa;border-top: 1px solid #aaaaaa;"|2nd row, 2nd col
+
|2nd row, 2nd col
|style="border-left: 1px solid #aaaaaa;border-top: 1px solid #aaaaaa;"|2nd row, 3rd col
+
|2nd row, 3rd col
 +
|}</pre>
 +
===Three-parted===
 +
Original used on [[Help:Contents]] and, flipped, on [[RockPatch:Wishlist]].
 +
{| align="center" width="98%" class="table_parted"
 +
!colspan="2"|Table Headline
 +
|-
 +
|width="100%" colspan="2"|<div align="center">'''Headline Cell 1'''</div>Text cell 1
 +
|-
 +
|width="50%"|<div align="center">'''Headline Cell 2'''</div>Text cell 2
 +
|width="50%"|<div align="center">'''Headline Cell 3'''</div>Text cell 3
 +
|}
 +
<pre>{| align="center" width="98%" class="table_parted"
 +
!colspan="2"|Table Headline
 +
|-
 +
|width="100%" colspan="2"|<div align="center">'''Headline Cell 1'''</div>Text cell 1
 +
|-
 +
|width="50%"|<div align="center">'''Headline Cell 2'''</div>Text cell 2
 +
|width="50%"|<div align="center">'''Headline Cell 3'''</div>Text cell 3
 
|}</pre>
 
|}</pre>
  
Line 105: Line 120:
 
These designs are used for simple messages, like the disambiguation or deprecated ones.
 
These designs are used for simple messages, like the disambiguation or deprecated ones.
 
===Grey Bar===
 
===Grey Bar===
The most basic message bar, used for virtually all standard notices - an example being [[Template:Disambig]].
+
The most basic message bar, used for virtually all standard notices - an example being [[Template:Disambig]].<br>
{|width="100%" style="background:#F0F0F0;border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:1px;border-top-color:#000000;border-top-style:solid;border-top-width:1px;"
+
Can be created automatically using [[Template:HorizontalBar]].
 +
{|width="100%" class="table_greybar"
 
|width="3%"|
 
|width="3%"|
 
|'''''Some custom message.'''''
 
|'''''Some custom message.'''''
 
|}
 
|}
<pre>{|width="100%" style="background:#F0F0F0;border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:1px;border-top-color:#000000;border-top-style:solid;border-top-width:1px;"
+
<pre>{|width="100%" class="table_greybar"
 
|width="3%"|
 
|width="3%"|
 
|'''''Some custom message.'''''
 
|'''''Some custom message.'''''
 
|}</pre>
 
|}</pre>
 
===Big Grey Bar===
 
===Big Grey Bar===
Expansion of the Grey Bar, conceived for [[Template:NeedTesting]].
+
Expansion of the Grey Bar, conceived for [[Template:NeedsTesting]].<br>
{|width="100%" style="background:#F0F0F0;border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:1px;border-top-color:#000000;border-top-style:solid;border-top-width:1px;"
+
Can be created automatically using [[Template:BigHorizontalBar]].
! style="font-size: large;"|Some custom Headline
+
{|width="100%" class="table_biggreybar"
 +
!Some custom Headline
 
|-
 
|-
| style="text-align: center;"|Some custom message.
+
|Some custom message.
 
|}
 
|}
<pre>{|width="100%" style="background:#F0F0F0;border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:1px;border-top-color:#000000;border-top-style:solid;border-top-width:1px;"
+
<pre>{|width="100%" class="table_biggreybar"
! style="font-size: large;"|Some custom Headline
+
!Some custom Headline
 
|-
 
|-
| style="text-align: center;"|Some custom message.
+
|Some custom message.
 
|}</pre>
 
|}</pre>
 
===Red Bar===
 
===Red Bar===
Use for warning or attention-catching texts, an example being [[Template:Obsolete|the "obsolete" warning]].
+
Use for warning or attention-catching texts, an example being [[Template:Obsolete|the "obsolete" warning]].<br>
{|width="100%" style="background:#F00000;border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:2px;border-top-color:#000000;border-top-style:solid;border-top-width:2px;"
+
Can be created automatically using [[Template:RedHorizontalBar]].
 +
{|width="100%" class="table_redbar"
 
|width="3%"|
 
|width="3%"|
 
|'''''Some custom message.'''''
 
|'''''Some custom message.'''''
 
|}
 
|}
<pre>{|width="100%" style="background:#F00000;border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:2px;border-top-color:#000000;border-top-style:solid;border-top-width:2px;"
+
<pre>{|width="100%" class="table_redbar"
 
|width="3%"|
 
|width="3%"|
 
|'''''Some custom message.'''''
 
|'''''Some custom message.'''''
Line 139: Line 157:
 
==Horizontal Blocks==
 
==Horizontal Blocks==
 
These designs are used for blocks at the top, mainly to quicklink pages of a certain category - like the main RockPatch pages. Include a width="" statement if necessary.
 
These designs are used for blocks at the top, mainly to quicklink pages of a certain category - like the main RockPatch pages. Include a width="" statement if necessary.
{| align="center" cellspacing="0" cellpadding="4" style="border-collapse: collapse; border: 1px dashed #000000;background:#F0F0F0;"
+
{| align="center" cellpadding="4" class="table_horblock"
 
!Headline here
 
!Headline here
 
|-
 
|-
 
|Body here
 
|Body here
 
|}
 
|}
<pre>{| align="center" cellspacing="0" cellpadding="4" style="border-collapse: collapse; border: 1px dashed #000000;background:#F0F0F0;"
+
<pre>{| align="center" cellpadding="4" class="table_horblock"
 
!Headline here
 
!Headline here
 
|-
 
|-
Line 152: Line 170:
 
==Vertical Blocks==
 
==Vertical Blocks==
 
These designs are used for floating sidebars, like the mod-information bar or custom TOCs.
 
These designs are used for floating sidebars, like the mod-information bar or custom TOCs.
 +
=== Reusable Sidebars ===
 +
For sidebars that should be repeated across many pages, like the [[Template:MappingBar|Mapping Bar]], use  [[Template:Sidebar]], just remember that its content needs a separate container page, unwritten rule is to create those as subpages of {{Tt|ModEnc:Sidebars/}}.
 +
 
===Simple Sidebar===
 
===Simple Sidebar===
An example being the [[Template:SideBar|generic sidebar template]].
+
For simplest sidebars, you can use this:
{| align="right" width="20%" style="border-collapse: collapse; border: 1px dashed #000000; background:#F0F0F0; margin: 2.8em 0 0 3.2em; padding: 1em 1em 1.5em 1em ;"  
+
{| align="right" width="20%" class="table_simplesidebar"  
 
!Headline
 
!Headline
 
|-
 
|-
 
|Body
 
|Body
 
|}
 
|}
<pre>{| align="right" width="20%" style="border-collapse: collapse; border: 1px dashed #000000; background:#F0F0F0; margin: 2.8em 0 0 3.2em; padding: 1em 1em 1.5em 1em ;"  
+
<pre>{| align="right" width="20%" class="table_simplesidebar"  
 
!Headline
 
!Headline
 
|-
 
|-
Line 166: Line 187:
 
===Linklist/TOC Sidebar===
 
===Linklist/TOC Sidebar===
 
Examples being the [[Template:Wishlist/TOC|Wishlist TOC]] and the [[RockPatch Docs:Reference|Reference TOC]]. Simply add more list items to expand.
 
Examples being the [[Template:Wishlist/TOC|Wishlist TOC]] and the [[RockPatch Docs:Reference|Reference TOC]]. Simply add more list items to expand.
{| align="right" cellspacing="0" cellpadding="4" style="border-collapse: collapse; border: 1px dashed #000000;background:#F0F0F0;"
+
{| align="right" cellpadding="4" class="table_tocsidebar"
!bgcolor="#e5e5e5"|Headline
+
!Headline
|-style="border-top-color:#aaaaaa;border-top-style:solid;border-top-width:1px;"
+
|-
 
|
 
|
 
*Bulleted list
 
*Bulleted list
 
|}
 
|}
<pre>{| align="right" cellspacing="0" cellpadding="4" style="border-collapse: collapse; border: 1px dashed #000000;background:#F0F0F0;"
+
<pre>{| align="right" cellpadding="4" class="table_tocsidebar"
!bgcolor="#e5e5e5"|Headline
+
!Headline
|-style="border-top-color:#aaaaaa;border-top-style:solid;border-top-width:1px;"
+
|-
 
|
 
|
 
*Bulleted list
 
*Bulleted list
 
|}</pre>
 
|}</pre>
 
===Infobar===
 
===Infobar===
An example being [[Template:ModBar]] - simple copy the last row over and over again to expand.
+
An example being [[Template:ModBar]] - simple copy the last row over and over again to expand (including the class).
{| align="right" width="20%" style="border-collapse: collapse; border: 1px dashed #000000; background:#F0F0F0; margin: 2.8em 0 0 3.2em; padding: 1em 1em 1.5em 1em ;"  
+
{| align="right" width="20%" class="table_infobar"  
 
!colspan="2"|Headline
 
!colspan="2"|Headline
 
|-
 
|-
 
|align="center" colspan="2"|Space for an image or a block of text
 
|align="center" colspan="2"|Space for an image or a block of text
|-style="font-size:84%;border-top-color:#aaaaaa;border-top-style:solid;border-top-width:1px;"
+
|-class="contentrow"
|style="padding-left:2px;" bgcolor="#e5e5e5" width="50%"|'''row desc'''
+
|width="50%"|'''row desc'''
|width="50%" style="padding-left:2px;"|row content
+
|width="50%"|row content
 
|}
 
|}
<pre>{| align="right" width="20%" style="border-collapse: collapse; border: 1px dashed #000000; background:#F0F0F0; margin: 2.8em 0 0 3.2em; padding: 1em 1em 1.5em 1em ;"  
+
<pre>{| align="right" width="20%" class="table_infobar"  
 
!colspan="2"|Headline
 
!colspan="2"|Headline
 
|-
 
|-
 
|align="center" colspan="2"|Space for an image or a block of text
 
|align="center" colspan="2"|Space for an image or a block of text
|-style="font-size:84%;border-top-color:#aaaaaa;border-top-style:solid;border-top-width:1px;"
+
|-class="contentrow"
|style="padding-left:2px;" bgcolor="#e5e5e5" width="50%"|'''row desc'''
+
|width="50%"|'''row desc'''
|width="50%" style="padding-left:2px;"|row content
+
|width="50%"|row content
 
|}</pre>
 
|}</pre>
  

Latest revision as of 12:26, 27 November 2009

In the process of creating a ModEnc page, you might be faced with the challenge of creating a table; while creating a basic table is fairly easy thanks to wikicode, a plain, style-less table also drags down the general quality of a page.
Now you face a dilemma: Add content quickly, and accept its design leaves something to be desired, or abandon the ease of a few lines of wikicode and dig out your HTML and CSS references.

And if you did the latter, you just might be lucky enough to create something not fitting the general ModEnc theme, and have it rewritten by someone else the next day.

To both save you the work of writing as well as standardize certain appearances, this page will hold the code for several "official" tables used on ModEnc, ready for you to copy and paste; the cells are all descriptively filled, and the table itself is shown so you can look what text appears where.

You are free to add new tables here, as long as they fit the general style of the others. You can put up a request to add your custom classes to the stylesheet at ModEnc:CSS.


Color and Style Conventions

  • Outer borders should either be dashed or solid with a light color.
  • Borders in general should be thin, standard is 1px.
  • To guarantee a common design, only the following colors should be used:
#FFFFFF White - should only be used as transparent
#F0F0F0 Lighter Grey - standard background
#e5e5e5 Medium Grey - standard darker background
#c9c9c9 Medium Grey 2 - something even darker
#aaaaaa Darker Grey - For borders

Resulting from this color set, it is apparent that contrasting lightnesses are the best way to create effects - light colored borders on dark backgrounds or vice-versa, light and dark-backgrounded rows in succession, etc. Look at the designs below to get a feeling for what you can do.

Other colors may be used (notably red), but only for effect, not as the basis of the design.

Content Tables

While the tables in the other categories are mainly used for templates and template-like applications, the tables in this category are intended for actual inline-use, to be filled with data.

Description Row and Description Column

Original base used on NavalTargeting and LandTargeting.

desc col desc 1st col desc 2nd col desc
1st row desc 1st row, 1st col 1st row, 2nd col
2nd row desc 2nd row, 1st col 2nd row, 2nd col
{| align="center" cellpadding="4" class="table_descrowdesccol"
!desc col desc
!1st col desc
!2nd col desc
|-
!1st row desc
|1st row, 1st col
|1st row, 2nd col
|-
!2nd row desc
|2nd row, 1st col
|2nd row, 2nd col
|}

Description Row only

Original base used on Powerups.

Here goes the headline
1st col desc 2nd col desc 3rd col desc
1st row, 1st col 1st row, 2nd col 1st row, 3rd col
2nd row, 1st col 2nd row, 2nd col 2nd row, 3rd col
{| align="center" cellpadding="4" class="table_descrow"
|+'''Here goes the headline'''
!1st col desc
!2nd col desc
!3rd col desc
|-
|1st row, 1st col
|1st row, 2nd col
|1st row, 3rd col
|-
|2nd row, 1st col
|2nd row, 2nd col
|2nd row, 3rd col
|}

Three-parted

Original used on Help:Contents and, flipped, on RockPatch:Wishlist.

Table Headline
Headline Cell 1
Text cell 1
Headline Cell 2
Text cell 2
Headline Cell 3
Text cell 3
{| align="center" width="98%" class="table_parted"
!colspan="2"|Table Headline
|-
|width="100%" colspan="2"|<div align="center">'''Headline Cell 1'''</div>Text cell 1
|-
|width="50%"|<div align="center">'''Headline Cell 2'''</div>Text cell 2
|width="50%"|<div align="center">'''Headline Cell 3'''</div>Text cell 3
|}

Horizontal Bars

These designs are used for simple messages, like the disambiguation or deprecated ones.

Grey Bar

The most basic message bar, used for virtually all standard notices - an example being Template:Disambig.
Can be created automatically using Template:HorizontalBar.

Some custom message.
{|width="100%" class="table_greybar"
|width="3%"|
|'''''Some custom message.'''''
|}

Big Grey Bar

Expansion of the Grey Bar, conceived for Template:NeedsTesting.
Can be created automatically using Template:BigHorizontalBar.

Some custom Headline
Some custom message.
{|width="100%" class="table_biggreybar"
!Some custom Headline
|-
|Some custom message.
|}

Red Bar

Use for warning or attention-catching texts, an example being the "obsolete" warning.
Can be created automatically using Template:RedHorizontalBar.

Some custom message.
{|width="100%" class="table_redbar"
|width="3%"|
|'''''Some custom message.'''''
|}

Horizontal Blocks

These designs are used for blocks at the top, mainly to quicklink pages of a certain category - like the main RockPatch pages. Include a width="" statement if necessary.

Headline here
Body here
{| align="center" cellpadding="4" class="table_horblock"
!Headline here
|-
|Body here
|}

Vertical Blocks

These designs are used for floating sidebars, like the mod-information bar or custom TOCs.

Reusable Sidebars

For sidebars that should be repeated across many pages, like the Mapping Bar, use Template:Sidebar, just remember that its content needs a separate container page, unwritten rule is to create those as subpages of ModEnc:Sidebars/.

Simple Sidebar

For simplest sidebars, you can use this:

Headline
Body
{| align="right" width="20%" class="table_simplesidebar" 
!Headline
|-
|Body
|}

Linklist/TOC Sidebar

Examples being the Wishlist TOC and the Reference TOC. Simply add more list items to expand.

Headline
  • Bulleted list
{| align="right" cellpadding="4" class="table_tocsidebar"
!Headline
|-
|
*Bulleted list
|}

Infobar

An example being Template:ModBar - simple copy the last row over and over again to expand (including the class).

Headline
Space for an image or a block of text
row desc row content
{| align="right" width="20%" class="table_infobar" 
!colspan="2"|Headline
|-
|align="center" colspan="2"|Space for an image or a block of text
|-class="contentrow"
|width="50%"|'''row desc'''
|width="50%"|row content
|}

See also