Make lists into tables of 4

by neysor

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

CSS

td {
    width:20px;
}
table {
    margin: 20px;
}
div {
    width 300px;
}

JavaScript

$(function(){
    $("ul").each(function(){
        var oh = "<table><tr>";
        for(i=0;i<this.children.length;i++){
            oh += "<td>"+this.children[i].innerHTML+"</td>";
            if(i%2==1){
                oh+="</tr>";
                if(i%4==3){
                    oh+="</table><table><tr>";
                } else {
                    oh+="<tr>";
                }
            }
        }
        oh += "</tr></table>";
        this.outerHTML = oh;
    });
});