Encyclopedia Dramatica:Formatting/Collapsing Tables
One of the major problems on ED these days is the insane overcrowding of articles. A litany of pictures, text, and sloppiness that really exudes an air of unlulziness and looks terrible is not a good way to present an article and expect somebody to stick around for more than a minute. A great way to reduce the clutter of an article is by using an unholy but epic combination of elements thought up by ED in late 2008. When a table and a collapsing object love each other very, very much, they get together to the sounds of soothing RnB, and nine months later, you've got yourself a Collapsing Table.
Basics
Before mastering the art of collapsing tables, it's necessary to know the fundamentals, so here's a bit of review.
The Table
The table is essentially a division of a given space in an article by rigid compartmentalization. There are two methods by which to create a table.
Both methods work in rows, from left to right by the cells of the table.
The HTML method
For this method, you must use several HTML tags as you would a <div> or a <span>.
- The Necessary Tags:
- You must specify that a table is being started using a <table> tag.
- You must specify when a column is being started using a <tr> tag.
- You must specify individual cell characteristics using a <td> or <th> tag.
- <td> specifies a cell with regular text
- <th> specifies a cell with bolded text
Always remember to close your tags, or bad things will happen to your page.
- Simple Example:
<table border="1">
<tr>
<th>Over</th>
<th>Years</th>
</tr>
<tr>
<td>9000</td>
<td>Old</td>
</tr>
</table>
The above example would have an output as shown below.
| Over | Years |
|---|---|
| 9000 | Old |
The Bracket Method
Frankly, there is a much simpler method than using HTML tags to define a table. This method is known as the bracket method, so-called because it requires a bracket to surround the beginning and end of your table.
- Every Bracket-Table begins like this:
{|
||
|}
Currently, the above table has one cell in it — the middle set of parallel separators. If you wanted a table with three cells in it, arranged in a horizontal line, you would do the following:
{|
||
||
||
|}
- Now you need to define the characteristics of the entire table:
You do this by placing a style in the line above the first cell, right next to the first bracket and parallel separator, as shown below:
{|style=" "
||
|}
For those unfamiliar with styles; they're really not a difficult concept. There are a series of properties that you can find at many websites that allow you to change the appearance of any <div>, <span>, or table. A whole list of them can be found here. The most useful ones are border, background-color, and if you're really good, -moz-border-radius.
- Next, you should define individual cell characteristics:
To change the style of individual cells, simply put a style between the vertical parallel separators. To place text or a picture into your table, do so to the right of the parallel separator in any lines but the first and the last one. Here's an example with some simple styles filled in. Beneath it is the output of the table:
{|style="border:2px solid red"
|style="border:1px solid blue"|SEE ME MAKE A TABLE
|style="Background-color:blue"|[[Image:ass.jpg|200px]]
|}
| SEE ME MAKE A TABLE | 
|
- Finally, if you want to start a new row:
To start a new row, simply insert a "|-" on a line by itself, and continue in the same manner as before. To make cell invade a neighboring cell, use colspan="number" and rowspan="number" to invade horizontally and vertically, respectively.
{|style="border:2px solid red" border=3
|style="border:1px solid blue"|SEE ME MAKE A TABLE
|style="Background-color:blue" colspan=2|[[Image:ass.jpg|200px]]
|-
|colspan=3 align=center|Here's picture of the female posterior
|-
|align=center|tee
|align=center|hee
|align=center|Hee
|}
| SEE ME MAKE A TABLE |
| |
| Here's picture of the female posterior | ||
| tee | hee | Hee |
The Collapsing Object
See ED:Collapsing_Objects for a full explanation.
Simply put, you can display and hide content using a simple link. It works like this:
- First, you must define the expanding/collapsing link itself:
<span class="co; {{1}} ; {{2}} ;0; {{3}} ; {{4}}">
- {{{1}}}= The display text when an object is already expanded. Something to the effect of [-] or [collapse]
- {{{2}}}= The display text when an object is already collapsed. Something to the effect of [+] or [expand]
- {{{3}}}= Any word or phrase you want, provided another collapsing object isn't already using it.
- {{{4}}}= color, in either standard Hex Codes (#xxxxxx) or english equivalents (blue, green, red)
- Example:
<span class="co;[-];[+];0;uniqueName1;#24272B">
- Then you must define the content to be collapsed/expanded:
<div class="uniqueName1"> HERE IS SOME INTERESTING CONTENT </div>
Collapsing Table
The following is a step-by-step tutorial on the creation of collapsing tables.
Step 1
- First you need to determine how many collapsed content panes you're going to need for your article. It's generally a good idea not to exceed 10 panes because of the horizontal limit of space in a table. For the sake of simplicity, let's define the content as five separate panes, each containing a number, counting up, so that without any special formatting, the text appears thus: ONE, TWO, THREE, FOUR, FIVE.
- Because there are five content panes, our first step after defining the beginning of the table is to add a colspan="5" to the very first cell, and then create a new row by inserting a "|-" on the next line, like so:
{|
|colspan=5|
|-
|}
Step 2
- We've determined at this point that there are five content regions which we want to organize into the table, so we're going to place five sets of parallel separators beneath the line break, to represent the five separate cells into which we will place descriptions of our content:
{|
|colspan=5|
|-
||
||
||
||
||
|}
Step 3
- At this point, The shell of the basic table is nearly completed; there's just one more line to define, and that is the links to our content. So beneath the five separators already show, introduce another "|-" line break, and add five more sets of parallel separators for a total of eleven blank cells including the top one with the colspan:
{|
|colspan=5|
|-
||
||
||
||
||
|-
||
||
||
||
||
|}
Step 4
- Now, let's add a title to our table, placing it into the colspan's display region, and adding an align=center (optional, but it looks nice) to its properties, next to the colspan. We'll title this table "NUMBERS":
{|
|colspan=5 align=center|NUMBERS
|-
||
||
||
||
||
|-
||
||
||
||
||
|}
Step 5
- Now, as for the descriptions of your content, (which you'll definitely want to have to reduce confusion as to what a reader is opening up with a collapsing object), you will place them, like the title of the table, to the left of your parallel separators, and add align=center to each of the five cells' properties. In fact, you can just go ahead an add the align=center to every remaining cell's properties. The descriptions we'll use will go like this: "FIRST, SECOND, THIRD, FOURTH, FIFTH":
{|
|colspan=5 align=center|NUMBERS
|-
|align=center|FIRST
|align=center|SECOND
|align=center|THIRD
|align=center|FOURTH
|align=center|FIFTH
|-
|align=center|
|align=center|
|align=center|
|align=center|
|align=center|
|}
Step 6
- This is the tricky part, simply because the coding gets to be a bit of a mess. You're now going to introduce five separate links for collapsing objects on the five remaining blank cells. You must make sure that each link has a unique ID, so that when you open the link, it doesn't mess up or neglect to even form a collapse joint; a major problem you'll want to avoid. So, on each cell's display region to the left of the parallel separator, add <span class="co;[-];[+];0;A UNIQUE ID;ANY LINK COLOR YOU WANT"></span>. We'll make the links green. The code will appear like this:
{|
|colspan=5 align=center|NUMBERS
|-
|align=center|FIRST
|align=center|SECOND
|align=center|THIRD
|align=center|FOURTH
|align=center|FIFTH
|-
|align=center|<span class="co;[-];[+];0;content1;green"></span>
|align=center|<span class="co;[-];[+];0;content2;green"></span>
|align=center|<span class="co;[-];[+];0;content3;green"></span>
|align=center|<span class="co;[-];[+];0;content4;green"></span>
|align=center|<span class="co;[-];[+];0;content5;green"></span>
|}
Step 7
- We have now finished the links to the content, so technically the rudimentary table itself is done. HOWEVER, these links lead to nowhere right right now, so we need to hook them up individually to the content panes that we defined way back in Step One, as you'll recall (ONE, TWO, THREE, FOUR, FIVE.). To do this, we need to surround each of the content zones with a div indicating the unique id which we assigned to the links in the table. For example, the first content pane would appear thus:
<div class="content1">ONE</div>, and the second would appear as <div class="content2">TWO</div>, and you would replace ONE, TWO, and so forth, with whatever content you wanted to be revealed by an expansion upon clicking a link in the table.
{|
|colspan=5 align=center|NUMBERS
|-
|align=center|FIRST
|align=center|SECOND
|align=center|THIRD
|align=center|FOURTH
|align=center|FIFTH
|-
|align=center|<span class="co;[-];[+];0;content1;green"></span>
|align=center|<span class="co;[-];[+];0;content2;green"></span>
|align=center|<span class="co;[-];[+];0;content3;green"></span>
|align=center|<span class="co;[-];[+];0;content4;green"></span>
|align=center|<span class="co;[-];[+];0;content5;green"></span>
|}
<div class="content1">ONE</div>
<div class="content2">TWO</div>
<div class="content3">THREE</div>
<div class="content4">FOUR</div>
<div class="content5">FIVE</div>
Step 8 (cosmetic)
- The entire table/content relationship is now functionally completed, and will work just as expected to. The only real remaining issue to be solved is ease of use and accessibility to the common reader. To make the table attractive there are a wide range of aesthetic improvements an editor can make, especially with styles, so we'll leave that up to personal taste and just explain a select few of the most necessary visual adjustments.
- On top of the title cell, to the left of the very first parallel separator, you can define the visual characteristics of the entire table. In this region, type width=100%, in order to make the table take up the entire horizontal space of a page. Next to this, you'll want to add a border="a number", where you can define the width of the border around your entire table. Generally, 20px is a good starting point for a table's outer border width, though you can exercise personal discretion with this characteristic as you please.
- Something else that makes the table look nice is evenly spaced cells. Because we chose five content panes, and thus five cells across, we made it exceedingly easy to create even cell widths, all the way across. By simply adding a width=20% parameter to each of the cells in the second row, we can define the behavior of all the rows beneath it without having to type any more code into those rows. Observe:
{|width=100% border=20px
|colspan=5 align=center|NUMBERS
|-
|align=center width=20%|FIRST
|align=center width=20%|SECOND
|align=center width=20%|THIRD
|align=center width=20%|FOURTH
|align=center width=20%|FIFTH
|-
|align=center|<span class="co;[-];[+];0;content1;green"></span>
|align=center|<span class="co;[-];[+];0;content2;green"></span>
|align=center|<span class="co;[-];[+];0;content3;green"></span>
|align=center|<span class="co;[-];[+];0;content4;green"></span>
|align=center|<span class="co;[-];[+];0;content5;green"></span>
|}
<div class="content1">ONE</div>
<div class="content2">TWO</div>
<div class="content3">THREE</div>
<div class="content4">FOUR</div>
<div class="content5">FIVE</div>
Step 9 (optional touches)
- The final (and completely optional) step in creating the Collapsing Table, is the use of a border around each content region in order to visually tie it to the main table. This can be achieved by adding a completely separate <div style=""> inside of each <div class=""> that's already been defined above. It should appear like this for each of the content zones: <div style="border:1px solid #CCCCCC; padding:8px">. DON'T FORGET TO CLOSE WITH THE SECOND </div> TAG OR YOU'LL FACE SERIOUS FORMATTING ISSUES:
{|width=100% border=20px
|colspan=5 align=center|NUMBERS
|-
|align=center width=20%|FIRST
|align=center width=20%|SECOND
|align=center width=20%|THIRD
|align=center width=20%|FOURTH
|align=center width=20%|FIFTH
|-
|align=center|<span class="co;[-];[+];0;content1;green"></span>
|align=center|<span class="co;[-];[+];0;content2;green"></span>
|align=center|<span class="co;[-];[+];0;content3;green"></span>
|align=center|<span class="co;[-];[+];0;content4;green"></span>
|align=center|<span class="co;[-];[+];0;content5;green"></span>
|}
<div class="content1"><div style="border:1px solid #CCCCCC; padding:8px">ONE</div></div>
<div class="content2"><div style="border:1px solid #CCCCCC; padding:8px">TWO</div></div>
<div class="content3"><div style="border:1px solid #CCCCCC; padding:8px">THREE</div></div>
<div class="content4"><div style="border:1px solid #CCCCCC; padding:8px">FOUR</div></div>
<div class="content5"><div style="border:1px solid #CCCCCC; padding:8px">FIVE</div></div>
THE OUTPUT
And that's it! Such a simple solution to article overcrowding. The final result of all of the above formatting is shown below. Click the links to reveal the content.
| NUMBERS | ||||
| FIRST | SECOND | THIRD | FOURTH | FIFTH |