Come creare tabelle da dati di colonna invece di dati di riga in HTML?

Question

Secondo questo articolo a W3 Schools, si può creare una tabella di base in HTML come questo:

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

Da sopra, è evidente che si entra i dati per righe.

Ho una situazione in cui ho bisogno di inserire tutti i dati per colonne. È possibile qualcosa del genere?

<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

No, questo non è possibile in HTML.

Answer 2

Sei migliore da fare è quella di rendere la tabella per righe, e quindi utilizzare javascript per invertire il tavolo

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

Il seguente codice invertire una tabella (questo codice di esempio utilizza 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:

Ecco una versione che funziona con gli elementi TH così: http://jsfiddle.net/zwdLj/

Answer 3

È possibile rendere le tabelle in colonne utilizzando una tabella all'interno di una tabella ...

<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

ero nella stessa situazione in cui devo aggiungere i dati per colonna. Ma questo problema è risolto con un metodo semplice. Ho usato il ramoscello in questo esempio, ma lo otterrete facilmente.

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

Nota: {{si tratta di dati da stampare}}

Answer 5

appena fatto questo utilizzando un mazzo di ULS pieni di LIS, sembrava molto più pulito di tutto ciò che ho trovato. Dovrai fare qualcosa come aggiungere una classe a tutti gli ul e impostare il suo stile da visualizzare: inline-table.

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

e un po 'lo stile

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