get
prime

General Guide by Foxy Riven

20K
Views
34
Comments
13
Votes
League of Legends Build Guide Author Foxy Riven

Foxy's Tables Guide - Grasping the Table Coding Basics

Foxy Riven Last updated on June 6, 2016
Like Build on Facebook Tweet This Build Share This Build on Reddit




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:

TEXT TEXT TEXT
DOUBLED CELL TEXT


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.


Delicious soup





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



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


    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




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


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



Turns into:

Skilling order
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
0 Q E Q W Q R Q E Q E R E E W W R W W



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


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



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



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





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





Φόξυ


Mobafire

General Guides

League of Legends

More Guides

The Charts


Featured

30 Days

All Time

Popular
Top Guide by Champion