HTML Merge Cells Form

Ich habe die folgende Struktur, die ich als HTML-Tabelle erstellen sollte. Am Anfang scheint es einfach für mich, aber als ich versucht habe, es zu bauen, brauchte ich viel Zeit ohne zufriedenstellendes Ergebnis. Bitte sehen Sie sich das Bild unten an, um den Typ der Tabelle zu sehen, die ich erstellen möchte.HTML Merge Cells Form

Ich habe zu schaffen versucht, so aber kein Glück folgt.

<table> 
 
    <caption>Browsers by Visitors</caption> 
 
    <thead> 
 
    <tr> 
 
     <th rowspan="3">Head One</th> 
 
     <th colspan="3" rowspan="2">Head Two</th> 
 
     <th colspan="3">Head Three</th> 
 
     <th rowspan="3">Head Four</th> 
 
     <th rowspan="3">Head Five</th> 
 
    </tr> 
 
    <tr> 
 
     <th>Sub1</th> 
 
     <th>Sub2</th> 
 
     <th>Sub3</th> 
 
    </tr> 
 
    <tr> 
 
     <th>Sub1</th> 
 
     <th>Sub2</th> 
 
     <th>Sub3</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>AAA</td> 
 
     <td>BBB</td> 
 
     <td>CCC</td> 
 
     <td>DDD</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
    </tr> 
 
    <tr> 
 
     <td>a</td> 
 
     <td>b</td> 
 
     <td>c</td> 
 
     <td>d</td> 
 
    </tr> 
 
    <tr> 
 
     <td>12</td> 
 
     <td>23</td> 
 
     <td>34</td> 
 
     <td>34</td> 
 
    </tr> 
 
    <tbody> 
 
</table>

Der obige Code funktioniert nicht. Bitte hier jemand helfen ...

Quelle

2016-08-04 MR.Internet

Die Daten in dem von Ihnen angezeigten Bild unterscheiden sich von dem, was Sie codiert haben. Können Sie ein anderes Bild erstellen, das die gleichen Daten wie das in Ihrem HTML hat, um die Dinge einfacher zu machen? –

Okay, hier geht es:

table, th, td { 
 
    border: 1px solid black; 
 
    border-collapse: collapse; 
 
} 
 

 
th, td { 
 
    padding: 5px; 
 
    text-align: center; 
 
}

<table style="width:100%"> 
 
    <tr> 
 
     <th rowspan="2">Head One</th> 
 
     <th colspan="3">Head Two</th> 
 
     <th colspan="3">Head Three</th> 
 
     <th rowspan="2">Head Four</th> 
 
     <th rowspan="2">Head Five</th> 
 
    </tr> 
 

 
    <tr> 
 
     <td>Sub1</td> 
 
     <td>Sub2</td> 
 
     <td>Sub3</td> 
 
     <td>Sub1</td> 
 
     <td>Sub2</td> 
 
     <td>Sub3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>AAA</td> 
 
     <td>1</td> 
 
     <td>a</td> 
 
     <td>12</td> 
 
     <td>s</td> 
 
     <td>s</td> 
 
     <td>sd</td> 
 
     <td>aaa</td> 
 
     <td>asd</td>  
 
    </tr> 
 
    <tr> 
 
     <td>BBB</td> 
 
     <td>2</td> 
 
     <td>b</td> 
 
     <td>23</td> 
 
     <td>sd</td> 
 
     <td>sd</td> 
 
     <td>sd</td> 
 
     <td>asdasd</td> 
 
     <td>asdasd</td>  
 
    </tr> 
 
    <tr> 
 
     <td>CCC</td> 
 
     <td>3</td> 
 
     <td>c</td> 
 
     <td>34</td> 
 
     <td>sd</td> 
 
     <td>sd</td> 
 
     <td>sd</td> 
 
     <td>asdas</td> 
 
     <td>dsafsd</td>  
 
    </tr> 
 
    <tr> 
 
     <td>DDD</td> 
 
     <td>4</td> 
 
     <td>d</td> 
 
     <td>34</td> 
 
     <td>sd</td> 
 
     <td>sd</td> 
 
     <td>s</td> 
 
     <td>asdasd</td> 
 
     <td>asddasdf</td>  
 
    </tr> 
 
    <tr> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td>  
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td>  
 
    </tr> 
 
</table>

Do zu versuchen, mehr zu lesen auf colspan, rowspan, th, tr, td, table Grenzen kollabierte here. Ich entfernte die thead und tbody in Ihrem Code.

Quelle

2016-08-04 03:32:18

HTML Merge Cells Form

Antwort

Verwandte Themen