You can customize yo tables! (under construction but you can still look)

Go down

You can customize yo tables! (under construction but you can still look)

Post by Asche on Tue Sep 04, 2012 4:20 am

INTRO!

There are different levels of customizing.
1) The Table
2) The Row
3) The Cell

but which one is which with all those crappy coding names and such, well, I'll tell you.
Table = table
Row = tr
Cell = td

Why are they CALLED this? I HAVE NO FREAKING CLUE, but it's OKAY!
But if you don't plan to have more than one row, you can still make a table!

EXAMPLE:
CELL 1CELL 2CELL 3
Code:
[table border=2px][td]CELL 1[/td]
[td]CELL 2[/td]
[td]CELL 3[/td][/table]

An example! w/ a border to see it's table-ness
row 1, cell 1row 1 cell 2
row 2, cell 1rpw 1 cell 2
Code:
[table border=2px][tr][td]row 1, cell 1[/td][td]row 1 cell 2[/td][/tr]
[tr][td]row 2, cell 1[/td][td]rpw 1 cell 2[/td][/tr][/table]

without borders
row 1, cell 1row 1 cell 2
row 2, cell 1rpw 1 cell 2
Code:
[table][tr][td]row 1, cell 1[/td][td]row 1 cell 2[/td][/tr]
[tr][td]row 2, cell 1[/td][td]rpw 1 cell 2[/td][/tr][/table]

I'll be using with borders so the tables will seem more authentic.


ADDING COLOURS!

THIS SECTION IS UNDER CONSTRUCTION BUT… You can style your tables!
-background colour
-border
->px
->type (solid, dashed, dotted
->colour


You can style your rows!
-colour

You can style you cells!
-colour

ADJUSTING SPACING AND WIDTH!!

In this section, you will learn how to space the tables and cells within them.

This is a table that uses 100% of the post size.
Row 1, Cell 1 (25%)Row 1, Cell 2(50%)Row 1, Cell 2(25%)
Code:
[table width="100%" border="2px"][tr]
[td cell width=25%]Row 1, Cell 1 (25%)[/td]
[td cell width=50%]Row 1, Cell 2(50%)[/td]
[td cell width=25%]Row 1, Cell 2(25%)[/td]
[/tr][/table]

This is a table that uses 50% of the post size.
Row 1, Cell 1 (10%)Row 1, Cell 2(15%)Row 1, Cell 2(25%)
Code:
[table width="50%" border="2px"][tr]
[td cell width=10%]Row 1, Cell 1 (10%)[/td]
[td cell width=15%]Row 1, Cell 2(15%)[/td]
[td cell width=25%]Row 1, Cell 2(25%)[/td]
[/tr][/table]

Adjust the percentages however you want and just delete ‘border=2px’ if you don’t want the border.

This is how you center a table without centering the content inside it
Row 1, Cell 1 (10%)Row 1, Cell 2(15%)Row 1, Cell 2(25%)
Code:
[table width="50%" border="2px" style="margin-left:auto;margin-right:auto;"][tr]
[td cell width=10%]Row 1, Cell 1 (10%)[/td]
[td cell width=15%]Row 1, Cell 2(15%)[/td]
[td cell width=25%]Row 1, Cell 2(25)[/td]
[/tr][/table]
You can replace the ‘auto’ with pixels as well if you prefer something more specific.



If you've been paying attention, you can adjust cell width with whole table!

Row 1, Cell 1 (25%)Row 1, Cell 2(50%)Row 1, Cell 2 (25%)

Row 1, Cell 1 (10%)Row 1, Cell 2(15%)Row 1, Cell 2 (25%)



When you turn the borders off and add spoilers, it looks something like this.
content 1:
Row 1, Cell 1 (25%)
content 2:
Row 1, Cell 2(50%)
content 3:
Row 1, Cell 2(25%)
Code:
[table width="100%" border="2px"][tr]
[td cell width=25%][spoiler=content 1]Row 1, Cell 1 (25%)[/spoiler][/td]
[td cell width=50%][spoiler=content 2]Row 1, Cell 2(50%)[/spoiler][/td]
[td cell width=25%][spoiler=content 3]Row 1, Cell 2(25%)[/spoiler][/td]
[/tr][/table]

content 1:
Row 1, Cell 1 (10%)
content 2:
Row 1, Cell 2(15%)
content 3:
Row 1, Cell 2(25%)
Code:
[table width="50%" border="2px"][tr]
[td cell width=10%][spoiler=content 1]Row 1, Cell 1 (10%)[/spoiler][/td]
[td cell width=15%][spoiler=content 2]Row 1, Cell 2(15%)[/spoiler][/td]
[td cell width=25%][spoiler=content 3]Row 1, Cell 2(25%)[/spoiler][/td]
[/tr][/table]

ADVANCED!

WHAT TO EXPECT!
Using images as backgrounds for your tables!
Using padding for tables and cells!
Spoilers + Tables = SO MUCH ORGANIZATION!


NOTES!


  • pm me for any specific questions. I'll try to get back to you soon and answer to the best of my abilities.
  • content is weirdly centered (vertically) but there's a way around it. It's a hassle, but just use the same amount of line breaks in each cell. In this case, it's four.


EXAMPLE:
My character is socially
awkward, and so are a handful
of other people's character's
as well
Likes
Cookies

Disklikes

My character is socially
awkward, and so are a handful
of other people's character's
as well
Likes
Cookies


Dislikes





Last edited by Asche on Thu Nov 29, 2012 10:18 pm; edited 2 times in total (Reason for editing : I wants to add more infoooo)


(narration) olive drab || green yellow (dialogue)

"I finished moving to college but I didn't know how fast time went..." -Splatter
avatar
Asche
D rank
D rank


View user profile

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum