How to Make Dividers Using Tables

[quote=jamespongebob]Hello. So with the addition of tables to Mobafire, it's now possible to make dividers using coding without resorting to [[[rule]]]. This is because table cells can have background colors. Anyhow, so the pros of using tables are: A.) They load faster than images, B.)They're generally easier to make, C.)They can reach the maximum guide width of 705 px. whereas images can only reach 685 px., and D.) They're prettier than using [[[rule]]]. The cons are kind of obvious. Less variety than making your own dividers on Photoshop and what not. So how you're going to make a divider is basically setting a bgcolor to a cell, and making the table row 705 px. wide, and adding padding. You can adjust the height of the divider by adjusting the padding. As an example, here is one that is monocolored. [table][tr width=705][td bgcolor=F271C8 padding=1][/td][/tr][/table] [spoiler=basic code][code][table][tr width=705][td bgcolor=HEXTRIPLET padding=1][/td][/tr][/table][/code][/spoiler] Easy peasy. If you want more colors, you can add more cells and change the bgcolors. For example, [table][tr width=705][td bgcolor=F271C8 padding=1][/td] [td bgcolor=EE71C8 padding=1][/td] [td bgcolor=EA72C9 padding=1][/td] [td bgcolor=E772C9 padding=1][/td] [td bgcolor=E373CA padding=1][/td] [td bgcolor=DF73CA padding=1][/td] [td bgcolor=DC74CB padding=1][/td] [td bgcolor=D874CB padding=1][/td] [td bgcolor=D475CC padding=1][/td] [td bgcolor=D175CC padding=1][/td] [td bgcolor=CD76CD padding=1][/td] [td bgcolor=C976CD padding=1][/td] [td bgcolor=C677CE padding=1][/td] [td bgcolor=C277CE padding=1][/td] [td bgcolor=BE78CF padding=1][/td] [td bgcolor=BB78CF padding=1][/td] [td bgcolor=B779D0 padding=1][/td] [td bgcolor=B379D0 padding=1][/td] [td bgcolor=B07AD1 padding=1][/td] [td bgcolor=AC7AD1 padding=1][/td] [td bgcolor=A87BD2 padding=1][/td] [td bgcolor=A57BD2 padding=1][/td] [td bgcolor=A17CD3 padding=1][/td] [td bgcolor=9D7CD3 padding=1][/td] [td bgcolor=9A7DD4 padding=1][/td] [td bgcolor=967DD4 padding=1][/td] [td bgcolor=927ED5 padding=1][/td] [td bgcolor=8F7ED5 padding=1][/td] [td bgcolor=8B7FD6 padding=1][/td] [td bgcolor=877FD6 padding=1][/td][/tr][/table] [table][tr width=705 padding=1][td bgcolor=C80046 padding=1][/td] [td bgcolor=C8001B padding=1][/td] [td bgcolor=C81300 padding=1][/td] [td bgcolor=C83B00 padding=1][/td] [td bgcolor=C85F00 padding=1][/td] [td bgcolor=C88200 padding=1][/td] [td bgcolor=C8A900 padding=1][/td] [td bgcolor=B8C800 padding=1][/td] [td bgcolor=63C800 padding=1][/td] [td bgcolor=38C800 padding=1][/td] [td bgcolor=06C800 padding=1][/td] [td bgcolor=00C82D padding=1][/td] [td bgcolor=00C859 padding=1][/td] [td bgcolor=00C783 padding=1][/td] [td bgcolor=00C7AD padding=1][/td] [td bgcolor=00B3C7 padding=1][/td] [td bgcolor=008BC8 padding=1][/td] [td bgcolor=0067C8 padding=1][/td] [td bgcolor=0043C8 padding=1][/td] [td bgcolor=001CC8 padding=1][/td] [td bgcolor=1100C8 padding=1][/td] [td bgcolor=3C00C7 padding=1][/td] [td bgcolor=6500c8 padding=1][/td][/tr][/table] [table][tr width=705 padding=1][td bgcolor=ffffff padding=1][/td] [td bgcolor=ff7200 padding=1][/td] [td bgcolor=ffffff padding=1][/td] [td bgcolor=ff7200 padding=1][/td] [td bgcolor=ffffff padding=1][/td] [td bgcolor=ff7200 padding=1][/td] [td bgcolor=ffffff padding=1][/td] [td bgcolor=ff7200 padding=1][/td] [td bgcolor=ffffff padding=1][/td] [td bgcolor=ff7200 padding=1][/td] [td bgcolor=ffffff padding=1][/td] [td bgcolor=ff7200 padding=1][/td] [td bgcolor=ffffff padding=1][/td] [td bgcolor=ff7200 padding=1][/td] [td bgcolor=ffffff padding=1][/td] [td bgcolor=ff7200 padding=1][/td] [td bgcolor=ffffff padding=1][/td] [td bgcolor=ff7200 padding=1][/td] [td bgcolor=ffffff padding=1][/td][/tr][/table] You can also give the appearance of borders on the dividers by putting a bg color on the table tag. [table bgcolor=c20000][tr width=705 padding=5][td bgcolor=000000 padding=2][/td] [td bgcolor=000000 padding=2][/td] [td bgcolor=000000 padding=2][/td] [td bgcolor=000000 padding=2][/td] [td bgcolor=000000 padding=2][/td] [td bgcolor=000000 padding=2][/td] [td bgcolor=000000 padding=2][/td] [td bgcolor=000000 padding=2][/td] [td bgcolor=000000 padding=2][/td] [td bgcolor=000000 padding=2][/td] [td bgcolor=000000 padding=2][/td] [td bgcolor=000000 padding=2][/td] [td bgcolor=000000 padding=2][/td] [td bgcolor=000000 padding=2][/td] [td bgcolor=000000 padding=2][/td] [td bgcolor=000000 padding=2][/td] [td bgcolor=000000 padding=2][/td] [td bgcolor=000000 padding=2][/td] [td bgcolor=000000 padding=2][/td] [td bgcolor=000000 padding=2][/td] [td bgcolor=000000 padding=2][/td] [td bgcolor=000000 padding=2][/td] [td bgcolor=000000 padding=2][/td] [td bgcolor=000000 padding=2][/td] [td bgcolor=000000 padding=2][/td] [td bgcolor=000000 padding=2][/td] [td bgcolor=000000 padding=2][/td][/tr][/table] If you want to see the coding used for all the dividers, just hit the quote button. Most of the bgcolors were taken from bbcode generators such as [url=http://tektek.org/color/]this[/url] and [url=http://www.stuffbydavid.com/textcolorizer]this[/url]. Cheers.[/quote]

[quote=Foxy Riven]Nice! I just finished a table coding guide, mind if I add an example of this, giving you all the credit and linking this post? Also, the basic code should be this: [[[table]]][[[tr]]][[[td width=705 bgcolor=COLOR]]][[[color=transparent]]].[[[/td]]][[[/tr]]][[[/table]]][/quote]

[quote=jamespongebob]No problem. Since I put the 705 in the [[[tr]]], I thought I may as well keep it uniform even if there is only one cell. It doesn't really matter either way.[/quote]

[quote=Foxy Riven]Thanks! Hmm, didn't work before. Let's see: [table][tr width=705][td bgcolor=#FF0000][color=transparent].[/td][/tr][/table] edit: Well it works here but it doesn't work on the guide O.o[/quote]

[quote=jamespongebob]You could try adding an uncolored row with the width setting beneath or above it.[/quote]

[quote=Jovy]Actually looks pretty complicated to me. The multicolored ones, I mean. [table][tr width=705][td bgcolor=#FF4589][color=transparent].[/td][/tr][/table][/quote]

[quote=Ubnoxius]interesting, cool, but kind of blocky, if you're making a minecraft guide then these would be good.[/quote]

[quote=jamespongebob][quote=MissMaw]Actually looks pretty complicated to me. The multicolored ones, I mean. [table][tr width=705][td bgcolor=#FF4589][color=transparent].[/td][/tr][/table][/quote] The multicolored ones are just about adding more [[[td bgcolor=#COLOR]]][[[color=transparent]]].[[[/td]]] after the first.[/quote]

[quote=astrolia]You don't need to use transparent text. You can set the padding in the td to control the height. However, it adds padding to all 4 sides (top, bottom, left, right) so padding=1 will give you a "height" of 2 pixels (1 on top, 1 on bottom). Example: [table] [tr] [td padding=1 bgcolor=white][/td] [td padding=1 bgcolor=gray][/td] [td padding=1 bgcolor=white][/td] [td padding=1 bgcolor=gray][/td] [td padding=1 bgcolor=white][/td] [/tr] [/table][/quote]

[quote=jamespongebob]^thanks The op has been updated.[/quote]