<col> custom element problem

[dudeonthehorse]

Hello

What I did:

1. Removed Inky.prototype.makeColumn from inky.js
2. Declared col and column elements in inky.js

this.components = extend({
      col: 'col',
      column: 'column'
  }, options.components || {});

3. Added components to componentFactory.js

// <col>
case this.components.col:

    var classes = ['col'];
    return format('<div %s class="%s"><table width="100%"><tr><td class="cell">%s</td></tr></table></div>', attrs, classes.join(' '), inner);

// <column>
case this.components.column:

    var classes = ['column'];
    if (element.attr('class')) {
        classes = classes.concat(element.attr('class').split(' '));
    }

    return format('<div %s class="%s"><table width="100%"><tr><td class="cell">%s</td></tr></table></div>', attrs, classes.join(' '), inner);

4. input.html

<col>
    <p>Hello, world!</p>
</col>

<column>
    <p>Hello, world!</p>
</column>

5. output.html

<!-- Shitty element -->
<div class="col">
    <table width="100%">
        <tbody><tr>
            <td class="cell"></td>
        </tr>
    </tbody></table>
</div>
<p>Hello, world!</p>

<!-- Sexy element -->
<div class="column">
    <table width="100%">
        <tbody><tr>
            <td class="cell">
                <p>Hello, world!</p>
            </td>
        </tr>
    </tbody></table>
</div>

How can I fix this problem?