This page displays various example of the possible layout of the template.
As the URL of this page is Template:Tab top/Examples, this will be used in the following examples as the specified URL for tab 2, in order to make this one appear as selected.
Minimum template
| Alpha | Bravo | Charlie |
{{ Tab top
| Tab-1 = Alpha
| URL-1 = France
| Tab-2 = Bravo
| URL-2 = Template:Tab top/Examples
| Tab-3 = Charlie
| URL-3 = Main Page
}}
This is the minimum structure for 3 tabs. All colors and style are the default ones.
Rounded Tab template, with a picture
 Alpha |  Bravo | Charlie |
{{ Tab top
| Tab-1 = Alpha
| URL-1 = France
| Image-1 = Mentor-new-transparent-large.png
| Tab-2 = Bravo
| URL-2 = Template:Tab top/Examples
| Image-2 = MenuButton.png
| Tab-3 = Charlie
| URL-3 = Main Page
| rounding = 20px
}}
The rouding parameters specify a radius of 20px, applied symetrically on both left and right upper corner of each tab boxes. Two of 3 tabs get a picture prefix.
Asymmetrically Rounded Tab template
<td class="tab" style="text-align: center; -moz-border-radius: Expression error: Unrecognized word "px".px 15pxpx 0 0; -webkit-border-radius: Expression error: Unrecognized word "px".px 15pxpx 0 0; border-radius: Expression error: Unrecognized word "px".px 15pxpx 0 0; padding:0.3em; border: solid 2px #87CEEB; font-size: ; background-color:
- D3D3D3;" width="31.333333333333%">Alpha<td class="tab" style="text-align: center; -moz-border-radius: Expression error: Unrecognized word "px".px 15pxpx 0 0; -webkit-border-radius: Expression error: Unrecognized word "px".px 15pxpx 0 0; border-radius: Expression error: Unrecognized word "px".px 15pxpx 0 0; padding:0.3em; border: solid 2px #87CEEB; font-size: ; background-color: transparent; border-bottom: none;" width="31.333333333333%">Bravo<td class="tab" style="text-align: center; -moz-border-radius: Expression error: Unrecognized word "px".px 15pxpx 0 0; -webkit-border-radius: Expression error: Unrecognized word "px".px 15pxpx 0 0; border-radius: Expression error: Unrecognized word "px".px 15pxpx 0 0; padding:0.3em; border: solid 2px #87CEEB; font-size: ; background-color:
- D3D3D3;" width="31.333333333333%">Charlie
{{ Tab top
| Tab-1 = Alpha
| URL-1 = France
| Tab-2 = Bravo
| URL-2 = Template:Tab top/Examples
| Tab-3 = Charlie
| URL-3 = Main Page
| rounding = 15px
| asym = 3
}}
The upper right corner get a rounding with a radius of 15px, when the upper left corner get a rounding with a radius 3 times greater (3 x 15px = 45px).
altering the default colors the border style
<td class="tab" style="text-align: center; -moz-border-radius: Expression error: Unrecognized word "px".px 15pxpx 0 0; -webkit-border-radius: Expression error: Unrecognized word "px".px 15pxpx 0 0; border-radius: Expression error: Unrecognized word "px".px 15pxpx 0 0; padding:0.3em; border: dashed 5px #964B00; font-size: ; background-color: tan;" width="31.333333333333%">Alpha<td class="tab" style="text-align: center; -moz-border-radius: Expression error: Unrecognized word "px".px 15pxpx 0 0; -webkit-border-radius: Expression error: Unrecognized word "px".px 15pxpx 0 0; border-radius: Expression error: Unrecognized word "px".px 15pxpx 0 0; padding:0.3em; border: dashed 5px #964B00; font-size: ; background-color: ivory; border-bottom: none;" width="31.333333333333%">Bravo<td class="tab" style="text-align: center; -moz-border-radius: Expression error: Unrecognized word "px".px 15pxpx 0 0; -webkit-border-radius: Expression error: Unrecognized word "px".px 15pxpx 0 0; border-radius: Expression error: Unrecognized word "px".px 15pxpx 0 0; padding:0.3em; border: dashed 5px #964B00; font-size: ; background-color: tan;" width="31.333333333333%">Charlie
{{ Tab top
| Tab-1 = Alpha
| URL-1 = France
| Tab-2 = Bravo
| URL-2 = Template:Tab top/Examples
| Tab-3 = Charlie
| URL-3 = Main Page
| rounding = 15px
| asym = 3
| border = dashed 5px #964B00
| frame background=ivory
| tab background=tan
}}
the 3 last parameters override the built-in default colors & style.
adding dedicated color to tabs
<td class="tab" style="text-align: center; -moz-border-radius: Expression error: Unrecognized word "px".px 15pxpx 0 0; -webkit-border-radius: Expression error: Unrecognized word "px".px 15pxpx 0 0; border-radius: Expression error: Unrecognized word "px".px 15pxpx 0 0; padding:0.3em; border: solid 2px #964B00; font-size: ; background-color: lightblue;" width="31.333333333333%">Alpha<td class="tab" style="text-align: center; -moz-border-radius: Expression error: Unrecognized word "px".px 15pxpx 0 0; -webkit-border-radius: Expression error: Unrecognized word "px".px 15pxpx 0 0; border-radius: Expression error: Unrecognized word "px".px 15pxpx 0 0; padding:0.3em; border: solid 2px #964B00; font-size: ; background-color: ivory; border-bottom: none;" width="31.333333333333%">Bravo<td class="tab" style="text-align: center; -moz-border-radius: Expression error: Unrecognized word "px".px 15pxpx 0 0; -webkit-border-radius: Expression error: Unrecognized word "px".px 15pxpx 0 0; border-radius: Expression error: Unrecognized word "px".px 15pxpx 0 0; padding:0.3em; border: solid 2px #964B00; font-size: ; background-color: tan;" width="31.333333333333%">Charlie
{{ Tab top
| Tab-1 = Alpha
| URL-1 = France
| tab background-1 = lightblue
| Tab-2 = Bravo
| URL-2 = Template:Tab top/Examples
| tab background-2 = red
| Tab-3 = Charlie
| URL-3 = Main Page
| rounding = 15px
| asym=3
| border = solid 2px red
| frame background = ivory
| tab background = tan
The tab #1 got its own background color (lightblue) which is used as the tab is not selected. The tab #2 got its own background color (red) but is not used as this is the selected tab and therefore gets the same color than the frame background The tab #3 does not get its own background color, thus the default one is used/