Table of Contents
Guide Details			Table information						Design & Coding
Introduction			Creating a table						Designing a table
Q&A			Basic			Advanced			Tips & Tricks
Ending note			Table Structure			Table Structure			Fixing Code
Special Thanks			Coloring Tables			Borders and Padding			Templates [WIP] (opens new window)
Changelog			Borders and Padding			Tables Within Tables

Introduction

Hello fellas! I'm Katasandra and I'm one of the many lurking members on Mobafire! Some of you may know me from my Lissandra guide and maybe you wonder how I created it or how you make a guide look like that. The magical answer is: tables! And that is what this guide is about. Now you might ask? Why create a guide on this? Well, I love tables and although there is another guide on coding tables, I noticed that all the images got removed... So one minute of silence for Foxy's Table Guide, I will miss it as I got most of my table knowledge from it. :'( Anyways, this guide will cover the basics of tables & coding them as well as some more advanced options and tips on how to create a table, how to fix spaghetti no, not real spaghetti. I also made some templates, which you can find in another guide! The purpose of this guide is to teach you the fundamentals of table coding and how it works. If you think I missed something or that I made a mistake somewhere, please comment! If you have any questions, broken tables or *beautiful* paint drawings (This will make sense later), comment! Oh yes, if you are a forgetful person like me: Here is an overview of the possible table tags and what they do, so you can easily find them when you want to do something with a table. Overview of Table tags Reminder blue tags can be added to the [table] tag, green tags can be added to the [tr] tag and pink tags can be added to the [td] tag. Tags Function [table] Opens a table [/table] Closes a table [tr] Opens a row [/tr] Closes a row [td] Opens a cell [/td] Closes a cell width=10 Sets the width of the cell to 10px width=10% Sets the width of the cell to 10% of the width of the table height=50 Sets the height of the row to 50 height=50% Sets the height of the row to 50% of the height of the table colspan=2 Makes a cell span two columns rowspan=2 Makes a cell span two rows vertical-align=top Aligns the content of the cell to the top padding=5px Sets the distance between the edge of the cell and its content to 5px padding="0px 3px 6px 9px" Padding per edge. From left to right: top (0px), right (3px), bottom (6px) and left (9px) bgcolor=black Sets the background color of the table to black bgcolor=black Sets the background color of all the cell in the row to black bgcolor=black Sets the background color of the cell to black border="5px solid black" Sets the border of the cell to width 5px, style solid and color black. There are 8 styles: dotted, dashed, solid, double, inset, outset, groove and ridge (and none) border-radius=10px Sets the "radius" of the border in the corners to 10px (makes round corners) border-radius="0px 3px 6px 9px" Border-radius per corner. From left to right: top-left (0px), top-right (3px), bottom-right (6px) and bottom-left (9px) border-spacing=5 Sets the space between all cells in the table to 5px border="3px solid black" Sets the border of the table to width 3, style solid and color black. border-radius=15px Sets the radius of the border of the table to 10px.

What is a table?

So to start with the most obvious and most basic of questions... What is a table?. - A table is a structure that consists of cells aligned in columns and rows which you can use to format your guide. What? Here's a very basic table. Now that doesn't look very fancy doesn't it? So why would you ever use tables? Well, tables are the best tool on mobafire to format your guide and they also enable you to make your guide look nice when you have 0 art and photoshop skills. Still not convinced? Here is my skill sequence from a previous version of my Lissandra guide, which is a single table: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 Q Q Q Q Q W W W W W E E E E E R R R That already looks *much* better, but this table is pretty advanced. We will just talk about basics here, this table is among the templates though!

How to make a table

So let's start at the beginning: How do you make a table?. You cannot start cooking without ingredients and nor can you start making tables without knowing the tags. So here are all the table tags (copied from the Official BBCode guide). Opening tags Closing tags [table] - The opening tag, creates a new table [tr] - Creates a new row of the table [th] - Creates a header cell (optional, only if you want a special row at the top) [td] - Creates a new cell. Your content goes in each of these cells. [/table] - Closes the table. [/tr] - Closes the current row. [/th] - Closes the current header cell. [/td] - Closes the current cell. Now that you have the ingredients, I will give you the recipe. You start with the table opening tag, then you create a new row, and lastly you create a cell in that row. Next up is adding text/images followed up by subsequently closing the cell, row and table. [table][tr][td]TEXT[/td][/tr][/table] TEXT IMPORTANT NOTE: The order of tags matters. You cannot create cells outside of rows. The opening/closing tags are vital as well, if you forget opening tags, random text will turn up at the top of your table and if you forget closing tags, cells, rows or even the entire table will start copying itself! Don't forget tags! SpaghettiSpaghettiSpaghetti Spaghetti Spaghetti . Spaghetti . Spaghetti Spaghetti . Spaghetti . Spaghetti There are 4 missing tags [table][tr][td bgcolor=green]Spaghetti[/tr] [tr][td bgcolor=red]Spaghetti[td].[/td] [tr][td bgcolor=blue]Spaghetti[/td][/tr][/table]

Basic: Table Structure

A table is actually nothing more than an advanced column. The cells of a table work actually really similar to columns. In columns you go to the next column with the [nextcol] tag, whereas in cells you can go to the next cell with [/td][td] (subsequently closing the current cell and immediately creating a new one). A column is actually a table with only one row, whereas you can have multiple rows in a table. Another important difference is that in columns you do not have to "close" a column, but in tables you have to close the cells. If you do not close cells (or rows for that matter) your table will break. One of the main reasons why tables can be difficult to work with is because it's incredibly easy to forget those tiny tags and break the table. On top of that, finding the missing tag usually feels like trying to find a needle in a haystack... You can add an infinite amount of rows to a table and the cells in every row will have the same width as the cells below and above them. Even if you try to give them a different widths all the cells in one will get the same width as the broadest cell. Column Table One column with text Anotha column with text too This is the last one One cell Anotha cell This is the last one New row, new cell One more [columns]One column with text[nextcol]Anotha column with text too[nextcol]This is the last one[/columns] [table][tr][td]One cell[/td][td]Anotha cell blah[/td][td]This is the last one[/td][/tr] [tr][td]New row, new cell[/td][td]One more[/td][/tr][/table] IMPORTANT NOTE: Like you can see, the last row of the table contains only two cells opposed to the three cells of the first row. You do not have to put an equal amount of cells in each row. If you end a row even though it does not have the "maximum" amount of cells, there will be a blank space. IMPORTANT NOTE 2: Even though the width of cells is preserved throughout the table, the height of rows is not. IMPORTANT NOTE 3: One last very noticeable difference between columns and tables is that in columns you have to fill the entire column first before jumping to the next column. In tables you jump to the next cell ("column") until you've got all the cells and then you jump to the next row. This makes large tables easier to manage than large columns.

Basic: Adjusting Width And Height

You can adjust the height of rows by adding height=xx to the [tr] tag and you can adjust the width of cells by adding width=xx to the [td] tag. Because cells have the same width as the cells above/below them, this means that you only have to define the width of the cells once (preferably in the top row). Adding the width to cells in any other rows is unnecessary and makes it harder to change your code later on. TEXT [table][tr height=50][td width=175 bgcolor=#080808]TEXT[/td][/tr][/table]

Basic: Formatting Text & Images

Once you start adjusting row widths and heights the text and images might center in the middle of the cell. Unlike in columns you can do something against this: add vertical-align=top or vertical-align=bottom to the [td] tag and the content of the cell will now be located at the top/bottom of the cell. You can also adjust horizontal placement by adding the standard [left], [center] and [right] tags around the text. TEXT [table][tr height=50][td width=175 vertical-align=top][center]TEXT[/center][/td][/tr][/table]

Basic: Background Color

Okay I'll admit, I have tricked you. Normally when you create a table it will be invisible because it is completely transparent. I made these tables visible by giving them a background color. You can add a background color to a table the same way you would add a background color to columns: add bgcolor=black to the tag(color of choice, you can also use hexadecimal codes (which I prefer)). IMPORTANT NOTE: It matters to which tag you add bgcolor=xxxxx. If you add it to the [table] tag, the entire table will get this color. If you add it to the [td] tag the cell will get this color and if you add it to the [tr] tag, all the cells in the row will get this color. However, if you define the background color both in the [tr] and the [td] tags, it will use the one in the [td] tag. TEXT TEXT [table bgcolor=blue][tr][td]TEXT[/td][td]TEXT[/td][/tr][/table] TEXT TEXT [table][tr][td bgcolor=blue]TEXT[/td][td]TEXT[/td][/tr][/table] TEXT TEXT [table][tr bgcolor=blue][td]TEXT[/td][td]TEXT[/td][/tr][/table] TEXT TEXT [table bgcolor=white][tr bgcolor=black][td bgcolor=blue]TEXT[/td][td]TEXT[/td][/tr][/table]

Basic: Borders and Padding

Another way of adding color to tables is by adding borders around cells. This is done by adding border="3px solid black" to the [td] tag. "3px" is the width of the border, "solid" is the style of the border and "black" is the color of the border. TEXT [table][tr][td border="3px solid #534E52"]TEXT[/td][/tr][/table] When you look at the table with the border above (and at the other tables up here), you'll notice that the text is clinging to the border. There is an easy way to deal with this: padding. You add padding=5px, to the [td] tag. The 5px determines the distance between the borders of the cell and whatever is inside it. IMPORTANT NOTE: Using borders and padding will increase the size of the cells in your table! TEXT [table][tr][td border="3px solid #534E52" padding=5px]TEXT[/td][/tr][/table]

Advanced: Table Structure

We have reached the sections that go a little bit more in depth in what you can do with tables. First we revisit table structure. As you might have guessed it is possible to merge cells that are next to each other (both horizontal and vertical). You can merge two cells in a row by putting colspan=2 in the [td] tag of the leftmost cell you want to merge. You can merge two cells above each other by putting rowspan=2 in the [td] tag of the uppermost cell. Rowspan can be a bit confusing, take a look at the table (and its code) to the right. In particular the second row. IMPORTANT NOTE: Once you have created a cell that spans multiple rows, you don't have to open the cells it spans in their subsequent rows. So in the example to the right, the first cell of the first row also contains the first cell of the second row. In the second row you only have to create the second cell of the second row as the first cell already exists! Merged cell Cell 1 Cell 2 [table][tr height=20][td colspan=2 padding=5px]Merged cell[/td][/tr] [tr height=20][td width=100 padding=5px]Cell 1[/td][td width=100 padding=5px]Cell 2[/td][/tr][/table] Merged Cell Cell 2 [table][tr height=20][td rowspan=2 width=100 padding=5px]Merged Cell[/td][td width=100][/td][/tr] [tr height=20][td padding=5px]Cell 2[/td][/tr][/table]

Advanced: Borders And Padding

Let's look at borders again. As you can see, borders aren't always square. You can make smooth/round borders by adding border-radius=15px to the [td] tag. You can also adjust the corners individually from each other by entering border-radius="0px 10px 20px 30px". From left to right these are the radius of the top-left corner, the top-right corner, the bottom-right corner and the bottom-left corner. IMPORTANT NOTE: If you make the border radius really large, eventually two corners will join and form a half-circle. If the height and width of the cell are the same, all four corners will join and you'll end up with a circle! TEXT TEXT [table][tr][td border="3px solid #534E52" border-radius=15px]TEXT[/td][/tr] [tr][td border="3px solid #534E52" border-radius="0px 10px 20px 30px"]TEXT[/td][/tr][/table] Again, you can see the effects of not using padding. Like adjusting the border-radius for the individual corners, you can also adjust the padding for the individual sides by typing padding="0px 10px 20px 30px" instead of padding="5px" in the [td] tag. From left to right these are the top, right, bottom and left side of the table. IMPORTANT NOTE: If you are looking for a generic padding value: I mostly use padding="5px 10px 5px 10px". TEXT [table][tr][td border="3px solid #534E52" border-radius="0px 10px 20px 30px"]TEXT[/td][/tr][/table]

Advanced: Border style

Remember that when creating a border you have to type border="3px solid #ffffff"? Well, there are more styles than just "solid". You can change this style so that the border will look different. Here is an overview: The colors of the right 4 styles depend on what color you enter and when you make the border width very small the effect might not be noticeable. IMPORTANT NOTE: Most of the time a solid border is good enough. Uncommon border styles do not necessarily make things look better. dotted ridge dashed groove solid outset double inset

Advanced: Tables Within Tables

Now onto the last thing I want to mention, like text and images you can also put tables (or columns) in tables (you can also put tables in columns by the way!). Although this may seem very simple and straightforward it can get pretty hard to keep track of which table you are working in. Putting tables in tables allows for some interesting formats. For example, this guide consists mostly of tables within tables. The border you see around the text is one of the cells of the outer table and all the content within is located in another table. You can see the code of this particular section to the right. IMPORTANT NOTE: If you decide to put tables in tables: make sure the tables function correctly before putting one in another. Similar when making edits, make sure that you "separate" the tables. [table][tr height=10][td bgcolor=#534E52 padding="2px 10px 2px 10px" border-radius="0px 0px 15px 15px" border="3px double black"][center][b][size=4]Advanced: Tables Within Tables[/size][/b][/center][/td][/tr] [tr height=5][/tr][tr][td border="3px solid #534E52" border-radius="15px 15px 0px 0px" padding="5px 10px 5px 10px"] [table][tr][td width=360]Text about tables in tables[/td][td width=10][/td][td]Code of this section[/td][/tr][/table] [/td]][/tr][/table]

Getting Started

Alright, now you should have a general idea of what you can do with tables and how to use different tags to create visuals. So, how do you actually design a table? Well, design comes in a few steps I listed them for you: Selecting the basic structure of your table Making the basic structure Adding (placeholder) text and images Revisiting structure: Do you like it? Do you need to adjust width/height of cells/rows? Borders, padding, text style, border radius Background colors, border colors, border style As you can see, adding the visuals to the table are the last two steps. Before adding visuals you should have a basic table already! Why? Once you start coding the visuals your code can become very messy. If your basic structure isn't functioning yet it can become really hard to fix it.

Selecting the basic structure

So let's get started with the first step: Selecting the basic structure of your table. This depends a lot on where you want to make a table for. There are two general layout types: the horizontal layout and the vertical layout. I (proudly) present: my paint (3d) skills! Horizontal Layout Vertical Layout In general you should look to use a vertical layout for sections where you want to compare things with each other. You can also use it when you have several small bits of information on a similar topic. You use a horizontal layout when you have either a lot of different things you want to talk about or you want to talk a lot about one thing. IMPORTANT NOTE: This is just my opinion on layouts and something I try to explain to guide you. If you have an amazing idea that doesn't match with my view, just try it out! To give some pointers on which layout you can use for what, here's an overview: Horizontal Vertical Both Items Pros and Cons Summoner Spells Runes Any comparisons Skill Sequence Introduction Overview/Summary Table of Contents

Creating The Basic Structure

The best way to explain this would be to give an example. So to kick off I'll *try* to design a table for Summoner Spells, here is a (beautiful) paint drawing of my first idea: First count the number of cells in a row and then the number of rows you need, in this case there are two cells in each row and there are eight rows in total. The top cell is merged. Let's start with the following: [table][tr height=10 bgcolor=#ff8000][td colspan=2][/td][/tr] [tr height=10 bgcolor=#ff8000][td width=25][/td][td width=25][/td][/tr] [tr height=10 bgcolor=#ff8000][td][/td][td][/td][/tr] [tr height=10 bgcolor=#ff8000][td][/td][td][/td][/tr] [tr height=10 bgcolor=#ff8000][td][/td][td][/td][/tr] [tr height=10 bgcolor=#ff8000][td][/td][td][/td][/tr] [tr height=10 bgcolor=#ff8000][td][/td][td][/td][/tr] [tr height=10 bgcolor=#ff8000][td][/td][td][/td][/tr][/table] IMPORTANT NOTE: The addition of background color here is to keep track of the structure of the table. Once tables grow more complicated (especially when you merge a lot of cells), it can be incredibly beneficial to be able to see what you are doing. Once you start adding content to the table, coloring one row (with no merged cells) is good enough though. IMPORTANT NOTE 2: Always give the cells & rows a width & height when making a basic structure so you can see what you're doing. If you don't enter a width and/or height they will automatically be set to 0, making the cells & rows invisible.

Adding Placeholder Text/Images & Revisiting Structure

This step might seem rather easy: you just throw some text and icons in there right? Summoner Spells Always Text Recommended Text Situational Text Text [table][tr height=10 bgcolor=#ff8000][td colspan=2]Summoner Spells[/td][/tr] [tr height=10 bgcolor=#ff8000][td width=25]Always[/td][td width=25][/td][/tr] [tr height=10 bgcolor=#ff8000][td][icon=flash size=40][/td][td]Text[/td][/tr] [tr height=10 bgcolor=#ff8000][td]Recommended[/td][td][/td][/tr] [tr height=10 bgcolor=#ff8000][td][icon=ignite size=40][/td][td]Text[/td][/tr] [tr height=10 bgcolor=#ff8000][td]Situational[/td][td][/td][/tr] [tr height=10 bgcolor=#ff8000][td][icon=teleport size=40][/td][td]Text[/td][/tr] [tr height=10 bgcolor=#ff8000][td][icon=cleanse size=40][/td][td]Text[/td][/tr][/table] As you can see, this generates some new issues, the entire table is glued together and misses open spaces. However, we can easily fix this issue by adding empty rows and cells between the cells & rows with content. Usually I give these rows & cells a width/height of 10px. However, depending on the table you make, try to choose a value somewhere between 5 and 15 px. IMPORTANT NOTE: When you add new rows/cells make sure that you adjust the colspan=x & rowspan=x values of any merged cells! IMPORTANT NOTE 2: Cells like [td][/td][/tr] are unecessary, you do not have to fill the entire row with cells. Delete cells that appear just before a [/tr] tag that do not contain anything. That'll keep your code clean. Summoner Spells Always Text Favorite Text Situational Text Text [table][tr height=10][td colspan=3]Summoner Spells[/td][/tr] [tr height=10][/tr] [tr height=10 bgcolor=#ff8000][td width=25]Always[/td][td width=10][/td][td width=25][/td][/tr] [tr height=10][/tr] [tr height=10][td][icon=flash size=40][/td][td][/td]][td]Text[/td][/tr] [tr height=10][/tr] [tr height=10][td]]Favorite[/td][/tr] [tr height=10][/tr] [tr height=10][td][icon=ignite size=40][/td][td][/td][td]Text[/td][/tr] [tr height=10][/tr] [tr height=10][td]Situational[/td][/tr] [tr height=10][/tr] [tr height=10][td][icon=teleport size=40][/td][td][/td][td]Text[/td][/tr] [tr height=10][/tr] [tr height=10][td][icon=cleanse size=40][/td][td][/td][td]Text[/td][/tr][/table] That's starting to look a lot better. Now it's time to start thinking about whether we need to adjust heights and widths. First of all, there has to be enough space to explain your summoner spell choices, so the third cell of the row has to be significantly longer. Now I actually want to see whether I can make circle borders around the icons, this means that I have to ensure that the width of the cells width the icons are roughly the same as their heights. At this point I am simply going to try something, I give the first cell a width of 75px, I give the last cell a width of 500 and I will set the height of all the rows with icons at 75px. IMPORTANT NOTE: Adjusting the width/height of cells may take a few tries before you get it right! That's also the reason why having one row with colored cells is so important, this way it is easier to get the width/height right. Things like this come with practice. Summoner Spells Always Text Favorite Text Situational Text Text

Styling Your Table

Alright, here is where the magic happens! Right now the table doesn't look very special yet (lots of thanks to that one orange row too!) but now I'm going to change that. Here is a list of what I will do: Center all the content in the first row Bold all the text in the first row Change the cell with "summoner spell" into a header cell to see what happens Add borders (circle) around the cells with icons Remove the orange background from the second row Add padding to the cells with text I will also start putting the code of the table in a spoiler to preserve space. IMPORTANT NOTE: I will not add padding to the cells in the first row, nor the header cell. Unless you are going to add background colors/borders to these you shouldn't do so, as it will increase the amount of space between the header and whatever is above/below it! Summoner Spells Always Text Favorite Text Situational Text Text Code [table][tr height=10][th colspan=3]Summoner Spells[/th][/tr] [tr height=10][/tr] [tr height=10 bgcolor=#ff8000][td width=75][center][b]Always[/b][/center][/td][td width=10][/td][td width=500][/td][/tr] [tr height=10][/tr] [tr height=75][td border="3px solid black" border-radius=40px][icon=flash size=40][/td][td][/td]][td padding="5px 10px 5px 10px"]Text[/td][/tr] [tr height=10][/tr] [tr height=10][td]][center][b]Favorite[/b][/center][/td][/tr] [tr height=10][/tr] [tr height=75][td border="3px solid black" border-radius=40px][icon=ignite size=40][/td][td][/td][td padding="5px 10px 5px 10px"]Text[/td][/tr] [tr height=10][/tr] [tr height=10][td][center][b]Situational[/b][/center][/td][/tr] [tr height=10][/tr] [tr height=75][td border="3px solid black" border-radius=40px][icon=teleport size=40][/td][td][/td][td padding="5px 10px 5px 10px"]Text[/td][/tr] [tr height=10][/tr] [tr height=75][td border="3px solid black" border-radius=40px][icon=cleanse size=40][/td][td][/td][td padding="5px 10px 5px 10px"]Text[/td][/tr][/table] We're almost there... Now it's time to start thinking a bit about size again. It seems unlikely that I'll need the full space of the row. I'm going to try to put a champion skin icon at the right by adding two (one for spacing) cells to the row below the header and giving it a rowspan of 13. Why 13? Well, that is the amount of rows in the table, except the header cell. Again: Do not forget to adjust the colspan of the merged cells! I will also adjust the colors of borders of the icons & add a background color. The space between the text and the borders also seems a bit too little to me so I'll increase the width of the middle cell by 10px. I also reduce the width of the cells with explanations slightly so that the image has more space. Here is the result (with some random text): Summoner Spells Always Quod mihi quidem visus est, *** sciret, velle tamen confitentem audire Torquatum. Poterat autem inpune; Hic, qui utrumque probat, ambobus debuit uti, sicut facit re, neque tamen dividit verbis. Favorite Ab his oratores, ab his imperatores ac rerum publicarum principes extiterunt. Cetera illa adhibebat, quibus demptis negat se Epicurus intellegere quid sit bonum. Et harum quidem rerum facilis. Situational Scrupulum, inquam, abeunti; Ne tum quidem te respicies et cogitabis sibi quemque natum esse et suis voluptatibus? Duo Reges: constructio interrete. Primum in nostrane potestate est, quid meminerimus? Ita prorsus, inquam; Hic quoque suus est de summoque bono dissentiens dici vere Peripateticus non potest. Code [table][tr height=10][th colspan=5]Summoner Spells[/th][/tr] [tr height=10][/tr] [tr height=10 bgcolor=#ff8000][td width=75][center][b]Always[/b][/center][/td][td width=20][/td][td width=435][/td][td width=10][/td][td width=190 rowspan=13][center][icon=coven Lissandra size=190][/center][/td][/tr] [tr height=10][/tr] [tr height=75][td bgcolor=#614110 border="3px solid #2e2b10" border-radius=40px][center][icon=flash size=40][/center][/td][td][/td]][td padding="5px 10px 5px 10px"]Quod mihi quidem visus est, *** sciret, velle tamen confitentem audire Torquatum. Poterat autem inpune; Hic, qui utrumque probat, ambobus debuit uti, sicut facit re, neque tamen dividit verbis.[/td][/tr] [tr height=10][/tr] [tr height=10][td][center][b]Favorite[/b][/center][/td][/tr] [tr height=10][/tr] [tr height=75][td bgcolor=#250704 border="3px solid #170504" border-radius=40px][center][icon=ignite size=40][/center][/td][td][/td][td padding="5px 10px 5px 10px"]Ab his oratores, ab his imperatores ac rerum publicarum principes extiterunt. Cetera illa adhibebat, quibus demptis negat se Epicurus intellegere quid sit bonum. Et harum quidem rerum facilis.[/td][/tr] [tr height=10][/tr] [tr height=10][td][center][b]Situational[/b][/center][/td][/tr] [tr height=10][/tr] [tr height=75][td bgcolor=#150540 border="3px solid #0b0226" border-radius=40px][center][icon=teleport size=40][/center][/td][td][/td][td padding="5px 10px 5px 10px"]Scrupulum, inquam, abeunti; Ne tum quidem te respicies et cogitabis sibi quemque natum esse et suis voluptatibus? Duo Reges: constructio interrete.[/td][/tr] [tr height=10][/tr] [tr height=75][td bgcolor=#00344e border="3px solid #001c22" border-radius=40px][center][icon=cleanse size=40][/center][/td][td][/td][td padding="5px 10px 5px 10px"]Primum in nostrane potestate est, quid meminerimus? Ita prorsus, inquam; Hic quoque suus est de summoque bono dissentiens dici vere Peripateticus non potest.[/td][/tr][/table] Alright, that's it! You might wonder where I got those colors from. Well, I opened the snipping tool, snipped the part of the tables with the icons. Opened paint, selected the eyedropper/color picker tool and selected 1. For the border: a very dark but not black color from the icon and copied the hex/color code 2. For the background color: a brighter color, but still pretty dark and copied the hex/color code. Also, if you intend to use this (yes, you can!) you may run into the issue that you have not enough space for your text. There are two ways to deal with this: 1. Limit the amount of text. This can be really tough but also forces you to get to the point instead of rambling. 2. Adjust the table. For example in this table you can make the cell with the image (and the image itself) smaller. You can also delete the last two cells entirely. Just don't forget to increase the length of the column with the text. IMPORTANT NOTE: Do not add a mountain of visuals at once. Just start with one element (for example in the table above: the icon cells), finish that and look at the result. If you're not satisfied, add another or try to adjust it. IMPORTANT NOTE 2: To continue with the previous note, keep it simple. You can add background colors, borders and whatnot to every cell with content, but is that really necessary? Your table is meant to pass information, not to shout: Hey look at dis fancy table!

Tips & Tricks

Here is an overview of some general tips & tricks you can use to make tables and stuff you can use in your tables. >> Learning the art of tables comes with practice. Don't be afraid to try new things and don't be sad if it doesn't work (you can always try to ask for some help). After some time you'll get a sense for what works and what not. >> Above all, I'll say it again, do not forget opening and closing tags >> If your table seems cramped, try adding some empty rows & cells between the rows & cells with content (width between 5-15px, 10px is the general value) or increase the width of these "spacing" rows/cells. >> Once you have finished a table it might be worth looking at it again after a few weeks or some months. Do you still like it? Do you want to change something? >> You can add lines in your table by adding [tr height=5][/tr][tr height=2][td colspan=xx bgcolor=xxxx][/td][/tr][tr height=5][/tr] to your code. >> The maximum width of the guide template is 762px, this is also the maximum width of a table! >> When you put [center] tags around your table, the table will be centered along with all its content! >> You can add borders around images/icons by putting the border code in the [icon]/[img] tag: [icon=flash border="3px solid yellow"] >> Images are really special and you can basically treat them as [td] tags: you can also adjust their widths/heights, padding and border-radius by adding the tags to the [img] >> Do not go beyond three levels of tables within a table (so not beyond a table in a table in a table) or you'll end up in the Limbo. >> Once you put content in cells they'll get a minimum width: They cannot becomes smaller than the length of words/video's or gifs within them! >> When you edit a table: "save" a copy in a different chapter/draft. This way you'll have a backup in case you mess up or you don't like the changes. >> When you add colors around icons/images you can either use colors from the images or use colors from the theme of your guide.

Fixing Code

Alright, in this section I will look at some general mistakes in coding and how to fix them. But before I go into that, here are a few tips for fixing code: >> Your own code won't be colored (it'll be completely white). Therefore, I will not color the code in this section either. >> If you have construction of tables within tables and it's broken, separate the tables first and fix them separately before joining them. >> The above also applies to tables in spoilers >> If you cannot find the mistake by looking at the editor, copy the code (to another chapter/outside of your table) and put [code][/code] tags around it. It will be easier to find the error that way. >> Every table must finish with [/td][/tr][/table] and every row must finish with [/td][/tr]. (Unless it's a spacing row) >> Sometimes a table is just too hard to fix (especially if you missed multiple tags), don't be afraid to start over when everything becomes a terrible mess. Summary IMPORTANT NOTE: I assumed that you forgot tags, if you put too many tags the opposite will happen! For example, if you put too many [td] tags, the table will act like you forgot a [/td] tag! IMPORTANT NOTE 2: If you forget multiple tags any duplicated parts of the table (except for all the stuff that appears at the top) might duplicate again! This makes it harder to find the mistake. IMPORTANT NOTE 3: If you think I missed anything here, please comment! I cannot find all the 1001 ways to break a table on my own. Content is duplicated and appears (unformatted) below the table Forgot [/table] tag (A part of) the content is duplicated and appears (formatted) below the table Forgot [/tr] tag, specifically the [/tr] tag of the first row that is duplicated (or the spacing row before it) Content of a cell is duplicated and appears (unformatted) above the table Forgot a [/td] tag at the end of the row Content of a cell is duplicated and appears (unformatted) above the table and a part of the cells in a row will duplicate and appear at the end of the same row. Forgot a [/td] tag of a cell before the cells with the duplicated content Entire table is not formatted and there is a [/table] at the end Forgot [table] tag at the beginning A [/tr] tag appears at above the table and possibly one of the rows has an unusual height Forgot a [tr] tag (of the row with the unusual height) Text with a [/td] tag behind it appears above the table Forgot the [td] tag of the cell with that content. A [/td] tag appears above the table (with or without text) and all the cells in a row have shifted one column to the left Forgot the [td] tag of the cell before the cells with the shifted content Anything of the above happens but a tag that shows up is not complete (like /tr] instead of [/tr]]) Pretend you forgot to write down the entire tag and find it using the above. (Ultimately look for a tag with missing [ and ] Random text appears above the table (but isn't duplicated) Didn't put the text in a cell Now, I will use (half) the table I designed earlier and I'll break it. Table Summoner Spells Always Quod mihi quidem visus est, *** sciret, velle tamen confitentem audire Torquatum. Poterat autem inpune; Hic, qui utrumque probat, ambobus debuit uti, sicut facit re, neque tamen dividit verbis. Favorite Ab his oratores, ab his imperatores ac rerum publicarum principes extiterunt. Cetera illa adhibebat, quibus demptis negat se Epicurus intellegere quid sit bonum. Et harum quidem rerum facilis.

Forgetting [/table] tags

• All the content in the table will be duplicated and appear (unformatted) below the table.

Forgetting [/tr] tags

• All the content in the row where you forgot the [/tr] tag and all the content below will be duplicated, but it will still be formatted like it is in a table.

IMPORTANT NOTE: If you can't find the missing tag in the code of the first duplicated row, look whether you forgot the [/tr] tag of the previous row. This might be a spacing row so you cannot see that it duplicated itself.

Forgetting [/td] tags

• The content of the cell will be duplicated and appear above the table

There are two things that can happen when you forget [/td] tags.
1: You forgot the [/td] tag of the last cell in the row.

• Nothing more than the duplication of the content of that cell will happen.

2: You forgot the [/td] tag of a cell that is not the last cell in the row.

• The content of the cell where you forgot the [/td] tag will duplicate and appear above the table
• All the content of all the cells beyond that cell (in the same row) will duplicate and appear at the end of the same row in the table.

IMPORTANT NOTE: Because the content of the cells gets pasted in the same row as your cell, the entire table might be squashed together/surpass the maximum width of the table.

IMPORTANT NOTE 2: If you forgot the [/td] of a spacing cell the content in your table will be duplicated, but nothing will appear at the top.

Forgetting [table] tags

• Your entire table will not appear (just unformatted stuff) and you will find a [/table] tag at the end of the "table"

Forgetting [tr] tags

• A [/tr] tag will appear at the top of the table and depending on what row vanished, there might be a change in height.
• If there is no row with deformed height you have to check all rows

Forgetting [td] tags

Again there are two cases.
1: You forgot the [td] tag of a cell at the end of the row.

• The content of the cell will not appear in the table but it will appear at the top of the table with a [/td] tag behind it.
• If the cell has no content, just the [/td] tag will appear above the table

2: You forgot the [td] tag of a cell in the middle/at the start of the row.

• The same thing happens as if it is a cell at the end of the row, but all the cells in the row "shift" to the left.

IMPORTANT NOTE: If you cannot find the missing tag, try pressing CTRL + F (search) and typing [/td][/td].

Forgetting a part of any of the table tags

In case you forget one of the [ or ] of the [td], [/td], [tr], [/tr], [table] or [table] the same thing will happen as if you forgot the entire tag. However, your life becomes easier now because the tag (with missing [ or ]) will show up at the above the table.

Putting text between tags

I'm not talking about putting text between the [td] and [/td] tags, but about putting it anywhere else. In this case it will also show up at the top of the table. This is the same thing that would happen if you were to forget a [/td] tag.

IMPORTANT NOTE: The first thing you do when this happens is type CTRL + F and then whatever text appeared above the table!

IMPORTANT NOTE 2: This also happens if you accidentally put [[td] instead of [td], (a lonely [ will appear above the table), try searching for [[td or [[tr in this case instead of just [ )

Q&A

Q: Can you code my guide? A: No, I will not code entire guides. Q: Can you code a table for me? A: If you give me some kind of drawing that shows what it is supposed to look like, I'll give it a go! Q: Halp, my table has evolved into a monster and I don't know how to fix it! A: If you give me the code I can try to fix it, but no promises! Some tables are beyond fixing. Q: How do I write a guide? A: JhoiJhoi wrote a guide on that; I'm currently working on one too ;) Q: Did I finally reach the end of this guide? A: Yes! Unless you want to read the closing sections of course :p

Ending Note

You finally reached the end of the guide! I hope it wasn't too long and that you learned something about tables. I really enjoyed making it and I hope you enjoyed reading it ^^ I hope I managed to brighten your day and wish you good luck with tables in the future! If there is anything wrong, if you miss anything, if you don't quite understand something yet, please comment/ask, I'll be happy to answer you!

Special Thanks

>> Special thanks to Foxy's Table Guide for learning me how to make tables!

Changelog

Notation in dd/mm/yy 26/08/2022 Fixed tips and tricks being weird 27/10/2020 Tweaked some things, moved templates to a separate guide thing so they become easier to manage. 28/06/2020 Tweaked some code & text, added a (matchup) template 10/11/2019 Some very minor tweaks here and there. Also added some templates 26/10/2019 Creation of guide