Guide Table of Contents By Foxy
	Introduction	Breakdown	Designing	Examples	Conclusion
	Before we start What Why How	Tables Rows Cells Padding Height Header Colors	Basic Tables Advanced Tables Nesting	Item Exposition Ability Sequence Mastery Tree Dividers Guide Review Format Guide Format Table of Contents	Thanks Credits
ok

Before we start

Hello Summoner, Foxy here with another guide! This time it's all about coding with tables. There's no guide on this yet so I thought I'd be giving you guys a short and simple course on how to properly use this kind of coding. I am not an expert myself so if you have some extra information please, do tell me so I can add this to the guide. It is not the most beautiful guide you've ever seen because I just want to teach you the basics without too many distractions.

This guide is for people who want to make a nice guide themselves but lack the coding knowledge. I do hope you have the basic BBcode knowledge already. If you don't, there are a lot of guides explaining the more basic stuff.

Things to keep in mind:

• Your guide normally has a width of 685 Pixels. Tables however can reach the full length of 705 pixels. Adapt your widths accordingly.
  
• If you want to show coding in your guide, add "[[" & "]]" to every bracket in your code. Example: [[[table]]].
  
• Tables are not that different from columns. If you understand how that works, you'll be grasping tables in no time.
  
• Always use closing tags.
  
• You can use custom colors. I use this site. It shows contrasts and complementary colors as well.
  If you have photoshop, you can use that too. There's a colorpicker in there and the code is at the bottom.
  
• With "[color=transparent]TEXT[/color]" you can hide text.
  
• In my examples, I added bgcolor=#080808 to most table backgrounds so you can see them clearly. If you copy paste the table code I wrote down they'll have a black background.

Now let's get to it!

What

Table coding is a recent buff to the Mobafire database. Instead of using columns, you can now use tables to make your guide as pretty as possible. It has many uses and the possibilites are infinite. Some people already have made some beautiful things like custom mastery trees and ability sequences. I'll show my interpretation of these below. More on this in the Examples chapter.

Why

It makes your life a bit easier, you don’t have to place that much [color=black]TEXT[/color] or [color=transparent]TEXT[/color]. It does require a lot of work, but the result is amazing.

The knowledge on this should be for everyone, and I hope, by making this guide, to improve the quality of newer guides.

How

A rather important question, and the whole point of this guide. This will be answered below.







We'll start off by breaking the table down into all of the different parts it consists of. Once we understand this we can move on to the next level.

Tables

Your coding starts with the most evident part: [table]. As soon as you enter this you can start constructing your table.

Rows

Your table consists out of rows: from left to right. To make a new row you enter: [tr]
To close your row, enter: [/tr]
Always close your rows or you’ll have an unusual amount of cells in one row.

Cells

Your row is divided in small cells containing your data. You’ll have to define the width of this cell . To make one of these use [td width=PX]
To close the box use [/td]

Padding

In every cell there’s a space to be defined to prevent your content from sticking to the cell-border. Use padding=PX (ranging from 0 to infinity, in pixels).

Example: [td width=50 padding=5]

Height

You can change the height of every cell by adding height=px
Example:
[td width=50 height=50 padding=1]TEXT[/td]

If you use different heights for every cell in one row, the largest cell is superior. (I also added a padding example here, the bigger the number, the further your content is from the cell-border. This will also broaden the cell-width.)

Example:
[td width=100 height=100 padding=1]TEXT1[/td] [td width=100 height=200 padding=10]TEXT2[/td] [td width=100 height=50 padding=20]TEXT3[/td]

The row will have a height of 200.

Visualised:

TEXT1

TEXT2

TEXT3

Header

If you want to, you can add a header in your table. Be sure to add "colspan=AMOUNT OF CELLS" after "th" to make sure it's the length of your whole table.


[table]
[th colspan=2]HEADER[/th]
[tr][td width=100 padding=2][center]OK[/center][/td]
[td width=100 padding=2][center]OK[/center][/td]
[/tr]
[/table]

->

HEADER
OK	OK

Colors

You can give tables a different background. Just add the hexadecimal code into your cellcode.


[table]
[tr]
[td width=200 padding=5 bgcolor=#B80000]RED[/td]
[td width=200 padding=5 bgcolor=#00FF00]GREEN[/td]
[td width=200 padding=5 bgcolor=#FF00FF]PINK[/td]
[/tr]

[tr]
[td width=200 padding=5 bgcolor=#FFFF00]YELLOW[/td]
[td width=200 padding=5 bgcolor=#FF9900]ORANGE[/td]
[td width=200 padding=5 bgcolor=#0000FF]BLUE[/td]
[/tr]
[/table]


Which becomes:

RED	GREEN	PINK
YELLOW	ORANGE	BLUE

You can also color the borders by placing a bg color on the [table] tag -> [table bgcolor=#C0C0C0]

RED	GREEN	PINK
YELLOW	ORANGE	BLUE

Basic Tables

Same sizes everywhere and very standard-looking. This will help you understand tables, and has a variety of uses.

Example:

[table]
[tr]
[td width=250 padding=5] TEXT[/td]
[td width=250 padding=5] TEXT[/td]
[td width=250 padding=5] TEXT[/td]
[/tr]
[tr]
[td colspan=1 padding=5] TEXT[/td]
[td colspan=1 padding=5]TEXT[/td]
[td colspan=1 padding=5]TEXT[/td]
[/tr]
[/table]


This becomes:

TEXT	TEXT	TEXT
TEXT	TEXT	TEXT

Now you're probably wondering what that [colspan=1 padding=5] is doing there. This, my young Padawan, is the amount of cells from the first row you want to use. One means that you'll have the same amount of cells in this row and you can insert data. If we want to use two cells for data or we don't need some cells they can be skipped by replacing the "1" by a "2" (or more, elaborating on that some more below).

[center]
[table]
[tr]
[td width=250 padding=5] TEXT[/td]
[td width=250 padding=5] TEXT[/td]
[td width=250 padding=5] TEXT[/td]
[/tr]
[tr]
[td colspan=2 padding=5]DOUBLED CELL[/td]
[td colspan=1 padding=5]TEXT[/td]
[/tr]
[/table]
[/center]

This becomes:



If we want to make a nice square and leave out the space in the middle, we can do something like this:


[table]
[tr]
[td width=130 height=130 padding=5] TEXT[/td]
[td width=130 padding=5] TEXT[/td]
[td width=130 padding=5] TEXT[/td]
[td width=130 padding=5] TEXT[/td]

[/tr]
[tr]
[td colspan=1 height=130 padding=5]TEXT[/td]
[td rowspan=2 colspan=2 padding=5][IMG]http://i61.tinypic.com/1zgrytj.jpg[/IMG] [/td]
[td colspan=1 padding=5]TEXT[/td]
[/tr]
[tr]
[td colspan=1 height=130 padding=5]TEXT[/td]
[td colspan=1 padding=5]TEXT[/td]
[/tr]

[tr]
[td colspan=1 height=130 padding=5]TEXT[/td]
[td colspan=1 padding=5]TEXT[/td]
[td colspan=1 padding=5]TEXT[/td]
[td colspan=1 padding=5]TEXT[/td]
[/tr]
[/table]

TEXT	TEXT	TEXT	TEXT
TEXT			TEXT
TEXT			TEXT
TEXT	TEXT	TEXT	TEXT

You only need to put one "height=px" in every row (one cell). All of the cells will adapt to this one. You can see I used rowspan=px next to colspan=px. I'll talk about rowspan later on in this guide but keep in mind that they can be combined.

Advanced tables

Your tables will differentiate most of the times. You'll have different widths according to what you want to put in them. For instance a picture on the left in your introduction, a nice skin to fill it all up, dividers... you name it.

Cells in different rows always adapt to the broadest cell. They have the exact same width even though you might have entered different widths:

[table]
[tr]
[td width=300 padding=0] TEXT[/td]
[td width=200 padding=0] TEXT[/td]
[td width=100 padding=0] TEXT[/td]
[td width=50 padding=0] TEXT[/td]
[/tr]

[tr]
[td width=100 padding=0] TEXT[/td]
[td width=200 padding=0] TEXT[/td]
[td width=300 padding=0]TEXT[/td]
[td width=50 padding=0] TEXT[/td]
[/tr]
[/table]

This turns into:

TEXT	TEXT	TEXT	TEXT
TEXT	TEXT	TEXT	TEXT

You can see here that I entered different widths, but it doesn't matter. They never have different sizes. You can however work with "width" and "colspan" in the same row.


We can use less cells in different rows. Here's an example:

[table]
[tr]
[td width=200 padding=5] TEXT[/td]
[td width=50 padding=5] TEXT[/td]
[td width=200 padding=5] TEXT[/td]
[td width=50 padding=5] TEXT[/td]
[/tr]

[tr]
[td width=200 padding=5] TEXT[/td]
[td width=50 padding=5] TEXT[/td]
[td width=300 padding=5] [right] TEXT[/right][/td]
[/tr]
[/table]

TEXT	TEXT	TEXT	TEXT
TEXT	TEXT	TEXT

However, you should always use "colspan=X" whenever possible. This to avoid mistakes. You just define the width in the first row, for consecutive rows, colspan is the way to go.


GMD quote: I would also mention that one should specify the width of a column once and then refrain from using the width parameter at all through the course of the entire table and work with colspan only; it allows for cleaner coding and, thus, less chance to screw up.


This means, that for the previous table, it's better to use this code:


[table]
[tr]
[td width=200 padding=5] TEXT[/td]
[td width=50 padding=5] TEXT[/td]
[td width=200 padding=5] TEXT[/td]
[td width=50 padding=5] TEXT[/td]
[/tr]

[tr]
[td colspan=1 padding=5] TEXT[/td]
[td colspan=1 padding=5] TEXT[/td]
[td colspan=2 padding=5] [right] TEXT[/right][/td]
[/tr]
[/table]


This gives you the same table:

TEXT	TEXT	TEXT	TEXT
TEXT	TEXT	TEXT

When we put all of this together we got something like this:


[table]
[tr]
[td width=100 height=100 padding=2 bgcolor=#B80000]TEXT[/td]
[td width=50 padding=2]TEXT2[/td]
[td width=150 padding=2]TEXT3[/td]
[/tr]

[tr]
[td colspan=1 padding=2 ]TEXT 4[/td]
[td colspan=2 height=50 padding=2bgcolor=#CC00CC]TEXT 5[/td]
[/tr]
[/table]

TEXT	TEXT2	TEXT3
TEXT 4	TEXT 5

Now we know all of this we can make an introduction for our Guide:


[anchor=introduction][IMG]http://i58.tinypic.com/123widt.jpg[/IMG]



[table]
[tr]
[td width=200 padding=5][IMG]http://i57.tinypic.com/1zxpeeu.jpg[/IMG][/td]
[td width=550 padding=5]Hello summoner and welcome to my [[graves]] Guide! My name is Anthony, a Platinum rated player on the EUW server and I'll be your guide for today. I main the ADC role and [[graves]] is one of my favorite AD Carries! He's really fun and I hope I'll make you love him as much as I do (no homo).[/td]
[/tr]
[/table]

[table]
[tr]
[td width=550 padding=5] Graves is a ranged Attack Damage Carry, primarily played in the bottom lane along with a support to protect and help you throughout the game. He has an amazing burst and this makes him synergyze remarkably with supports focused on killing other champions (Hi [[annie]]!). You will be deleting people across the map and I'll help you along the way![/td]
[td width=200 padding=5][IMG]http://i58.tinypic.com/34dh5xx.jpg[/IMG][/td]
[/tr]
[/table]


Which becomes:

Hello summoner and welcome to my Graves Guide! My name is Anthony, a Platinum rated player on the EUW server and I'll be your guide for today. I main the ADC role and Graves is one of my favorite AD Carries! He's really fun and I hope I'll make you love him as much as I do (no homo).

Graves is a ranged Attack Damage Carry, primarily played in the bottom lane along with a support to protect and help you throughout the game. He has an amazing burst and this makes him synergyze remarkably with supports focused on killing other champions (Hi Annie!) You will be deleting people across the map and I'll help you along the way!

Note that you can't leave out any closings [/tr] / [/td] / [/table] or you'll be getting a soup of doubled pictures and text.

Nesting

Alright, now we've come this far, it would be lame to stop. We've come to the hardest part which is something very useful. Here we'll be nesting the tables to make room for vertical doubled (tripled, quadrupled...) cells and more.


We achieve this by using rowspan, which is very very useful. By adding this you can have a picture on the left for instance, and have two or more rows next to it. Just like the "alrite" is standing next to two rows. All you have to do is add [td width=X padding=X rowspan=AMOUNT OF ROWS] where you want this cell to start. Next, we define our cells to the left/right. In the example, we define three cells in the first row.

For your next row, you should only define two cells. Your first cell already exist due to using rowspan before.


[table]
[tr]
[td rowspan=2 width=100]ALRITE[/td]
[td width=100 padding=2]OK[/td]
[td width=100 padding=2]OK[/td]
[/tr]
[tr]
[td width=100 padding=2]OK[/td]
[td width=100 padding=2]OK[/td][/tr]
[tr]
[td width=100 padding=2]OK[/td]
[td width=100 padding=2]OK[/td]
[td rowspan=2 width=100]ALRITE[/td][/tr]
[tr]
[td width=100 padding=2]OK[/td]
[td width=100 padding=2]OK[/td][/tr]
[/table]


Becomes:

ALRITE	OK	OK
	OK	OK
OK	OK	ALRITE
OK	OK

You can also make one big table with smaller tables inside.


[table]
[tr]
[td width=200 padding=1 bgcolor=#080808]

Random stuff in here.
We can move on to the next table within our table after placing some text before it.


[center]
[table bgcolor=#000033]
[tr]
[td width=50 padding=2 rowspan=4 bgcolor=#000033][icon=ghost size=45][/td]
[td padding=2 rowspan=4 bgcolor=#000033]&[/td]
[/tr]

[tr]
[td width=50 padding=2 bgcolor=#000033][icon=teleport size=38][/td][/tr]

[tr]
[td width=50 padding=2 bgcolor=#000033]/[/td][/tr]

[tr]
[td width=50 padding=2 bgcolor=#000033][icon=ignite size=38][/td]
[/tr]
[/table][/center]


Enter a closing or extra information here.
[/td]
[/tr]
[/table]


->

Random stuff in here. We can move on to the next table within our table after placing some text before it. & / Enter a closing or extra information here.

Now we know this we can make a whole guide out of tables. The only guide format that has used tables to it's full extension here is by GMD, pay it a visit to use it as an example. You can find the guide format here. Try to create your own to stand out!

Here's a simplified version I made to break it down more easily.


[table]
[tr]
[td width=170 padding=5 vertical-align=top]
[anchor=QuickItems]
[left]
[color=#B80000][b]Malcolm Graves[/b][/color]
[/left]
[rule]
[icon=mafia graves size=100]
[rule]


[center][h3]Skill Priority[/h3]
[icon=collateral damage size=25]>[icon=buckshot size=25]> [icon=quickdraw size=25]> [icon=smoke screen size=25] [/center]

[/td]

[td width=490 padding=5 vertical-align=top]
[anchor=AboutTheAuthor]
[left]
[color=#B80000][h2]Assasinating for pleasure[/h2][/color]
[/left]
[rule]

[table]
[tr]
[td width=140 padding=5]
[icon=hired gun graves size=100]
[/td]

[td width=330]Hello summoner and welcome to my [[graves]] Guide! My name is Anthony, a Platinum rated player on the EUW server and I'll be your guide for today. I main the ADC role and [[graves]] is one of my favorite AD Carries! He's really fun and I hope I'll make you love him as much as I do (no ho[color=#COCOCO]mo[/color]).

[/td]
[/tr]

[tr]
[td colspan=2]
Graves is a ranged Attack Damage Carry, primarily played in the bottom lane along with a support to protect and help you throughout the game. He has an amazing burst and this makes him synergyze remarkably with supports focused on killing other champions (Hi [[annie]]!) You will be deleting people across the map and I'll help you along the way!
[/td]
[/tr]
[/table]


[/td]
[/tr]
[/table]


This makes it look like:

Malcolm Graves mafia graves Skill Priority > > >

Assasinating for pleasure Hello summoner and welcome to my Graves Guide! My name is Anthony, a Platinum rated player on the EUW server and I'll be your guide for today. I main the ADC role and Graves is one of my favorite AD Carries! He's really fun and I hope I'll make you love him as much as I do (no homo). Graves is a ranged Attack Damage Carry, primarily played in the bottom lane along with a support to protect and help you throughout the game. He has an amazing burst and this makes him synergyze remarkably with supports focused on killing other champions (Hi Annie!) You will be deleting people across the map and I'll help you along the way!

Here's a list of things we have to keep in mind:

• Vertical aligning. I haven't spoken of this yet. It makes your content stand as high as possible in the cell. If we don't use it, it will look like this:
  
  
  
  Vertical aligning

  Malcolm Graves mafia graves Skill Priority > > >

  Assasinating for pleasure Hello summoner and welcome to my Graves Guide! My name is Anthony, a Platinum rated player on the EUW server and I'll be your guide for today. I main the ADC role and Graves is one of my favorite AD Carries! He's really fun and I hope I'll make you love him as much as I do (no homo). Graves is a ranged Attack Damage Carry, primarily played in the bottom lane along with a support to protect and help you throughout the game. He has an amazing burst and this makes him synergyze remarkably with supports focused on killing other champions (Hi Annie!) You will be deleting people across the map and I'll help you along the way!

  
  
  Just add "vertical-align=top" in your cell code next to padding.
  Example: [td width=200 padding=5 vertical-align=top]
  
  If you want to align something at the bottom, just use "vertical-align=bottom".
  
  
• If you want to add an extra table in the left column, just act as if you're not working in a table already. Start from the beginning with [table], [tr] &[td].
  
  
• Do not close the first [td] until you're at the end of your first whole column on the left. Don't even use [/tr]. To close your whole new guide, add all of this at the end:
  [/td]
  [/tr]
  [/table]
  

And voila! We made everything a whole lot prettier!






A few examples of very nice usage of tables can be found here. Always try to come up with something new yourself, or credit the designers of the code if you use it in your guides.

Item Exposition

To freshen up your items section , and to make everything fall in line, tables are just perfect. Change the colors to make it complementary to the theme of your guide.

Code [table bgcolor=#080000] [tr] [th colspan=5 bgcolor=#960708][color=transparent]Mkay[/color] Itemization [color=transparent]Mkay[/color][/th][/tr] [tr] [td width=5 rowspan=5 bgcolor=#0F0E0E][color=#B80000] M A G I C R E S I S T[/color][/td] [td width=20] [/td] [td width=105 padding=10 bgcolor=#120000][left] [icon=Banshee's veil size=45][/left][/td] [td width=20] [/td] [td width=605 padding=5 bgcolor=#2B0000] [[Banshee's veil]] is one of my favorite items. It will block a spell once every 45 seconds (if you're not taking any damage in that time window). It's great against initators like [[malphite]].[/td][/tr] [tr] [td colspan=4][color=transparent]Mkay[/color] [/td] [/tr] [tr] [td colspan=1] [/td] [td colspan=1 padding=10 bgcolor=#120000][right] [icon=spirit visage size=45][/right][/td] [td colspan=1][/td] [td colspan=1 padding=5 bgcolor=#2B0000] [[spirit visage]] is not very popular amongst ADC's, although it is an item with 135% gold efficiency without its passive. You can buy it when an APC is really annoying, and there's no real dangerous, gamechanging spell you could block with [[banshee's veil]].[/td] [/tr] [tr] [td colspan=4] [color=transparent]Mkay[/color] [/td] [/tr] [tr] [td colspan=1] [/td] [td colspan=1 padding=10 bgcolor=#120000][left] [icon=mercurial scimitar size=45][/left] [/td] [td colspan=1][/td] [td colspan=1 padding=5 bgcolor=#2B0000] [[mercurial scimitar]] is situational. Buy it when [[morgana]] keeps on binding you for those everlasting three seconds, over and over again. It's great against suppressions ([[malzahar]] & [[warwick]]) as well. You can get it against [[zed]] to remove his [[death mark]]. It also gives a great boost to your AD and a small speed boost when activated. You could get this as a third item when the enemy lacks tankiness but their CC is hell. [/td][/tr] [tr] [td colspan=5 padding=12 bgcolor=#960708][/td][/tr][/table]

Mkay Itemization Mkay
M A G I C R E S I S T				Banshee's Veil is one of my favorite items. It will block a spell once every 45 seconds (if you're not taking any damage in that time window). It's great against initators like Malphite.
	Mkay
				Spirit Visage is not very popular amongst ADC's, although it is an item with 135% gold efficiency without its passive. You can buy it when an APC is really annoying, and there's no real dangerous, gamechanging spell you could block with Banshee's Veil.
	Mkay
				Mercurial Scimitar is situational. Buy it when Morgana keeps on binding you for those everlasting three seconds, over and over again. It's great against suppressions ( Malzahar & Warwick) as well. You can get it against Zed to remove his Death Mark. It also gives a great boost to your AD and a small speed boost when activated. You could get this as a third item when the enemy lacks tankiness but their CC is hell.

Emikadon also has her own iterpretation of displaying the item section. This is the code from her Morgana guide.

Code [table] [tr] [td width=50 height=50 padding=2][color=transparent].[/color][/td] [td width=300 padding=2][center][icon=mikael's crucible size=50][/center][/td] [td width=100 padding=2][center][color=#ffffff][b]UTILITY[/b][/color][/center][/td] [td width=300 padding=2][center][icon=locket of the iron solari size=50][/center][/td] [td width=50 padding=2][color=transparent].[/color][/td] [/tr] [tr] [td width=50 padding=1][/td] [td width=300 bgcolor=white padding=1][/td] [td width=100 padding=1][/td] [td width=300 bgcolor=white padding=1][/td] [td width=50 padding=1][/td] [/tr] [tr] [td colspan=1 padding=1][color=transparent].[/color][/td] [td colspan=1 padding=1][color=#b2ffb2][b]>[/b][/color] Mikael's Crucible offers a lot of utility with the massive amounts of mana regeneration so you can spam your abilities, 10% CDR so they'll be available more often, and 40 MR against magic damage teams. [color=#b2ffb2][b]>[/b][/color] The active can save someone's life due to it acting as a cleanse. It will remove any hard CC like stuns, snares, taunts, suppresses, silences, etc. as well as heal the target for a percentage of their maximum health. [color=#b2ffb2][b]>[/b][/color] This is especially useful because the current meta picks have a lot of CC (Nami, Thresh, Maokai, etc.) [/td] [td colspan=1 padding=1][color=transparent].[/color][/td] [td colspan=1 padding=1][color=orange][b]>[/b][/color] Locket of the Iron Solari is most known for the +20 MR Aura it provides for nearby teammates, as well as bonus health regeneration. In addition to that, you have 20 MR for yourself as well as 400 health. [color=orange][b]>[/b][/color] The active is a low cooldown shield, which shields all nearby allies for a good amount of health. It can be used during teamfights, individual skirmishes, or taking down objectives. [color=orange][b]>[/b][/color] Coordinate with your tank to make sure you don't overlap. The aura does not stack, so it's generally advised you don't get more than one per team. [/td] [td colspan=1 padding=1][color=transparent].[/color][/td] [/tr] [/table]

Which becomes:

.		UTILITY		.
.	> Mikael's Crucible offers a lot of utility with the massive amounts of mana regeneration so you can spam your abilities, 10% CDR so they'll be available more often, and 40 MR against magic damage teams. > The active can save someone's life due to it acting as a cleanse. It will remove any hard CC like stuns, snares, taunts, suppresses, silences, etc. as well as heal the target for a percentage of their maximum health. > This is especially useful because the current meta picks have a lot of CC (Nami, Thresh, Maokai, etc.)	.	> Locket of the Iron Solari is most known for the +20 MR Aura it provides for nearby teammates, as well as bonus health regeneration. In addition to that, you have 20 MR for yourself as well as 400 health. > The active is a low cooldown shield, which shields all nearby allies for a good amount of health. It can be used during teamfights, individual skirmishes, or taking down objectives. > Coordinate with your tank to make sure you don't overlap. The aura does not stack, so it's generally advised you don't get more than one per team.	.

Ability Sequence

GMD came up with the idea of turning the ability sequence into a beautiful piece of artwork. I altered it myself a bit to make it look as I wanted it to. Change colors, dimensions... to make it fit to your own guide.

Code [center] [size=5][color=B80000]Skilling order[Color][/size] [table] [tr] [td width=150 padding=1][color=transparent]0[/color] [/td] [center][td width=25 padding=1][color=#B80000][b]1[/b][/color][/td] [td width=25 padding=1][color=#B80000][b]2[/b][/color][/td] [td width=25 padding=1][color=#B80000][b]3[/b][/color][/td] [td width=25 padding=1][color=#B80000][b]4[/b][/color][/td] [td width=25 padding=1][color=#B80000][b]5[/b][/color][/td] [td width=25 padding=1][color=#B80000][b]6[/b][/color][/td] [td width=25 padding=1][color=#B80000][b]7[/b][/color][/td] [td width=25 padding=1][color=#B80000][b]8[/b][/color][/td] [td width=25 padding=1][color=#B80000][b]9[/b][/color][/td] [td width=25 padding=1][color=#B80000][b]10[/b][/color][/td] [td width=25 padding=1][color=#B80000][b]11[/b][/color][/td] [td width=25 padding=1][color=#B80000][b]12[/b][/color][/td] [td width=25 padding=1][color=#B80000][b]13[/b][/color][/td] [td width=25 padding=1][color=#B80000][b]14[/b][/color][/td] [td width=25 padding=1][color=#B80000][b]15[/b][/color][/td] [td width=25 padding=1][color=#B80000][b]16[/b][/color][/td] [td width=25 padding=1][color=#B80000][b]17[/b][/color][/td] [td width=25 padding=1][color=#B80000][b]18[/b][/color][/td][/center] [/tr] [/table] [table][tr][td width=705 bgcolor=#B80000 padding=1][/td][/tr][/table] [table] [tr] [td width=150 padding=1][left][color=#B80000][b][[buckshot]][/b][/color][/left] [/td] [center][td width=25 padding=1] [icon=Buckshot][/td] [td width=25 padding=1][/td] [td width=25 padding=1] [icon= Buckshot][/td] [td width=25 padding=1] [/td] [td width=25 padding=1][icon= Buckshot][/td] [td width=25 padding=1][/td] [td width=25 padding=1][icon= Buckshot][/td] [td width=25 padding=1] [/td] [td width=25 padding=1][icon= Buckshot][/td] [td width=25 padding=1][/td] [td width=25 padding=1][/td] [td width=25 padding=1][/td] [td width=25 padding=1][/td] [td width=25 padding=1][/td] [td width=25 padding=1][/td] [td width=25 padding=1][/td] [td width=25 padding=1][/td] [td width=25 padding=1][/td][/center] [/tr] [tr] [td colspan=1 padding=1][left][color=#B80000][b][[smoke screen]][/b][/color][/left][/td] [center][td colspan=3 padding=1][/td] [td colspan=1 padding=1][icon= Smoke screen][/td] [td colspan=9 padding=1][/td] [td colspan=1 padding=1][icon= Smoke screen][/td] [td colspan=1 padding=1][icon= Smoke screen][/td] [td colspan=1 padding=1][/td] [td colspan=1 padding=1][icon= Smoke screen][/td] [td colspan=1 padding=1][icon= Smoke screen][/td][/center] [/tr] [tr] [td colspan=1 padding=1][left][color=#B80000][b][[quickdraw]][/b][/color][/left] [/td] [center][td colspan=1 padding=1][/td] [td colspan=1 padding=1][icon= Quickdraw][/td] [td colspan=5 padding=1][/td] [td colspan=1 padding=1][icon= Quickdraw][/td] [td colspan=1 padding=1][/td] [td colspan=1 padding=1][icon= Quickdraw][/td] [td colspan=1 padding=1][/td] [td colspan=1 padding=1][icon= Quickdraw][/td] [td colspan=1 padding=1][icon= Quickdraw][/td] [td colspan=5 padding=1][/td][/center] [/tr] [tr] [td colspan=1 padding=1][left][color=#B80000][b][[collateral damage]][/b][/color][/left][/td] [center][td colspan=5 padding=1][/td] [td colspan=1 padding=1][icon=Collateral Damage][/td] [td colspan=4 padding=1][/td] [td colspan=1 padding=1][icon= Collateral Damage][/td] [td colspan=4 padding=1][/td] [td colspan=1 padding=1][icon= Collateral Damage][/td] [td colspan=2 padding=1][/td][/center] [/tr] [/Table] [table][tr][td width=705 bgcolor=#B80000 padding=1][/td][/tr][/table] [table] [tr] [td width=150 padding=1][color=transparent]0[/color] [/td] [center][td width=25 padding=1][color=#B80000][b]Q[/b][/color][/td] [td width=25 padding=1][color=#B80000][b]E[/b][/color][/td] [td width=25 padding=1][color=#B80000][b]Q[/b][/color][/td] [td width=25 padding=1][color=#B80000][b]W[/b][/color][/td] [td width=25 padding=1][color=#B80000][b]Q[/b][/color][/td] [td width=25 padding=1][color=#B80000][b]R[/b][/color][/td] [td width=25 padding=1][color=#B80000][b]Q[/b][/color][/td] [td width=25 padding=1][color=#B80000][b]E[/b][/color][/td] [td width=25 padding=1][color=#B80000][b]Q[/b][/color][/td] [td width=25 padding=1][color=#B80000][b]E[/b][/color][/td] [td width=25 padding=1][color=#B80000][b]R[/b][/color][/td] [td width=25 padding=1][color=#B80000][b]E[/b][/color][/td] [td width=25 padding=1][color=#B80000][b]E[/b][/color][/td] [td width=25 padding=1][color=#B80000][b]W[/b][/color][/td] [td width=25 padding=1][color=#B80000][b]W[/b][/color][/td] [td width=25 padding=1][color=#B80000][b]R[/b][/color][/td] [td width=25 padding=1][color=#B80000][b]W[/b][/color][/td] [td width=25 padding=1][color=#B80000][b]W[/b][/color][/td][/center] [/tr] [/table][/center]

Turns into:

Mastery Tree

Astrolia had the idea of making a custom mastery tree & NRS has made something really cool out of this idea. My interpretation is the following:

Code [table bgcolor=#031400] [tr] [td width=180 padding=2 vertical-align=top] [table bgcolor=#B80000][td width=180 padding=2] [table] [th colspan=4][center][size=2]OFFENSE[/size][/center][/th] [tr] [td width=34 height=34 padding=4 bgcolor=#1C0001][/td] [td width=34 height=34 padding=4 bgcolor=#E8DC00][icon=fury size=34][/td] [td width=34 height=34 padding=4 bgcolor=#1C0001][color=transparent]Table[/color] [/td] [td width=34 height=34 padding=4 bgcolor=#E8DC00][icon= butcher size=34][/td] [/tr] [tr] [td colspan=1 height=34 padding=4 bgcolor=#1C0001][/td] [td colspan=1 height=34 padding=4 bgcolor=#E8DC00][icon=brute force size=34][/td] [td colspan=1 height=34 padding=4 bgcolor=#1C0001][/td] [td colspan=1 height=34 padding=4 bgcolor=#E8DC00][icon=mastery feast size=34][/td] [/tr] [tr] [td colspan=1 height=34 padding=4 bgcolor=#1C0001][/td] [td colspan=1 height=34 padding=4 bgcolor=#E8DC00][icon=martial mastery size=34][/td] [td colspan=1 height=34 padding=4 bgcolor=#1C0001][/td] [td colspan=1 height=34 padding=4 bgcolor=#E8DC00][icon=executioner size=34][/td] [/tr] [tr] [td colspan=1 height=34 padding=4 bgcolor=#1C0001][/td] [td colspan=1 height=34 padding=4 bgcolor=#199E00][icon=warlord size=34][/td] [td colspan=1 height=34 padding=4 bgcolor=#1C0001][/td] [td colspan=1 height=34 padding=4 bgcolor=#E8DC00][icon=dangerous game size=34][/td] [/tr] [tr] [td colspan=1 height=34 padding=4 bgcolor=#E8DC00][icon=mastery frenzy size=34][/td] [td colspan=1 height=34 padding=4 bgcolor=#E8DC00][icon=devastating strikes size=34][/td] [td colspan=1 height=34 padding=4 bgcolor=# B80000][/td] [td colspan=1 height=34 padding=4 bgcolor=#1C0001][/td] [/tr] [tr] [td colspan=1 height=34 padding=4 bgcolor=# B80000][/td] [td colspan=1 height=34 padding=4 bgcolor=#E8DC00][icon=havoc size=34][/td] [td colspan=1 height=34 padding=4 bgcolor=# B80000][/td] [td colspan=1 height=34 padding=4 bgcolor=# B80000][/td] [/tr] [/table][/td][/table] [/td] [td width=345 padding=2 vertical-align=top] [center] HERE YOU CAN TALK ABOUT YOUR MASTERY CHOICES[/center] [/td] [td width=180 padding=2 vertical-align=top] [table bgcolor=0D0DB8] [tr] [td width=180 padding=2 vertical-align=top] [table bgcolor=#0D0DB8] [th colspan=4][center][size=2]DEFENSE[/size][/center][/th] [tr] [td width=34 height=34 padding=4 bgcolor=#E8DC00][icon=block size=34][/td] [td width=34 height=34 padding=4 bgcolor=#E8DC00][icon=recovery size=34][/td] [td width=34 height=34 padding=4 bgcolor=#03032B] [color=transparent]Table[/color] [/td] [td width=34 height=34 padding=4 bgcolor=#03032B] [color=transparent]Table[/color] [/td] [/tr] [tr] [td colspan=1 height=34 padding=4 bgcolor=#E8DC00][icon=unyielding size=34][/td] [td colspan=1 height=34 padding=4 bgcolor=#E8DC00][icon=veteran scars size=34][/td] [td colspan=1 height=34 padding=4 bgcolor=#0D0DB8][/td] [td colspan=1 height=34 padding=4 bgcolor=#03032B][/td] [/tr] [tr] [td colspan=1 height=34 padding=4 bgcolor=#03032B][/td] [td colspan=1 height=34 padding=4 bgcolor=#E8DC00][icon=juggernaut size=34][/td] [td colspan=1 height=34 padding=4 bgcolor=#03032B][/td] [td colspan=1 height=34 padding=4 bgcolor=#03032B][/td] [/tr] [tr] [td colspan=1 height=34 padding=4 bgcolor=#03032B][color=transparent]-[/color] [/td] [td colspan=1 height=34 padding=4 bgcolor=#03032B][/td] [td colspan=1 height=34 padding=4 bgcolor=#03032B][/td] [td colspan=1 height=34 padding=4 bgcolor=#03032B][/td] [/tr] [tr] [td colspan=1 height=34 padding=4 bgcolor=#03032B] [color=transparent]-[/color] [/td] [td colspan=1 height=34 padding=4 bgcolor=#03032B][/td] [td colspan=1 height=34 padding=4 bgcolor=#03032B][/td] [td colspan=1 height=34 padding=4 bgcolor=#0D0DB8][/td] [/tr] [tr] [td colspan=1 height=34 padding=4 bgcolor=#0D0DB8] [color=transparent]-[/color] [/td] [td colspan=1 height=34 padding=4 bgcolor=#03032B][/td] [td colspan=1 height=34 padding=4 bgcolor=#0D0DB8][/td] [td colspan=1 height=34 padding=4 bgcolor=#0D0DB8][/td] [/tr] [/table] [/td] [/tr] [/table] [/td] [/tr] [/table]

This turns into:

OFFENSE Table

HERE YOU CAN TALK ABOUT YOUR MASTERY CHOICES

DEFENSE Table Table - - -

Again, experiment, add colors, change dimensions, make something of your own.

Dividers

Jamespongebob posted the idea of making dividers here. Give it a visit as it looks pretty cool.

You can change the height by changing the padding. Removing the color at the table tag will make it thinner as well. You can find a gradient color generator here.


Code:


[table bgcolor=#B80000]
[tr]
[td width=705 padding=1 bgcolor=#ffff00] [/td]
[/tr][/table]



[table]
[tr]
[td width=71 padding=2 bgcolor=#cc0000] [/td][td width=71 padding=2 bgcolor=#B71400] [/td][td width=71 padding=2 bgcolor=#A32800] [/td][td width=71 padding=2 bgcolor=#8E3D00] [/td][td width=71 padding=2 bgcolor=#7A5100] [/td][td width=71 padding=2 bgcolor=#666600] [/td][td width=71 padding=2 bgcolor=#517A00] [/td][td width=71 padding=2 bgcolor=#3D8E00] [/td][td width=71 padding=2 bgcolor=#28A300] [/td][td width=71 padding=2 bgcolor=#14B700] [/td]
[/tr][/table]

Guide Review Format

Some of you may know that I like to review guides and give advice on improvements. I also know that many of you like doing this as well. For those reviewers I've made a review format. Do make your own chapters, change some colors if you like and add grades/pictures/whatever you come up with, when you use it to make something of your own. Maybe even a Table of Contents to make it look super-professional. Creativity and being different really matters. Crediting me for it in your service thread would be nice though :)

You can find an example of a champion guide review here & a general guide review here.

Code [table bgcolor=#01002E] [tr] [th colspan=2 bgcolor=#0a1221][columns][nextcol width=95][left][icon=riven size=95][/left] [nextcol width=605][size=7][color=#1DCF00]Foxy’s Epic Review[/color] – [color=#B80000]Guide Title[/color][/size][/columns] [/th][/tr] [tr] [th colspan=2 height=50 bgcolor=#1C1C1C] [size=5]Presentation[/size][/th][/tr] [tr] [td width=200 padding=2 bgcolor=#303030 vertical-align=top][center][h3]Art[/h3] [/center] [/td] [td width=550 padding=2 bgcolor=#494A49]Talk about the artwork. [/td] [/tr] [tr] [td colspan=1 padding=2 bgcolor=#303030 vertical-align=top] [center] [h3]Coding[/h3] [/center] [/td] [td colspan=1 padding=2 bgcolor=#494A49]Talk about the coding [/td] [/tr] [tr] [td colspan=1 padding=2 bgcolor=#303030 vertical-align=top] [center] [h3]Cheat Sheet[/h3] [/center] [/td] [td colspan=1 padding=2 bgcolor=#494A49]Talk about the cheat sheet [/td] [/tr] [tr][th colspan=2 height=50 bgcolor=#1C1C1C] [size=5]Organization[/size][/th][/tr] [tr] [td colspan=1 padding=2 bgcolor=#303030 vertical-align=top] [center] [h3]Chapters[/h3] [/center] [/td] [td colspan=1 padding=2 bgcolor=#494A49]Are all of the necessary chapters here? Which ones could be added? [/td] [/tr] [tr] [td colspan=1 padding=2 bgcolor=#303030 vertical-align=top] [center] [h3]Information[/h3] [/center] [/td] [td colspan=1 padding=2 bgcolor=#494A49]Global information. Is it all correct? What can be changed? Leave spaces to make it readable. [/td] [/tr] [tr] [td colspan=1 padding=2 bgcolor=#303030 vertical-align=top] [center] [h3]Language[/h3] [/center] [/td] [td colspan=1 padding=2 bgcolor=#494A49]Talk about language here. Are there some spelling/grammar errors?[/td] [/tr] [tr] [th colspan=2 height=50 bgcolor=#1C1C1C] [size=5]Viability[/size] [/th][/tr] [tr] [td colspan=1 padding=2 bgcolor=#303030 vertical-align=top][center] [h3]Item Choices[/h3] [/center] [/td] [td colspan=1 padding=2 bgcolor=#494A49]Are the items ok? Which ones are missing? Which ones don’t fit at all? [/td] [/tr] [tr] [td colspan=1 padding=2 bgcolor=#303030 vertical-align=top][center] [h3]Masteries[/h3] [/center] [/td] [td colspan=1 padding=2 bgcolor=#494A49]Talk about the masteries[/td] [/tr] [tr] [td colspan=1 padding=2 bgcolor=#303030 vertical-align=top][center] [h3]Runes[/h3] [/center] [/td] [td colspan=1 padding=2 bgcolor=#494A49] Are the runes any good? [/td][/tr] [tr][th colspan=2 height=50 bgcolor=#1C1C1C] [size=5]Tips ‘n Tricks[/size] [/th][/tr] [tr] [td colspan=1 padding=2 bgcolor=#303030 vertical-align=top][center] [h3]Tip nr 1[/h3] [/center] [icon= size=60] | [icon= size=60][/td] [td colspan=1 padding=2 bgcolor=#494A49] Add an icon to the left to visualize what you’re talking about if you have any tips. [/td] [/tr] [tr] [td colspan=1 padding=2 bgcolor=#303030 vertical-align=top] [center] [h3]Trick nr 1[/h3] [/center] [icon= size=60] | [icon= size=60][/td] [td colspan=1 padding=2 bgcolor=#494A49]Talk about what tricks they could add[/td][/tr] [tr] [th colspan=2 height=50 bgcolor=#1C1C1C] [size=5]Summary[/size] [/th][/tr] [tr] [td colspan=1 padding=2 bgcolor=#303030 vertical-align=top][center][h3]Grade:[/h3] [color=#00ff00]10/10[/color] [color=#FF0000]0/10[/color] [color=#FFA000]5/10[/color] [h3]Good Job! Terrible! Not bad![/h3][/center] [/td] [td colspan=1 padding=2 bgcolor=#494A49]How did they do? Was it any good? Why did you downvote? Why did you upvote? What can be changed? Are you going to change your vote when they change everything according to your input? Wish them luck![/td][/tr] [/table]

Looks like:

Foxy’s Epic Review – Guide Title
Presentation
Art	Talk about the artwork.
Coding	Talk about the coding
Cheat Sheet	Talk about the cheat sheet
Organization
Chapters	Are all of the necessary chapters here? Which ones could be added?
Information	Global information. Is it all correct? What can be changed? Leave spaces to make it readable.
Language	Talk about language here. Are there some spelling/grammar errors?
Viability
Item Choices	Are the items ok? Which ones are missing? Which ones don’t fit at all?
Masteries	Talk about the masteries
Runes	Are the runes any good?
Tips ‘n Tricks
Tip nr 1 size=60 | size=60	Add an icon to the left to visualize what you’re talking about if you have any tips.
Trick nr 1 size=60 | size=60	Talk about what tricks they could add
Summary
Grade: 10/10 0/10 5/10 Good Job! Terrible! Not bad!	How did they do? Was it any good? Why did you downvote? Why did you upvote? What can be changed? Are you going to change your vote when they change everything according to your input? Wish them luck!

Guide Format

You can make an entire guide yourself without using photoshop or anything. Here's my example. For now it's only the dividers, because of lack of time. Will add the entire format soon.

Code [table] [tr] [td width=280][table][tr][td width=260 bgcolor=#B80000 padding=2][/td] [/tr][/table] [/td] [td width=145][center][font=kokila][size=3][b][color=#B80000][url=#table]BACK TO TOP[/url][/color][/b][/size][/font][/center][/td] [td width=280][table][tr][td width=260 bgcolor=#B80000 padding=2][/td][/tr][/table][/td][/tr][/table] [h3]Chapter Title[/h3] [table][tr][td width=705 bgcolor=#B80000 padding=2][/td][/tr][/table]

BACK TO TOP

Chapter Title

Table of Contents

And for those who're interested, this is my green/pink ToC. Please do change the colors if you use it. They're horrific like this.

Code [table] [tr] [td colspan=7 padding=0 bgcolor=#009900] [color=transparent]ok[/color][/td][/tr] [th colspan=7 bgcolor=#cc3366][color=transparent]Guide[/color] [size=6]Table of Contents[/size] [color=transparent]By Foxy[/color][/th] [tr] [td width=20 rowspan=2 padding=2 bgcolor=#009900][/td] [td width=120 padding=2 bgcolor=#B80000][size=5][goto=intro][color=#A0A0A0]Introduction[/color][/goto][/size][/td] [td width=120 padding=2 bgcolor=#B80000][size=5][goto=break][color=#A0A0A0]Breakdown[/color][/goto][/size][/td] [td width=120 padding=2 bgcolor=#B80000][size=5][goto=design][color=#A0A0A0]Designing[/color][/goto][/size][/td] [td width=120 padding=2 bgcolor=#B80000][size=5][goto=examples][color=#A0A0A0] Examples[/color][/goto][/size][/td] [td width=120 padding=2 bgcolor=#B80000][size=5][goto=conclusion][color=#A0A0A0]Conclusion[/color][/goto][/size][/td] [td width=20 rowspan=2 padding=2 bgcolor=#009900][/td] [/tr] [tr] [td colspan=1 padding=2 vertical-align=top bgcolor=#080808] [size=2] [goto=bws] [color=#A0A0A0]Before we start[/color] [/goto] [/size] [size=2] [goto=what] [color=#A0A0A0]What[/color] [/goto] [/size] [size=2] [goto=why] [color=#A0A0A0]Why[/color] [/goto] [/size] [size=2] [goto=how] [color=#A0A0A0]How[/color] [/goto] [/size][/td] [td colspan=1 padding=2 vertical-align=top bgcolor=#080808] [size=2] [goto=tables] [color=#A0A0A0]Tables[/color] [/goto] [/size] [size=2] [goto=rows] [color=#A0A0A0]Rows[/color] [/goto] [/size] [size=2] [goto=cells] [color=#A0A0A0]Cells[/color] [/goto] [/size] [size=2] [goto=padding] [color=#A0A0A0]Padding[/color] [/goto] [/size] [size=2] [goto=height] [color=#A0A0A0]Height[/color] [/goto] [/size] [size=2] [goto=header] [color=#A0A0A0]Header[/color] [/goto] [/size] [size=2] [goto=colors] [color=#A0A0A0]Colors[/color] [/goto] [/size][/td] [td colspan=1 padding=2 vertical-align=top bgcolor=#080808][size=2] [goto=basic] [color=#A0A0A0]Basic Tables[/color] [/goto] [/size] [size=2] [goto=advanced] [color=#A0A0A0]Advanced Tables[/color] [/goto] [/size] [size=2] [goto=nesting] [color=#A0A0A0]Nesting[/color] [/goto] [/size][/td] [td colspan=1 padding=2 vertical-align=top bgcolor=#080808] [size=2] [goto=abil] [color=#A0A0A0]Ability Sequence[/color] [/goto] [/size] [size=2] [goto=mast] [color=#A0A0A0]Mastery Tree[/color] [/goto] [/size] [size=2] [goto=toc] [color=#A0A0A0]Table of Contents[/color] [/goto] [/size][/td] [td colspan=1 padding=2 vertical-align=top bgcolor=#080808] [size=2] [goto=thanks] [color=#A0A0A0]Thanks[/color] [/goto] [/size] [size=2] [goto=credits] [color=#A0A0A0]Credits[/color] [/goto] [/size][/td] [/tr] [tr] [td colspan=7 padding=0 bgcolor=#009900] [color=transparent]ok[/color][/td][/tr] [/table]

Well, we've finally come to an end (thank you sweet lord Jebus!). I really hope I've helped you to understand how tables work, and would really like to see them being used in everyone's guides from now on. If you do have any questions, feel free to PM me or just ask away in the discussion segment.

Thanks

• Is what I would like to say to whoever added tables to the database. Good stuff!
  
• To Astrolia. Pioneer on Mobafire in working with tables. You can find her post about it here.
  
• To GMD for the guide template. It taught me some nice things.
  
• To everyone who likes this guide, upvotes & gives points of improvement.

Credits

• Utility item displaying: Emikadon
  
• Mastery Tree idea: Astrolia & NorthernRedStar.
  
• Ability sequence idea: GrandmasterD.
  
• Dividers idea: Jamespongebob, find his post here.

Φόξυ