Tables

WikiText does **not** function in the comments. To test out your coding, please either visit your sandbox or this page's talk page.

## Introduction

**Tables** are a subject that may be confusing, however by memorizing a few basic rules and learning how to use them, you may find that tables are extremely useful from everything to visual appeal to formatting and structuring your page.

## Basic Tables

if you need only one row of tables, though this is not recommended -- but, it is recommended to take a look at each one of these tables to see how it works!

**Simple Table** **(No Borders, Backgrounds, Etc.)**

```
{|style="width:680px;"
```

**Bordered table (Whole thing is in one border.)**

```
{|style="width:680px;border:1px solid #000"
```

**Bordered table #2 (Each content bit has its own border.)**

```
{|style="width:680px"
```

## Adding backgrounds, changing border and etc.

You can add your own background, font size and etc to these tables! Here's how.

Lets take bordered table from a bit back--you will most likely be using it if you want to have the whole thing set as a background, and one border outlining it. Simply add (style here);(styles size, colour, etc)
for example: the line of code "background:pink;" would change the background to pink. More on applying such can be seen below!

**Bordered Table #1.5 (background; font size etc.)**

```
{|style="width:680px;background:pink;font-size:15pt;font-family:comic sans ms;color:black;"
```

I forgot to mention--yes, if we took Bordered Table #1.5 and combined it with Bordered Table #2, we could still be able to give each column its own border and stuff! It looks a bit like an outline, or a slight glow.

```
{|style="width:680px;background:pink;font-size:15pt;font-family:comic sans ms;color:black;"
```

### Regular tables

Tables that have information UNDER the headers. This can be used by applying |- to the basic tables above.
(make sure to remove the stuff after <-- if you are using)

```
```

 content

You can customize these just like the tables above--so no worries!

```
```

 content

### Complex tables

This below is a bit more of a trickier version of the basic tables above, but it allows for easier use of rowspan and colspan- which will be explained later on.

```
{|class="article-table"
!Header Text Goes Here
!Header Text Goes Here

```
{| style="width:90%"

!Source
!Preview

```
! Header
! Header

```

## Article Tables

This is a single boxed article table.

Code:

```
{|class="article-table"
!Header Text Goes here

```

Output:

How to make and add boxes is quite easy. To add a header, just add another exclamation mark under the other one, so it would look like this:

```
{|class="article-table"
!Header Text Goes Here
!Header Text Goes Here

```

Output:

To create a new line of boxes, add a

In between the different labels. Like so

```
{|class="article-table"
!Header Text Goes Here
!Header Text Goes Here

```

Output:

 Text Goes Here

## How to customize different cells

Here's how you can customize each box in the article tables.
In front of the Text you have to put a |style="put what you want to style here", and the same for the headers. For example, here I'm turning the boxes orange.
Code:

```
{|class="article-table"
!Header Text Goes Here
!Header Text Goes Here

```

Output:

 Text Goes Here

## HTML Table

Here's the basic code to make a table using HTML:

```
<table>
<tr>
<th>Column One</th>
<th>Column Two</th>
<th>Column Three</th>
</tr>

<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>

<tr>
<th>1'</th>
<th>2'</th>
<th>3'</th>
</tr>
</table>

```

```
table, th, td {
 border: 1px solid black;
}

```

```
table, th, td {
 border: 1px solid black;
 border-collapse: collapse;
}

```

Result:

*You can put the border style codes in WikiText editor one by one, but putting it into the css editor would be much easier and faster.* **Warning that putting it into the css editor would effect all the table, td, and th tags!**

More information coming soon!