Jak tworzyć tabele z danych kolumn zamiast danych wierszy w HTML?

Question

Zgodnie z tym artykułem w W3 Schools można utworzyć podstawowy tabeli w HTML tak:

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

Z powyższego wynika, że ​​jeden wprowadza dane według wierszy.

Mam sytuację, w której muszę wprowadzić wszystkie dane według kolumn. Czy coś takiego jest możliwe?

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

Answer 1

Nie, to nie jest możliwe w HTML.

Answer 2

Jesteś Najprościej jest, aby uczynić tabelę wierszy, a następnie za pomocą JavaScript, aby odwrócić stół

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

Poniższy kod odwróci stolik (ten przykładowy kod wykorzystuje 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:

Oto wersja, która współpracuje z elementów th także: http://jsfiddle.net/zwdLj/

Answer 3

Można uczynić tabel w kolumnach za pomocą tabelę w tabeli ...

<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

byłem w tej samej sytuacji, w której muszę dodać dane przez kolumnę. Ale ten problem jest rozwiązany prostą metodą. Użyłem gałązki w tym przykładzie, ale dostaniesz ją łatwo.

<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> 

Uwaga: {{są to dane do wydruku}}

Answer 5

Podobnie uczynił to za pomocą pęczek SGN wypełnionych Lis, wydawał dużo czystsze niż cokolwiek udało mi się znaleźć. Będziesz musiał zrobić coś takiego, jak dodanie klasy do wszystkich uls i ustawienie jej stylu do wyświetlenia: tabela inline.

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

a niektóre stylizacji

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