View source for User:Ayjayaredii/Wiki Help

This page serves as a comprehensive guide for wiki editors to understand and effectively use various editing syntax and CSS styling within the [[Starship Simulator]] wiki. This knowledge is crucial for creating well-formatted, visually appealing, and dynamic pages.

== Introduction ==
This wiki uses MediaWiki's own simplified markup, but also incorporates standard HTML tags and inline CSS for more advanced formatting and layout control. Additionally, MediaWiki provides its own unique tags and parser functions that are essential for template creation and specialized content display.

Understanding these tools will allow you to:
* Format text and elements precisely.
* Create custom layouts and boxes.
* Develop robust and flexible templates.
* Display code examples without unintended rendering.

This guide is divided into the following sections:
* [[#Basic Wiki Markup|Basic Wiki Markup]]: Essential, simple formatting using MediaWiki's native syntax.
* [[#Editing Syntax|Editing Syntax]]: Covers both standard HTML elements and MediaWiki-specific tags/functions for content structure and processing.
* [[#Styling with CSS|Styling with CSS]]: Explains how to apply visual properties to elements using CSS.
* [[#Basic Wiki Tables|Basic Wiki Tables]] A quick guide to the basics of ctreating a wiki table

== Basic Wiki Markup ==
This section covers the most common and fundamental formatting options available directly through MediaWiki's native syntax, without needing HTML tags or complex functions.

This wiki uses MediaWiki's own simplified markup, but also incorporates standard HTML tags and inline CSS for more advanced formatting and layout control. Additionally, MediaWiki provides its own unique tags and parser functions that are essential for template creation and specialized content display.

Understanding these tools will allow you to:
* Format text and elements precisely.
* Create custom layouts and boxes.
* Develop robust and flexible templates.
* Display code examples without unintended rendering.


<div style="width: 100%; overflow: hidden;">
<div style="border: 2px solid black; padding: 10px; width: auto; border-radius:15px; text-align: center; font-size: 1em; margin: 0 auto; box-sizing: border-box;">
=== Headers Syntax ===
<p> '''Purpose:''' To create hierarchical headings on a page, automatically generating a Table of Contents (TOC) for easier navigation.
</p>
{| class="wikitable" style="width:100%; margin-top:0.5em; margin-bottom:1em; text-align: left;"
|-
|-
! colspan="4" | '''Syntax:''' <code>=</code> signs on each side of the heading text. The number of <code>=</code> signs determines the heading level.
|-
! Header Type !! Syntax !! Usage !! HTML Tag Alt
|-
| Title || <nowiki>=TEXT=</nowiki> || To add text as a main title (rarely used, as the page name is usually the title). || <nowiki><h1></nowiki>
|-
| Main Header || <nowiki>==TEXT==</nowiki> || To add a main '''header''' section. || <nowiki><h2></nowiki>
|-
| Sub Header || <nowiki>===TEXT===</nowiki> || To add a sub-header to the section above. || <nowiki><h3></nowiki>
|-
| Sub Header 2 || <nowiki>====TEXT====</nowiki> || To add a further sub-header to the section above. || <nowiki><h4></nowiki>
|-
| Sub Header 3 || <nowiki>=====TEXT=====</nowiki> || To add a deeper sub-header to the section above. || <nowiki><h5></nowiki>
|}
</div>
</div>


<div style="width: 100%; overflow: hidden;">
<div style="border: 2px solid black; padding: 10px; width: auto; border-radius:15px; text-align: center; font-size: 1em; margin: 0 auto; box-sizing: border-box;">
=== Bold and Italic Text ===
'''Purpose:''' To emphasize text by making it bold, italic, or both. This is the most common way to format text on a wiki.
{| class="wikitable" style="width:100%; margin-top:0.5em; margin-bottom:1em;"
|-
! colspan="3" | '''Syntax:''' <code>'</code> sign on each side of the text. The number of <code>'</code> signs determines the text style.
|-
! Code !! Result !! HTML Tag Alt
|-
| <code><nowiki>This is '''bold'''.</nowiki></code>
| This is '''bold'''. || <nowiki><b></nowiki>
|-
| <code><nowiki>This is ''italic''.</nowiki></code>
| This is ''italic''. || <nowiki><i></nowiki>
|-
| <code><nowiki>This is '''''bold and italic'''''.</nowiki></code>
| This is '''''bold and italic'''''. || <nowiki><b><i></nowiki>
|}
</div>
</div>


<div style="width: 100%; overflow: hidden;">
<div style="border: 2px solid black; padding: 10px; width: auto; border-radius:15px; text-align: center; font-size: 1em; margin: 0 auto; box-sizing: border-box;">
=== Lists ===
'''Purpose:''' To organize information into readable lists. MediaWiki provides simple syntax for bulleted and numbered lists.
{| class="wikitable" style="width:100%; margin-top:0.5em; margin-bottom:1em; text-align: left;"
|-
! colspan="3" | '''Syntax:''' <code>*</code> & <code>#</code> signs on each side of the text. The number of <code>*</code> & <code>#</code> signs determines the list level.
|-
! Code !! Result !! HTML Tag Alt
|-
| <nowiki>* First point</nowiki><br><nowiki>** Sub-point</nowiki><br><nowiki>* Second point</nowiki>
|
* First point
** Sub-point
* Second point
| rowspan="4" | See Section [[#Common Text & Formatting Tags]]
|-
| <nowiki># First step</nowiki><br><nowiki>## Sub-step</nowiki><br><nowiki># Second step</nowiki>
|
# First step
## Sub-step
# Second step
|-
! colspan="2" | These can be combined but be careful with the formating. ''for example''. <span style="color: red; font-style: italic;">(some data made up)</span>
|-
| <nowiki>'''List of Ship'''</nowiki><br><nowiki>* Megelan CLass</nowiki><br><nowiki>**# UNSF Megelan</nowiki><br><nowiki>**# UNSF Megelan (refit)</nowiki><br><nowiki>** UNSF Seeker (''Megelan Sister Ship'')</nowiki><br><nowiki># Pathfinder Class</nowiki>
| '''List of Ship'''
* Megelan CLass
**# UNSF Megelan
**# UNSF Megelan (refit)
** UNSF Seeker (''Megelan Sister Ship'')
* Pathfinder Class
|}
</div>
</div>


<div style="width: 100%; overflow: hidden;">
<div style="border: 2px solid black; padding: 10px; width: auto; border-radius:15px; text-align: center; font-size: 1em; margin: 0 auto; box-sizing: border-box;">
=== Horizontal Rule ===
'''Purpose:''' To create a horizontal line that visually separates sections of content.
{| class="wikitable" style="width:100%; margin-top:0.5em; margin-bottom:1em;"
|-
! colspan="3" | '''Syntax:''' Four hyphens on a line by themselves (<code><nowiki>----</nowiki></code>).
|-
! Code !! Result !! HTML Tag Alt
|-
| <code><nowiki>Content Above</nowiki></code><br><code><nowiki>----</nowiki></code><br><code><nowiki>Content Below</nowiki></code>
| Content Above 
----
Content Below
|rowspan="2" | <nowiki><hr></nowiki>
|}
</div>
</div>

== Editing Syntax ==
This section covers the core syntax used for structuring content on this wiki, including common HTML tags and MediaWiki's specialized tags and parser functions.

<div style="width: 100%; overflow: hidden;"> <div style="border: 2px solid black; padding: 10px; width: auto; border-radius:15px; text-align: center; font-size: 1em; margin: 0 auto; box-sizing: border-box;">
=== ''<nowiki><code></nowiki>'' - Code Snippet ===
'''Purpose:''' Used to display short fragments of computer code or literal input/output, typically rendered in a monospaced font. It helps to differentiate code from regular text.

'''Syntax:''' <code><nowiki><code>Value</code></nowiki></code>

'''Examples:'''
{| class="wikitable" style="width:100%; margin-top:0.5em; margin-bottom:1em;"
|-
! Code !! Result
|-
| ''<nowiki>Press <code>F</code> to interact!</nowiki>''
| Press <code>F</code> to interact!
|-
| ''<nowiki>To teleport ship type <code>/shiptp</code> into the chat box in game</nowiki>''
| To teleport ship type <code>/shiptp</code> into the chat box in game
|}
</div>
{{clear}}

<div style="width: 100%; overflow: hidden;"> <div style="border: 2px solid black; padding: 10px; width: auto; border-radius:15px; text-align: center; font-size: 1em; margin: 0 auto; box-sizing: border-box;">
=== ''<nowiki><div></nowiki>'' - Division ===
'''Purpose:''' A generic container tag used to group block-level content. It does not have any inherent visual formatting beyond creating a new line, but it is extremely useful for applying CSS styles to a block of content or for creating complex layouts).

'''Syntax:''' <code><nowiki><div>Content</div></nowiki></code>

'''Example:'''
<br>
'''Code'''
<br>
<code><nowiki><div style=" padding: 10px; border-radius: 5px;">This content is within a custom div box.</div></nowiki></code>
<br>
'''Result'''
<div style=" padding: 10px; border-radius: 5px;">This content is within a custom div box.</div>
</div>
{{clear}}

<div style="width: 100%; overflow: hidden;"> <div style="border: 2px solid black; padding: 10px; width: auto; border-radius:15px; text-align: center; font-size: 1em; margin: 0 auto; box-sizing: border-box;">

=== ''<nowiki><span></nowiki>'' - Span ===
'''Purpose:''' A generic inline container tag used to group small fragments of text or other inline elements. Like <nowiki>`<div>`</nowiki>, it has no inherent visual formatting but is useful for applying CSS styles to a specific piece of text *without* starting a new line.

'''Syntax:''' <code><nowiki><span>Text</span></nowiki></code>

'''Example:'''
{| class="wikitable" style="width:100%; margin-top:0.5em; margin-bottom:1em;"
|-
! Code !! Result
|-
| ''<nowiki>This is <span style="color: red; font-weight: bold;">urgent</span>!</nowiki>''
| This is <span style="color: red; font-weight: bold;">urgent</span>!
|-
| ''<nowiki>When the valve is open you will see a <span style="color: green; font-style: italic;">Green</span> light on the display.</nowiki>''
| When the valve is open you will see a <span style="color: green; font-style: italic;">Green</span> light on the display.
|}
</div>
</div>
{{clear}}

<div style="width: 100%; overflow: hidden;"> <div style="border: 2px solid black; padding: 10px; width: auto; border-radius:15px; text-align: center; font-size: 1em; margin: 0 auto; box-sizing: border-box;">
=== ''<nowiki><nowiki></nowiki>'' - No Wiki Markup ===
'''Purpose:''' Prevents MediaWiki from parsing any wiki markup (like `[[links]]`, `{{templates}}`, `'''bold'''`) within its tags. The content is displayed exactly as typed. Essential for showing code examples of wiki markup.

'''Syntax:''' <code><nowiki><nowiki>Content with {{markup}}</nowiki></nowiki></code>

'''Example:'''
{| class="wikitable" style="width:100%; margin-top:0.5em; margin-bottom:1em;"
|-
! Code !! Result
|-
| ''<nowiki>Use <nowiki>[[Magellan Class]]</nowiki> to link to the ship.</nowiki>''
| Use <nowiki>[[Magellan Class]]</nowiki> to link to the ship.
|-
| ''<nowiki><nowiki>This is a <span style="color: red; font-weight: bold;">example</span>of a '''tag'' being ''ignored!''</nowiki></nowiki>''
| <nowiki>This is a <span style="color: red; font-weight: bold;">example</span>of a '''tag'' being ''ignored!''</nowiki>
|}
</div>
{{clear}}

<div style="width: 100%; overflow: hidden;">
<div style="border: 2px solid black; padding: 10px; width: auto; border-radius:15px; text-align: center; font-size: 1em; margin: 0 auto; box-sizing: border-box;">
<h3>''<nowiki><includeonly></nowiki> & <nowiki><noinclude></nowiki>'' - Transclusion</h3>
<p> '''Purpose:''' Sets the condition on a template page that will either be displayed or not when viewing the template when transclusion to a page itself directly using the <nowiki>{{{template:page}}}</nowiki> function.</p>
<h4>''<nowiki><includeonly></nowiki>'' Only Include </h4>
<p>'''Purpose:'''</h4><p> Content wrapped in <nowiki><includeonly></nowiki> tags on a template page will '''only''' be processed and displayed when that template is ''transcluded'' (used) on another page. It will '''not''' be visible when viewing the template page itself directly.</p>
<p>'''Syntax:'''</h4> <code><nowiki>&lt;includeonly&gt;</nowiki>Content for transclusion only<nowiki>&lt;/includeonly&gt;</nowiki></code>
<h4>''<nowiki><noinclude></nowiki>'' No Include </h4>
<p>'''Purpose:'''</h4> <p>Content wrapped in <nowiki><noinclude></nowiki> tags on a template page will '''only''' be processed and displayed when viewing the template page itself directly. It will '''not''' be included or displayed when the template is ''transcluded'' onto another page.</p>
<p>'''Syntax:'''</h4> <code><nowiki>&lt;noinclude&gt;</nowiki>Documentation and categories for the template.<nowiki>&lt;/noinclude&gt;</nowiki></code>
</div>
</div>
{{clear}}



<div style="width: 100%; overflow: hidden;">
    <div style="border: 2px solid black; padding: 10px; width: auto; border-radius:15px; text-align: center; font-size: 1em; margin: 0 auto; box-sizing: border-box;">
<h3>Common Text & Formatting Tags</h3>
        <p>These HTML tags are used for basic text formatting and structural elements. While MediaWiki has its own simplified markup for bold, italic, and horizontal rules, these HTML tags offer alternatives and are useful when you need to embed styling directly within more complex HTML structures.</p>
        
        {| class="wikitable" style="width:100%; margin-top:0.5em; margin-bottom:1em; text-align: left;"
        |-
        ! Tag !! Purpose !! Syntax !! Example Code !! Result
        |-
        | '''<nowiki><b> / <strong></nowiki>'''
        | Bolds text, or indicates strong importance.
        | <nowiki><b>Bold Text</b></nowiki> or <nowiki><strong>Strong Text</strong></nowiki>
        | <nowiki>The reactor is <b>ONLINE</b>.</nowiki>
        | The reactor is <b>ONLINE</b>.
        |-
        | '''<nowiki><i> / <em></nowiki></i>'''
        | Italicizes text, or indicates emphasis.
        | <nowiki><i>Text</i></nowiki> or <nowiki><em>Emphasized Text</em></nowiki>
        | <nowiki>This is an <i>important</i> detail.</nowiki>
        | This is an <i>important</i> detail.
        |-
        | '''<nowiki><u></nowiki>'''
        | Underlines text. (Note: Underlining is often discouraged for web text as it can be confused with hyperlinks).
        | <nowiki><u>Text</u></nowiki>
        | <nowiki><u>Warning: Unstable Plasma!</u></nowiki>
        | <u>Warning: Unstable Plasma!</u>
        |-
        | '''<nowiki><br></nowiki>'''
        | Creates a single line break.
        | <nowiki><br></nowiki> or <nowiki><br /></nowiki>
        | <nowiki>Section One<br />Section Two</nowiki>
        | Section One<br />Section Two
        |-
        | '''<nowiki><hr></nowiki>'''
        | Creates a thematic break or horizontal line.
        | <nowiki><hr></nowiki> or <nowiki><hr /></nowiki>
        | <nowiki>Section One<hr />Section Two</nowiki>
        | Section One<hr />Section Two
        |-
        | '''<nowiki><sup></nowiki>'''
        | Displays text slightly above the normal line (superscript).
        | <nowiki>Text<sup>Superscript</sup></nowiki>
        | <nowiki>Mass: 1.04 x Sol<sup>2</sup></nowiki>
        | Mass: 1.04 x Sol<sup>2</sup>
        |-
        | '''<nowiki><sub></nowiki>'''
        | Displays text slightly below the normal line (subscript).
        | <nowiki>Text<sub>Subscript</sub></nowiki>
        | <nowiki>Coolant: H<sub>2</sub>O</nowiki>
        | Coolant: H<sub>2</sub>O
        |-
        | '''<nowiki><ul></nowiki>'''
        | Defines an '''unordered (bulleted) list'''. 
        |Used for grouping related items where order doesn't matter.
        | <nowiki><ul><li>Item 1</li><li>Item 2</li></ul></nowiki>
        | <ul><li>Item 1</li><li>Item 2</li></ul>
        |-
        | '''<nowiki><ol></nowiki>'''
        | Defines an '''ordered (numbered) list'''.
        | Used for grouping related items where the order or sequence is important.
        | <nowiki><ol><li>Step 1</li><li>Step 2</li></ol></nowiki>
        | <ol><li>Step 1</li><li>Step 2</li></ol>
        |-
        | '''<<nowiki><li></nowiki>'''
        | Defines an item within a '''list'''. 
        | Must be used inside an <nowiki><ul></nowiki> or <nowiki><ol></nowiki> tag.
        | <nowiki><li>List item content</li></nowiki>
        | <ul><li>List item content</li></ul>
        |}
    </div>
</div>
{{clear}}


== Styling with CSS ==
CSS (Cascading Style Sheets) is used to control the visual presentation of HTML elements, such as colors, fonts, spacing, and layout. In MediaWiki, CSS is most commonly applied using the `style` attribute directly within an HTML tag (inline styles).


<div style="width: 100%; overflow: hidden;">
<div style="border: 2px solid black; padding: 10px; width: auto; border-radius:15px; text-align: center; font-size: 1em; margin: 0 auto; box-sizing: border-box;">
<h3> General Syntax </h3>
<p>'''Inline Style Attribute:''' The `style` attribute is placed inside the opening tag of an HTML element (e.g., <code><nowiki><div style="color: blue;">Content</div></nowiki></code>).
<br> Properties and values are separated by a colon (`:`), and multiple property-value pairs are separated by a semi-colon (`;`).
<br> <div style="background-color: #ABCDEF; border: 2px solid black; padding: 10px; width: 50%; border-radius: 15px; margin: 0 auto; text-align: center;">This is a box with multiple styles applied.
<hr><code><nowiki><div style="background-color: #ABCDEF; border: 2px solid black; padding: 10px; width: 50%; border-radius: 15px; margin: 0 auto; text-align: center;">This is a box with multiple styles applied.</div></nowiki></code></p>
<div style="width: 50%; margin: 0 auto; text-align: left;">
</div></div>
<ul style="list-style-position: inside; padding-left: 0; text-align: center">
<li><code>px</code> (pixels): An absolute unit, good for fixed sizes (e.g., `100px`).</li>
<li><code>%</code> (percentage): Relative to the parent element's size (e.g., `50%` of parent's width).</li>
<li><code>em</code>: Relative to the font size of the element (e.g., `1em` is current font size; `2em` is twice). This is good for scaling.</li>
<li><code>rem</code>: Relative to the font size of the root HTML element.</li>
<li><code>auto</code>: Browser automatically calculates values (e.g., used for `margin` to center block elements).</li>
</ul>
</div>
</p>
</div>
</div>
{{clear}}

<div style="width: 100%; overflow: hidden;">
    <div style="border: 2px solid black; padding: 10px; width: auto; border-radius:15px; text-align: center; font-size: 1em; margin: 0 auto; box-sizing: border-box;">
        <h3> Common Text Styles </h3>
        <p>These properties control the appearance of text within an element.</p>
        {| class="wikitable" style="width:100%; margin-top:0.5em; margin-bottom:1em; text-align: left;"
        |-
        ! Property !! Purpose !! Example Code !! Result
        |-
        | '''`color`'''
        | Sets the text color.
        | <code><nowiki>style="color: red;"</nowiki></code>
        | <span style="color: red;">Red Text</span>
        |-
        | '''`font-size`'''
        | Sets the size of the text.
        | <code><nowiki>style="font-size: 1.2em;"</nowiki></code>
        | <span style="font-size: 1.2em;">Larger Text</span>
        |-
        | '''`text-align`'''
        | Aligns inline content (text, images) horizontally within an element.
        | <code><nowiki>style="text-align: center;"</nowiki></code>
        | <div style="text-align: center;">Centered Text</div>
        |-
        | '''`font-weight`'''
        | Sets the boldness of the text. Common values are `bold` or numerical values like `700`.
        | <code><nowiki>style="font-weight: bold;"</nowiki></code>
        | <span style="font-weight: bold;">Bold Text</span>
        |}
    </div>
</div>
{{clear}}

<div style="width: 100%; overflow: hidden;">
    <div style="border: 2px solid black; padding: 10px; width: auto; border-radius:15px; text-align: center; font-size: 1em; margin: 0 auto; box-sizing: border-box;">
        <h3> Common Box/Layout Styles </h3>
        <p>These properties control the appearance and positioning of block-level elements like `div`s.</p>
        {| class="wikitable" style="width:100%; margin-top:0.5em; margin-bottom:1em; text-align: left;"
        |-
        ! Property !! Purpose !! Example Code !! Result
        |-
        | '''`background-color`'''
        | Sets the background color of the element. Can use color names (`blue`), hex codes (`#ABCDEF`), or RGB (`rgb(255,0,0)`).
        | <code><nowiki>style="background-color: #ABCDEF;"</nowiki></code>
        | <div style="background-color: #ABCDEF; padding: 5px;">Colored Background</div>
        |-
        | '''`border`'''
        | Sets all properties of an element's border (width, style, color) in one go.
        | <code><nowiki>style="border: 2px solid black;"</nowiki></code>
        | <div style="border: 2px solid black; padding: 5px;">Bordered Box</div>
        |-
        | '''`border-radius`'''
        | Rounds the corners of an element's border.
        | <code><nowiki>style="border-radius: 15px;"</nowiki></code>
        | <div style="border: 2px solid black; border-radius: 15px; padding: 5px;">Rounded Corners</div>
        |-
        | '''`padding`'''
        | Creates space *inside* an element, between its content and its border.
        | <code><nowiki>style="padding: 10px;"</nowiki></code>
        | <div style="border: 1px solid gray; padding: 10px;">Padded Content</div>
        |-
        | '''`width`'''
        | Sets the width of an element.
        | <code><nowiki>style="width: 50%;"</nowiki></code>
        | <div style="border: 1px solid gray; width: 50%; ">Half-width Box</div>
        |-
        | '''`margin`'''
        | Creates space *outside* an element, between its border and other elements. Used with `auto` to center a block element with a defined width.
        | <code><nowiki>style="margin: 0 auto;"</nowiki></code>
        | <div style="border: 1px solid gray; width: 50%; margin: 0 auto; ">Centered Box</div>
        |-
        | '''`float`'''
        | Positions an element to the left or right, allowing other content to wrap around it.
        | <code><nowiki>style="float: left;"</nowiki></code>
        | <div style="float: left; border: 1px solid gray; padding: 5px; margin-right: 10px; ">Floated Left</div> This text wraps.
        |-
        | '''`clear`'''
        | Forces an element to move below (clear) any preceding floated elements.
        | <code><nowiki>style="clear: both;"</nowiki></code>
        | <div style="float: left; border: 1px solid gray; padding: 5px; margin-right: 10px; ">Floated Left</div><div style="clear: both; border: 1px solid gray; padding: 5px; margin-top: 10px; ">Cleared Below</div>
        |-
        | '''`display`'''
        | Specifies how an element is displayed (e.g., `block`, `inline`, `flex`). `flex` is powerful for complex layouts.
        | <code><nowiki>style="display: flex;"</nowiki></code>
        | <div style="border: 1px solid gray; padding: 5px; display: flex; justify-content: space-around; "><span>Item 1</span><span>Item 2</span></div>
        |-
        | '''`box-sizing`'''
        | Defines how an element's total width and height are calculated (whether padding and border are included in the specified `width`/`height`). `border-box` is often preferred for layout.
        | <code><nowiki>style="box-sizing: border-box;"</nowiki></code>
        | <div style="width: 100px; padding: 20px; border: 5px solid red;  box-sizing: border-box;">Box content. (This box is 100px wide, including padding border)</div>
        |}
    </div>
</div>
{{clear}}

== Basic Wiki Tables ==


Understanding these tools will allow you to:
* Create and formate Wiki Tables on a Page
* Create custom table layouts

<div style="width: 100%; overflow: hidden;"> <div style="border: 2px solid black; padding: 10px; width: auto; border-radius:15px; text-align: left; font-size: 1em; margin: 0 auto; box-sizing: border-box;">
        <h3>Adding Wiki Tables</h3>
        <p>'''Purpose''': To display a database or sheet that is more suited to display Data that simple text and list would be combasome to read.</p>

        <p>'''createing a table'''</p>
        <p>To create a table use the line <code><nowiki>{| class="wikitable"</nowiki></code> To mark the end of the table use the line <code><nowiki>|}</nowiki></code></p>

        <p>'''Structure the table'''<br>
        Now we have the table created we can add in collunms and rows.<br>
        To start the next row use the line <code><nowiki>|-</nowiki></code><br>
        To start adding the collums add the line <code><nowiki>|</nowiki></code> at the start and then add in the nex collum with <code><nowiki>||</nowiki></code><br>
        The content can then be added between the <code><nowiki>|</nowiki></code>&<code><nowiki>||</nowiki></code> lines.<br>
        Below is a Example of a simple table using:</p>
        
        <div style="width: 100%; overflow: hidden;"> <div style="float: left; text-align: left; width: 49%;"> <p>Code Example:</p>
                <pre style="border: 1px dashed gray; padding: 5px; overflow: auto;"><nowiki>{| class="wikitable"
|-
| A1 || B1 || C1 || D1 || E1
|-
| A2 || B2 || C2 || D2 || E2
|-
| A3 || B3 || C3 || D3 || E3
|}</nowiki></pre>
            </div>
            <div style="float: right; text-align: left; width: 49%;"> <p>Rendered Example:</p>
                {| class="wikitable"
                |-
                | A1 || B1 || C1 || D1 || E1
                |-
                | A2 || B2 || C2 || D2 || E2 
                |-
                | A3 || B3 || C3 || D3 || E3
                |}
            </div>
        </div>
{{clear}} </div>
</div>
{{clear}}

<div style="width: 100%; overflow: hidden;"> <div style="border: 2px solid black; padding: 10px; width: auto; border-radius:15px; text-align: left; font-size: 1em; margin: 0 auto; box-sizing: border-box;">
        <h3>Adding Headers to tables</h3>
        <p>To add a header to a table you need replace the first <code><nowiki>|</nowiki></code> with a <code><nowiki>!</nowiki></code></p>
        <p>To add other headers the add <code><nowiki>!!</nowiki></code> between the context of each header.</p>
        <p>For example:</p>
        
        <div style="width: 100%; overflow: hidden;"> <div style="float: left; text-align: left; width: 49%;"> <p>Code Example:</p>
                <pre style="border: 1px dashed gray; padding: 5px; overflow: auto;"><nowiki>{| class="wikitable"
|-
! 1st !! 2nd !! 3rd !! 4th !! 5th
|-
| A1 || B1 || C1 || D1 || E1
|-
| A2 || B2 || C2 || D2 || E2 
|-
| A3 || B3 || C3 || D3 || E3
|}</nowiki></pre>
            </div>
            <div style="float: right; text-align: left; width: 49%;"> <p>Rendered Example:</p>
                {| class="wikitable"
                |-
                ! 1st !! 2nd !! 3rd !! 4th !! 5th
                |-
                | A1 || B1 || C1 || D1 || E1
                |-
                | A2 || B2 || C2 || D2 || E2 
                |-
                | A3 || B3 || C3 || D3 || E3
                |}
            </div>
        </div>
{{clear}} </div>
</div>
{{clear}}

<div style="width: 100%; overflow: hidden;"> <div style="border: 2px solid black; padding: 10px; width: auto; border-radius:15px; text-align: left; font-size: 1em; margin: 0 auto; box-sizing: border-box;">
        <h3>Colspan and Rowspan</h3>
        <p>Adding Column Spans and Row Spans will allow you to merge cells in the table together.</p>
        <p><code>colspan</code> will merge cells to the right, and <code>rowspan</code> will merge cells downwards.</p>
        <p>You can set the number of cells to merge with by adding <code>="''number of cells''"</code> to the col/rowspan line followed with an <code><nowiki>|</nowiki></code> then the content of the cell.</p>
        <p>For example:</p>
        
        <div style="width: 100%; overflow: hidden;"> <div style="float: left; text-align: left; width: 49%;"> <p>Code Example:</p>
                <pre style="border: 1px dashed gray; padding: 5px; overflow: auto;"><nowiki>{| class="wikitable"
|-
! colspan="5" | 1st
|-
| A1 || B1 || C1 || D1 || E1
|-
| A2 || B2 || C2 || D2 || E2
|-
| A3 || B3 || C3 || D3 || E3
|}</nowiki></pre>
            </div>
            <div style="float: right; text-align: left; width: 49%;"> <p>Rendered Example:</p>
                {| class="wikitable"
                |-
                ! colspan="5" | 1st
                |-
                | A1 || B1 || C1 || D1 || E1
                |-
                | A2 || B2 || C2 || D2 || E2
                |-
                | A3 || B3 || C3 || D3 || E3
                |}
            </div>
        </div>

  <div style="width: 100%; overflow: hidden;"> <div style="float: left; text-align: left; width: 49%;"> <p>Code Example:</p>
                <pre style="border: 1px dashed gray; padding: 5px; overflow: auto;"><nowiki>{| class="wikitable"
|-
| rowspan="3"| A || B1 || C1 || D1 || E1
|-
| B2 || C2 || D2 || E2
|-
| B3 || C3 || D3 || E3
|}</nowiki></pre>
            </div>
            <div style="float: right; text-align: left; width: 49%;"> <p>Rendered Example:</p>
                {| class="wikitable"
                |-
                | rowspan="3"| A || B1 || C1 || D1 || E1
                |-
                | B2 || C2 || D2 || E2
                |-
                | B3 || C3 || D3 || E3
                |}
            </div>
        </div>
{{clear}} </div>
</div>
{{clear}}