Rss

Create equal spaced columns/cells in a table by only altering margins

This is a hard thing to write a title for, and a hard problem to explain. I had a situation where I wanted to put some space between columns in a table, but I couldn’t alter the left margin of the left most column, or the right margin of the right most column, as that would stuff up some alignment. In addition, I wanted to have the exact same amount of margin taken away from each column, as to not stuff up the sizing. See the following illustration to help visualise the problem… numbers in the illustration are to follow with the example I give.

illustration_1

So, how is this done?

Firstly, let’s imagine we had 5 columns. That means that there are 4 gaps (one between the 1st and 2nd, 2nd and 3rd, 3rd and 4th, and 4th and 5th.) We need to times the gap we want in each space by the number of spaces.

a = gap we want (let’s say 10)
b = number of cells (lets say 5)
c = number of gaps = b-1 (in this example, 4)
d = total space in gaps = a * c (in this example, 40)

We know that we need a total of d (in this example, 40 pixels) to be removed from all the cells all in all. In addition, we want to make sure that each cell has the same amount removed. Thus, we divide the total amount of space by the total number of cells

e = d/b (in this example, 40/5 = 8)

So we want to make the left and right margins of each cell total the value of e – that is, we want to subtract exactly e from each cell.

For the left most cell (cell 0), we can’t alter the left margin, so we have no choice but to add e in it’s entirety to the right margin of the left most cell. For the second cell (cell 1), we want the gap to total a. So therefore, we need to make the left margin of cell 1 equal to a minus the right margin of cell 0. In this case, it will equal 2. When we get to the right margin of cell 1, we want to make it such that the total margins of the cell equals e, so we work out the right margin to be e minus the left margin of cell 0.

If we proceed with this pattern, we’ll keep removing exactly e from each cell. When we get to the final cell, it will be at a stage such that you will only need to add e to the left margin (and not to the right margin,) and, if done correctly, all the spaces will be of equal size.

illustration_2

A nice recursive python script can work this out for you:

#remember, first cell is cell 0, and last cell is total-1.
# for example, if there were 5 cells, first one would be 0, last one would be 4.
def leftMargin(item, total, gap):
if (item == 0):
return 0.0
return gap - rightMargin(item - 1, total, gap)

def rightMargin(item, total, gap):
if (item == 0):
return (gap * (total - 1.0)) / total
if (item == total-1):
return 0.0
return ((gap * (total - 1.0)) / total) - rightMargin (item - 1, total, gap)

# here is some dummy data.
# how many cells do we have??
total = 5.0

# how many units is the gap supposed to be?
gap = 10

for i in range(0, int(total)):
print str(i) + ": " + str(leftMargin(i, total, gap)) + " " + str(rightMargin(i, total, gap))

 

Comment (1)

  1. thanx for the code..
    I will try this on my system.

Leave a Reply

Your email address will not be published. Required fields are marked *