2017-01-24 2 views
-4

Ich habe eine Tabelle, mit der ich mich nicht herumschlagen kann, da ich mit der Zeile und den Kolumnen nicht vertraut bin. Ich habe versucht, auf http://www.w3schools.com/html/html_tables.asp suchen, aber ein sehr einfaches Beispiel istUmgang mit komplexen Zeilen- und Spaltenüberschriften

gegeben

enter image description here

Könnten Sie mir bitte sagen, wie zu Tabellenüberschriften zu entwerfen und wie die Daten in sie einzufügen.

Dank
+0

Ich würde empfehlen, in Bootstrap suchen, aber dies ist nicht der Ort, um Ressourcen zu fragen sein, leider. –

Antwort

1

<table border="1"><!-initialize the table--> 
 

 
<!--make the outer talbe--> 
 
<!--tr means table row--> 
 
<tr><!-- 1st row--> 
 
    <!-- colspan 5 means the total column on your table--> 
 
    <th colspan="5" >Inner Table</th> 
 
</tr> 
 

 
<tr><!-- 2nd row-->  
 
    <!--th means table header--> 
 
    <th colspan="2">Conner</th><!--span the table header cell for 2 column--> 
 
    <th rowspan="2">Header2 </th><!--span the table header cell for 2 rows--> 
 
    <th colspan="2"> Header3</th><!--span the table header cell for 2 column--> 
 
</tr> 
 

 
<tr><!-- 3rd row--> 
 
    <th>Header4</th><!--header 4--> 
 
    <th>Header5</th><!--header 5--> 
 
    <th>Header6</th><!--header 6 : this because we already span our header 2 cell for 2 rows--> 
 
    <th>______</th><!--empty cell--> 
 
</tr> 
 

 
<tr> <!-- 4th row--> 
 
    <th>Header7</th><!--header 7--> 
 
    <!-- td means table data--> 
 
    <td rowspan="2">two tall</td><!-- data on 2nd column : span data cell for 4th and 5th rows--> 
 
    <td>List can be table data</td><!-- add data into (3+4) column : 4th row--> 
 
    <td colspan="2">two wide</td><!-- add data into (5+6) columns : 4th row --> 
 
</tr> 
 

 
<tr> <!-- 5th row--> 
 
    <td>Html icon</td><!-- add data into 1st column 5th row--> 
 
    <td>a url in a table</td><!-- add data into (3+4) column 5th row--> 
 
    <td>item1</td><!-- add data into 5th column 5th row--> 
 
    <td>item2</td><!-- add data into 6th column 5th row--> 
 
</tr> 
 
    
 

 
</table>

, um weitere Informationen über Zellen und Reihen http://www.corelangs.com/html/tables/tables.html

Verwandte Themen