HTML Table Column after Column

Question

Is it possible to write the first column in a table in HTML and then the next column? If you write it like this:

<table>
      <tr>
        <th>Test1</th>
        <th>Test2</th>
        <th>Test3</th>
      </tr>
      <tr>
        <td>Test4</td>
        <td>Test5</td>
        <td>Test6</td>
      </tr>
      <tr>
        <td>Test7</td>
        <td>Test8</td>
        <td>Test9</td>
      </tr>
    </table>

You just write the first row and then the second row. But I want to write the first column first. Is this possible?

Edit: I have 5 Arrays with different sizes. They all include Strings.

Array1[2]: "Thomas", "Jon"

Array2[3]: "Bob", "Karl", "Jake"

Array3[4]: "Stephan", "Barack", "Steve", "Nicole"

Array3[1]: "Robert"

Array5[4]: "Carla", "Carlos", "Niggel", "Cedric"

The Header of the Tables should include the workdays. At the end I will have a Table with 5 Rows and some columns. To create this table I need to write the first Columne with a Loop for the 1. Array. Then a second Column for the second Array and so on. Right? Do you have another idea how to write this table? I hope you understand my problem.

Check http://stackoverflow.com/questions/16802510/display-only-certain-columns-in-a-table — MusicLovingIndianGirl, Oct 29 '15 at 07:19
This is how you structure a `` element. Why do you want to write columns first.? If it's for styling, there are other ways to do it — T J, Oct 29 '15 at 07:19
it's unclear what you want to ask. This is normal and expected behavior. You nest columns inside rows, what's the problem? — Kristijan Iliev, Oct 29 '15 at 07:21
Can you please provide proper array with data. It's easier to fix your problem! — Deepak Biswal, Oct 29 '15 at 07:46
They all have less then 10 String in them. But Array1 could have 4 Strings and Array2 could have 8 Strings. — semaxx, Oct 29 '15 at 07:47
var array1 = ['R1C1', 'R2C1', 'R3C1']; var array2 = ['R1C2', 'R2C2', 'R3C2']; var array3 = ['R1C3', 'R2C3', 'R3C3']; var array4 = ['R1C4', 'R2C4', 'R3C4']; — Deepak Biswal, Oct 29 '15 at 07:50

score 0 · Answer 1 · answered Oct 29 '15 at 07:22

Render the table by rows and then use javascript to invert the table. Here is a jsfiddle

$("a").click(function () {
$("table").each(function () {
    var $this = $(this);
    var newrows = [];
    $this.find("tr").each(function () {
        var i = 0;
        $(this).find("td,th").each(function () {
            i++;
            if (newrows[i] === undefined) {
                newrows[i] = $("<tr></tr>");
            }
            newrows[i].append($(this));
        });
    });
    $this.find("tr").remove();
    $.each(newrows, function () {
        $this.append(this);
    });
});

return false;
});

score 0 · Answer 2 · answered Oct 29 '15 at 07:31

0

That is not how the HTML standard is. You make your table, then you make a row, and then your columns. There is some additional stuff for headers, bodies, etc. But the standard (and only supported method) is by row and not by column.

NOTE: Anyways if you have any specific reason to do like that then please explain your scenario and we will help you to make this working in a correct approach.

answered Oct 29 '15 at 07:31

Deepak Biswal

4,280
2
20
37

Hey :) I tried to descripe my Problem. I hope you understand it :) – semaxx Oct 29 '15 at 07:41
Yes but that you can do by row and then column. Is there any issue doing that or any specific reason to do that in reverse order. – Deepak Biswal Oct 29 '15 at 07:44
OK, that will help us. – Deepak Biswal Oct 29 '15 at 07:45
I probably don't have the knowledge to do this row by row. With column by column you just need to create 1 Loop. – semaxx Oct 29 '15 at 07:53

HTML Table Column after Column

2 Answers2