PSA How to Table

Yeeeaah, looking back, my last attempt at a mini-tutorial for table making went unnoticed. Mainly because I put it in Really Useful Stuff. And it wasn't as detailed as it could have been, but at the same time, I'd rather not have to write a 50-page essay on how to make tables on wiki. And I don't think everyone here would want to read through that, so I'd like to keep it as simple as possible while still providing necessary information. So, let's try this again.


So first off, let's start with what you need to start a super simple table.

~Part 1: Basic Table-Making Necessities~​

If you're using the enhanced editing toolbar, you should come across an option for making a table. By default, it should produce something like this:

Code:

{| class="wikitable" border="1"
|-
! header 1
! header 2
! header 3
|-
| row 1, cell 1
| row 1, cell 2
| row 1, cell 3
|-
| row 2, cell 1
| row 2, cell 2
| row 2, cell 3
|}

If you're not able to get it through the wiki itself, then just use this to follow along.


First off, focus on the pair of curly brackets and vertical bars at the beginning and the end ({| and |}). You are going to need these for every table you make, as all content used to make your table go in between these.

Next, look at |-. This represents the start of a new row in your table. To start a new row, add this between what should be the last cell of a row and the first cell of the next.

Now then, typically, you'll need to start with a vertical bar. Cells of a single row can be separated one of two ways.

• You can start separate lines with vertical bars. This is shown in the example above.
• You can list them all in a single row, separating every cell by double vertical bars. (Note: If you chose the latter and only use single vertical bars, what should be the first cell is applied as a format modifier to the cell, and the rest of the cells are merged into a single cell. (On a note of formatting modifiers though, we'll get into it later.))

As I said, cells are typically represented by these vertical bars at the start of a line. However, you can use exclamation points in place of vertical bars. This will result in the cells these are used for becoming headings, complete with automatically bolded text. However, in the case of the latter option listed above above, you will need to replace all vertical bars you would use with exclamation points.

Given this by itself, you could probably make a table right now. Though it would lack borders of any kind. Look back up at the example table and take note of both class="wikitable" and border="1". class="wikitable" will basically just turn your table into a basic table complete with borders. But at the same time, it kinda limits your options of how you can format your table. With border="[insert]", while it doesn't change your table to the effect of class="wikitable", you have a lot more options with what you can do with it, such as making your borders different colors and even making it dashed if you want to. But again, we'll get into that later. (Also, a thing to note is that by not including class="wikitable", you'll end up with a table with a transparent background by default.)

One thing not listed in the example table that you can do is start a line with |+ By doing this, you can give your table a caption/title/whatever. It's a nice touch, but there's much better ways you can accomplish this that we'll get into later.

But yeah, just with what there is here, you should have the ability to make a basic table. Huzzah! But even then, it'll look rather boring. Fret not, as in the next part, we'll go into options for formatting individual cells, rows, and even the entire table itself.

 

So by following the first part above, you'll have figured how to make a basic table. If you haven't, well there's clearly something wrong with you and you should get yourself checked out before moving on.


That said however, you'll most likely find your table really boring and will want to spice it up a bit. Well then, I say it's time for....

~Part 2: Formatting Fun~​

Now then, there are two places where you can place your formatting syntax:

• In order to have your formatting affect a single cell, you'll need to place it in a line for one, seperating the cell content with another vertical line. Basically, you should have something along the lines of "| formatting | cell contents".
• However, placing it in front of the pipe opening the table ({|) allows your formatting to have its effect on the entire table as opposed to a single cell.

There are two variations of ways to type out your formatting:

• x="y" By doing this, you're listing each aspect of the formatting individually.
• style="x:y; z:a; etc" You can actually fit a lot of formatting in style=. One important thing to note is that you will need to seperate each part of the formatting with semi-colons.

With either option, you'll find some formatting that only work with one and not the other.

That said, let's go over some formatting you can use:

• background/background-color With this, you can change the background color of single cells or the entire table. Either provide a basic color name or a hexcode.
• color This changes the text color. I don't know if "text-color" accomplishes this as well. Either provide a basic color name or a hexcode.
• height/weight Allows you to change the height/width of the table or a cell. You can make them a certain number of pixels (px) in either measurement. You can also either make the table a certain percentage of the page size, or a cell a certain percentage of the table size.
• colspan/rowspan Allows a single cell to span over a number of columns/rows. (There is one drawback to this, but we'll get to that later.)
• align="left/center/right" This has a different affect depending on where it is placed. Placing it on the line with the opening pipe aligns the table itself. Placing it as formatting for a cell aligns the content within the cell.
• border Okay, remember when this was brought up in Part 1? This is where we get into it. Now, if you use the first method of formatting, you can input a single number, which produces a transparent border with edges that expand outward as the number increases. Now, on a plain table, this looks relatively fine. But when the table is colored..... yeeeeaaaah..... Doesn't look that good.... HOWEVER, by placing this within style=" ", you have more options! In this case, you would set it up as style="border: 1 2 3", 1 being the size you want it, 2 being the border style (which there are several options: solid, dashed, dotted, groove, ridge, inset, outset, and double; test them out when you can), and 3 being its color. This allows you to design a border at your leisure. However, this works only for the entire border.
• border-style Pretty much whether you want it dashed or solid, like with the previous.
• border-width Again, affects the width of the border. However, you have the option of including only one number to affect the entire border or including 4 to affect each side of the border.
• border-left/right/top/bottom This functions like normal "border", only affecting the left/right/top/bottom edge of the border. This allows you to make parts of the border different sizes, colors, or even styles.
• border-radius With this, you are able to alter the corners of your border, making them more rounded. Now, there are two ways of accomplishing this. One way is "border-radius:Xem/whateverunityouwanttouse", which affects all corners at once to the same extent. The other is "border-radius:Xem Yem Zem Ωem", which allows you alter each of the corners individually. (This particular formatting does not work with the wikitable class.)
• cellspacing This affects the spacing between cells.
• cellpadding From what I can tell, this affects the cell size.

If there's anything else I find that can be useful here, I'll add it.

But yeah, with all of this formatting, you'll be well on your way to making a pretty table.

But even with that, there's still a lot more we can do....