Hunter's How To's - Tables

Forum Issues? Site Suggestions?

Hunter's How To's - Tables

Postby Phauss » Sat Oct 16, 2010 11:10 am

I recently added the ability to make things called tables on the forum. The tag buttons can be found at the top of the edit box when making or editing a post. They let you organize things like data and lists more cleanly. For the first time user, they seem daunting in appearance, but they are simple to make in practice.

A table is the technical term for something that looks like a spreadsheet. This is what they look like:
AAABBB
CCCDDD

And this is that the code looks like:
Code: Select all
[Table][tr][td]AAA[/td][td]BBB[/td][/tr][tr][td]CCC[/td][td]DDD[/td][/tr][/Table]

We'll go over the code in just a moment, but first you need to know about the parts of a table and what they do.



Parts of a Table
Table - The table tag basically declares that you're out to make an organized arrangement of rows and columns. Everything having to do with the table will go after this tag.

Table Row (tr) - A table row tag declares that you want to create a new row. An easy way to remember that a row comes first is to think "I have a table, and it will have a row!"

Table Divide (td) - A table divide tag (aka a column) declares that you want to make a column out of whatever's inside the tag. Think "I have a row, and it will have a column, column, column!" for a table with three columns. All the rows must have the same amount of columns!

Pretty soon, you'll be crankin' some sick beats when you make your tables. "My table has a row, column, column, column, a row, column, column, column..." etc. Add synths and a bass track and you'll be set.



Using Table Tags
It may be easier to visualize the table by typing out things the way you want them to be organized before you actually make the table. We'll do this first. We want a table with two rows and three columns:
Code: Select all
AAA BBB CCC
DDD EEE FFF

First things first, we wrap it in the table tag:
Code: Select all
[Table]
AAA BBB CCC
DDD EEE FFF
[/Table]

Next, we declare the rows:
Code: Select all
[Table]
[tr] AAA BBB CCC [/tr]
[tr] DDD EEE FFF [/tr]
[/Table]

Then, we assign the column tags. This tag puts things in their own cell:
Code: Select all
[Table]
[tr] [td]AAA[/td] [td]BBB[/td] [td]CCC[/td] [/tr]
[tr] [td]DDD[/td] [td]EEE[/td] [td]FFF[/td] [/tr]
[/Table]

At this point, we're pretty much done. The table will work at this stage. However, we want to make the code all on one line, otherwise there will be a large gap of empty space between the table and any text above it, as if we had hit the enter key a bunch of times before making the table. Here's what the finished product looks like:
Code: Select all
[Table] [tr] [td]AAA[/td] [td]BBB[/td] [td]CCC[/td] [/tr] [tr] [td]DDD[/td] [td]EEE[/td] [td]FFF[/td] [/tr] [/Table]

And voila!
AAA BBB CCC
DDD EEE FFF

Spaces don't need to be added between the tags, and it doesn't change the table at all. The spaces help to make sense of the code when you go back to edit things.

There are other interesting things that can be done with tables. Pictures can be organized in the cells to display a certain way to make a larger picture. For instance, a picture can be cut into pieces in such a way that when the pieces are displayed in the table cells, it creates a frame or border around central text or content.

I'd have to go back and either edit the table tags or make a new tag to do this cleanly, because organizing the pictures with the current table tags would look kind of choppy with the shown borders and cell padding. Without borders or padding, pictures in different cells would fit right up against eachother.
We are each a beautiful and unique snowflake that will melt in hell.

I got the words "jacuzzi" and "yakuza" confused.
Now I'm in hot water with the Japanese mafia.
User avatar
Phauss
Site Admin
 
Posts: 1097
Joined: Thu Oct 01, 2009 10:30 am
Location: Here and There

Return to Suggestions and Ideas

Who is online

Users browsing this forum: No registered users and 2 guests

cron