HTML Layout - verschachtelte Zeilen und Spalten

dem obigen Bild nach, mein Verständnis mit, habe ich diesen Code

<table> 
    <tr> 
     <td style="width:30%";> 
      <tr>A</tr> 
      <tr> 
       <td style="width:33%;">B</td> 
       <td style="width:33%;">C</td> 
       <td rowspan="2" style="width:33%;">D</td> 
      </tr> 
      <tr><td colspan="2">E</td></tr> 
     </td> 
     <td style="width:70%";> 
      <tr>Lorem Ipsum ... <img src="pic.jpg"></tr> 
      <tr><img src="pic.jpg">Lorem Ipsum ... </tr> 
     </td> 
    </tr> 
</table>

Allerdings, wenn ich nicht zählen die ‚tr-Tag‘ unter dem Namen ' Td-Tag '30% oder 70%, das Layout der Box wird da sein, aber sobald ich in den' tr-Tag 'hinzufügen, gehen Sie einfach drunter und drüber. Gibt es eine andere Möglichkeit, das Layout wie im angehängten Bild zu erstellen?

Quelle

2017-12-27 LSY.E

Etwas mit diesem Tisch falsch aussieht. Es hat eine falsche Tag-Struktur, Sie können etwas wie folgt verwenden: http://divtable.com/generator/, um korrekte Tabellenlayouts zu generieren, um zu sehen, ob Sie die benötigten Tabellen verschachteln können. Lassen Sie mich wissen, wenn Sie Hilfe beim Erstellen des Layouts benötigen. – adelriosantiago

Der korrekte Weg besteht darin, CSS mit normalen HTML-Elementen zu verwenden. Haben Sie aus irgendeinem Grund einen Tisch benutzt? Außerdem können Sie kein 'tr' unter 'td' setzen, das ist eine Zeile innerhalb einer Spalte - die Zeile muss zuerst in ein neues Tabellenelement gehen. –

die Grundstruktur ist

<html> 
<head> 
    <title>table layout</title> 
    <style type="text/css"> 
     table { 
      border-collapse: collapse; 
     } 

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

     } 
    </style> 
</head> 
<body> 
    <table style="width: 100%"> 
     <tr> 
      <td style="width: 30%"> 
       <table style="width: 100%;height: 400px;"> 
        <tr><td colspan="3">A</td></tr> 
        <tr> 
         <td style="width:33%;">B</td> 
         <td style="width:33%;">C</td> 
         <td rowspan="2" style="width:33%;">D</td> 
        </tr> 
        <tr><td colspan="2">E</td></tr> 
       </table> 
      </td> 
      <td style="width: 70%"> 
       <table style="width: 100%;height: 400px"> 
        <tr><td><p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum ... </p><img src="banner-test.jpg" style="width: 200px;float: right"></td></tr> 
        <tr><td><img src="banner-test.jpg" style="width: 200px" >Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum ... </td></tr> 
       </table> 
      </td> 
     </tr> 

    </table> 
</body>

Quelle

2017-12-27 08:03:12 Chandraveer

Danke, aber für die Bildseite, wie mache ich die Texte so um die Bilder, dass sie wie das Bild aussehen, das ich in der Frage gepostet habe? –

HTML Layout - verschachtelte Zeilen und Spalten

Antwort

Verwandte Themen