How to create tables from column data instead of row data in HTML?

Answer 1

You can always create a parent element (the table), and then inside the table you can create in-line block elements with limited width to serve as your columns, that way any content you add to those child columns will follow the downward pattern, then to make the grid-like pattern just make sure to set the height of the elements within the column, like so Using the list to display content:

<div id="your_table">
    <span style="width: 25%" id="fist_column"> <ul></ul></span>
    <span style="width: 25%" id="second_column"><ul></ul></span>
    <span style="width: 25%" id="third_column"><ul></ul></span>
    <span style="width: 25%" id="fourth_column"><ul></ul></span>
</div>

Answer 2

You're best bet is to render the table by rows, and then use javascript to invert the table

http://jsfiddle.net/CsgK9/2/

The following code will invert a table (this sample code uses jquery)

    $("table").each(function() {
        var $this = $(this);
        var newrows = [];

        $this.find("tr").each(function(){
            var i = 0;

            $(this).find("td").each(function(){
                i++;
                if(newrows[i] === undefined) { newrows[i] = $(""); }
                newrows[i].append($(this));
            });
        });

        $this.find("tr").remove();
        $.each(newrows, function(){
            $this.append(this);
        });
    });

UPDATE:

Here is a version that works with th elements as well: http://jsfiddle.net/zwdLj/

Answer 3

You can render tables in columns by using a table within a table...

<table>
<tr>
<td>
    <table>
        <thead>
            <tr>
                <td>column 1 header 1</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>column 1 row 1</td>
            </tr>
            <tr>
                <td>column 1 row 2</td>
            </tr>
        </tbody>
    </table>
</td>
<td>
    <table>
        <thead>
            <tr>
                <td>column 2 header 1</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>column 2 row 1</td>
            </tr>
            <tr>
                <td>column 2 row 2</td>
            </tr>
        </tbody>
    </table>
</td>
</tr>
</table>

Answer 4

I was in same situation where I have to add the data by column. But, this problem is solved in a simple method. I have used twig in this example, but you will get it easily.

<table>
<tr>
    <th>id</th>
    <th>title</th>
    <th>ISBN</th>
    <th>author_id</th>
    <th>publisher_id</th>
</tr>

{% for book in books %}   //for loop is used before the <tr> tag
    <tr>
        <td>{{ book.id }}</td>
        <td>{{ book.title }}</td>
        <td>{{ book.isbn }}</td>
        <td>{{ book.publisher.id }}</td>
        <td>{{ book.author.id }}</td>
    {% endfor %}
    </tr>

Note:{{ this is data to print }}

Answer 5

In modern browsers you can achieve this by redefining the TR and TD tags behavior in CSS. Given the HTML in your question attach the next CSS style:

table {
	display: table;
}
table tr {
	display: table-cell;
}
table tr td {
	display: block;
}

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 2, cell 1</td>
    </tr>
    <tr>
        <td>row 1, cell 2</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

Answer 6

Just did this by using a bunch of uls filled with lis, seemed a lot cleaner than anything I could find. You'll have to do something like adding a class to all the uls and setting its style to display: inline-table.

@* pseudo html/razor *@
@foreach(var col in columns){
    <ul class='tableColumn'>
        foreach(var data in col){
            <li>data</li>
        }
    </ul>    
}

and some styling

.tableColumn {
    border: 1px solid;
    display: inline-table;
}