About

Tableize is a jQuery plug-in that preforms formatting on a set of DIV tags so the result is similar to a table, but with fixed cell widths and a dynamic number of columns based on a maximum width.

Download

Download v1.0 plug-in

Examples

Basics

The tableize function is generally called when the page has finished loading, and any time the window is re-sized. The width passed to the function is generally with width of some DIV with a relative width (like a percentage).

function runTableize()
{
  
$("#element").tableize( 1001$("#element").parent() );
}

$
(window)
  .resize( runTableize )
  .load( runTableize );

In this code, the function runTableize is called when the page first loads, and when re-sized. The width of the table is determined from the width of the parent object—that is, whatever element encapsulates the element "element".

Example 1

This is an example of what tableize can do. Try resizing this page so see how the table dynamically adjusts to the width of the page.

We shall overcome because the arc of the moral universe is long, but it bends towards justice.
Darkness cannot drive out darkness, only light can do that. Hate cannot drive out hate, only love can do that.
I believe that unarmed truth and unconditional love will have the final word in reality. This is why right, temporarily defeated, is stronger than evil triumphant.
Make a career of humanity. Commit yourself to the noble struggle for equal rights. You will make a greater person of yourself, a greater nation of your country, and a finer world to live in.
I oppose the war in Vietnam because I love America. I speak out against it not in anger but with anxiety and sorrow in my heart, and above all with a passionate desire to see our beloved country stand as a moral example of the world.
If we are to have peace on earth, our loyalties must become ecumenical rather than sectional. Our loyalties must transcend our race, our tribe, our class, and our nation; and this means we must develop a world perspective.
Injustice anywhere is a threat to justice everywhere. We are caught in an inescapable network of mutuality, tied in a single garment of destiny. Whatever affects one directly, affects all indirectly.
I have the audacity to believe that peoples everywhere can have three meals a day for their bodies, education and culture for their minds, and dignity, equality and freedom for their spirits.
It is not enough to say "We must not wage war." It is necessary to love peace and sacrifice for it. We must concentrate not merely on the negative expulsion of war, but on the positive affirmation of peace.
The ultimate measure of a man is not where he stands in moments of comfort and convenience, but where he stands at times of challenge and controversy.
Every nation must now develop an overriding loyalty to mankind as a whole in order to preserve the best in their individual societies.
We are determined here in Montgomery to work and fight until justice runs "down like water, and righteousness like a mighty stream."
We must come to see that the end we seek is a society at peace with itself, a society that can live with its conscience.
True peace is not merely the absence of tension: it is the presence of justice.

The layout for this table simply has a parent DIV element encompassing several children. Each child has a quote.

<div id="parent">
  <div>
Cell 1</div>
  <div>
Cell 2</div>
  
...
</div>
...
$("#parent").tableize( 100, 1, $("#parent").parent().width() );

Example 2

In this example, the cells have also been vertically centered.

We shall overcome because the arc of the moral universe is long, but it bends towards justice.
Darkness cannot drive out darkness, only light can do that. Hate cannot drive out hate, only love can do that.
I believe that unarmed truth and unconditional love will have the final word in reality. This is why right, temporarily defeated, is stronger than evil triumphant.
Make a career of humanity. Commit yourself to the noble struggle for equal rights. You will make a greater person of yourself, a greater nation of your country, and a finer world to live in.
I oppose the war in Vietnam because I love America. I speak out against it not in anger but with anxiety and sorrow in my heart, and above all with a passionate desire to see our beloved country stand as a moral example of the world.
If we are to have peace on earth, our loyalties must become ecumenical rather than sectional. Our loyalties must transcend our race, our tribe, our class, and our nation; and this means we must develop a world perspective.
Injustice anywhere is a threat to justice everywhere. We are caught in an inescapable network of mutuality, tied in a single garment of destiny. Whatever affects one directly, affects all indirectly.
I have the audacity to believe that peoples everywhere can have three meals a day for their bodies, education and culture for their minds, and dignity, equality and freedom for their spirits.
It is not enough to say "We must not wage war." It is necessary to love peace and sacrifice for it. We must concentrate not merely on the negative expulsion of war, but on the positive affirmation of peace.
The ultimate measure of a man is not where he stands in moments of comfort and convenience, but where he stands at times of challenge and controversy.
Every nation must now develop an overriding loyalty to mankind as a whole in order to preserve the best in their individual societies.
We are determined here in Montgomery to work and fight until justice runs "down like water, and righteousness like a mighty stream."
We must come to see that the end we seek is a society at peace with itself, a society that can live with its conscience.
True peace is not merely the absence of tension: it is the presence of justice.

To do this, two extra DIV tags are needed around the cell data. These two elements are used for the vertical center.

The only addition in the tableize code is the additional true in the function call. This will tell the function to do vertical centering.

<div id="parent">
  <div>
    <div>
      <div>
Cell 1</div>
    </div>
  </div>
  <div>
    <div>
      <div>
Cell 2</div>
    </div>
  </div>
  
...
</div>
...
$("#parent").tableize( 100, 1, $("#parent").parent().width(), true );

Copyright

Tableize is is free, open-source software released (as jQuery) under MIT and the GNU license.

Quotations in examples are those of Martin Luther King, Jr. found on the Martin Luther King, Jr. National Memorial in Washington, DC as I hoped to draw on great examples to make my own.

Author

Tableize was written by Andrew Que