HTML-Tabelle tr in td

97

Ich versuche eine Tabelle in HTML zu erstellen. Ich muss das folgende Design erstellen. Ich hatte eine <tr>Innenseite hinzugefügt, <td>aber irgendwie ist die Tabelle nicht gemäß dem Design erstellt.

Geben Sie hier die Bildbeschreibung ein

Kann mir jemand vorschlagen, wie ich das erreichen kann?

Ich kann Name1 | nicht erstellen Preis1 Abschnitte.

html html-table Skorpion
quelle

Antworten:

162

Sie müssen eine vollständige Tabelle innerhalb des td hinzufügen 

    <table>
      <tr>
        <td>
          <table>
            <tr>
              <td>
                ...
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
Erweitern Sie das Snippet

herrhansen
quelle
1
Ist es möglich, eine vollständige Tabelle in einem td hinzuzufügen? Das habe ich nie gemacht, deshalb frage ich das. Wenn es dann wirklich großartig ist
Scorpion
2
Sie können fast alles in ein td setzen, nur HTML, Körper und Kopf sind nicht erlaubt, denke ich
Herrhansen
1
Ja, genau davor hatte ich Angst. Ich schaute auf Google in der Hoffnung auf, dass es einen anderen Ausweg gibt
Giacomo Tecya Pigani
Ab sofort gibt es keinen Fehler mehr, wenn ich tr s in td setze. Tatsächlich habe ich viele tr s in einige td s eingefügt, weil meine App Arrays von Objekten in einigen Eigenschaften rendert und in allen Browsern funktioniert. (Ich weiß nichts über IE, da ich es nicht in IE getestet habe), jeder Interessierte kann es überprüfen - stackblitz.com/edit/angular-u7aman , Hinweis: Es ist eine Angular-App, nicht sicher, ob Angular dahinter steckt Verhalten.
Hasintha Abeykoon
Auch wenn es nicht einen Fehler in Ihrem Browser wirft ist es falsch, und Fehler in anderen Browsern oder Umstände werfen können , sollten Sie immer versuchen , verwenden , um HTML-Elemente in ihrer beabsichtigten Verwendung, wie nicht - Block-Elemente innerhalb der Inline-Elemente unter Verwendung
Herrhansen
39

Sie können tr nicht in td einfügen. Sie können den zulässigen Inhalt in der Dokumentation zu MDN-Webdokumenten anzeigentd . Die relevanten Informationen finden Sie im zulässigen Inhaltsbereich .

Eine andere Möglichkeit, dies zu erreichen, ist die Verwendung von colspanund rowspan. Überprüfen Sie diese Geige .

HTML:

<table width="100%">
 <tr>
  <td>Name 1</td>
  <td>Name 2</td>
  <td colspan="2">Name 3</td>
  <td>Name 4</td>
 </tr>

 <tr>
  <td rowspan="3">ITEM 1</td>
  <td rowspan="3">ITEM 2</td>
  <td>name1</td>
  <td>price1</td>
  <td rowspan="3">ITEM 4</td>
 </tr>

 <tr>
  <td>name2</td>
  <td>price2</td>
 </tr>
 <tr>
  <td>name3</td>
  <td>price3/td>
 </tr>
</table>

Und etwas CSS:

table {
    border-collapse: collapse       
}

td {
   border: 1px solid #000000
}
lavavrik
quelle
11
Das Einfügen einer Tabelle in eine Tabelle ist absolut gültig. Schreiben Sie einen einfachen HTML-Code, in den Sie eine Tabelle in den TD einfügen und in den w3-Validator einfügen: validator.w3.org/check Sie werden feststellen, dass sie übergeben wird. Alle Fehler beziehen sich auf den Tag "doctype" und "head".
Malloc
ein Tabellenelement innerhalb tr in ungültig setzen , während eine Tabelle in einem td setzen ist valid..you auf validieren validator.w3.org/check
Glück
3
Ich denke, die beabsichtigte Bedeutung hier war, dass eine Tabelle innerhalb einer Tabelle ein seltsamer Ansatz für das Szenario ist, da colspan& rowspanzur Lösung dieses Problems gedacht sind.
Connorbode
6
Ich bin mir nicht sicher, warum diese Lösung so viele positive Stimmen erhält. Der veröffentlichte Code ist ohne Browser völlig undurchsichtig und erreicht ein visuelles Ziel auf Kosten der logischen Beziehung, die eine Tabelle darstellen soll. Und wie von @Malloc bemerkt, ist sein erster Satz offensichtlich falsch.
Brianpck
20

Sie können lösen, ohne Tabellen zu verschachteln.

<table border="1">
    <thead>
        <tr>
            <th>ABC</th>
            <th>ABC</th>
            <th colspan="2">ABC</th>
            <th>ABC</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="4">Item1</td>
            <td rowspan="4">Item1</td>
            <td colspan="2">Item1</td>
            <td rowspan="4">Item1</td>
        </tr>
        <tr>
            <td>Name1</td>
            <td>Price1</td>
        </tr>
        <tr>
            <td>Name2</td>
            <td>Price2</td>
        </tr>
        <tr>
            <td>Name3</td>
            <td>Price3</td>
        </tr>
        <tr>
            <td>Item2</td>
            <td>Item2</td>
            <td colspan="2">Item2</td>
            <td>Item2</td>
        </tr>
    </tbody>
</table>
Erweitern Sie das Snippet

WalterV
quelle
6

Versuchen Sie diesen Code

<table border="1" width="100%">
<tr>
    <td>Name 1</td>
    <td>Name 2</td>
    <td colspan="2">Name 3</td>
    <td>Name 4</td>
</tr>

<tr>
    <td rowspan="3">ITEM 1</td>
    <td rowspan="3">ITEM 2</td>
    <td>name</td>
    <td>price</td>
    <td rowspan="3">ITEM 4</td>
</tr>
<tr>
    <td>name</td>
    <td>price</td>
</tr>
<tr>
    <td>name</td>
    <td>price</td>
</tr>
</table>
Kedar1442
quelle
4

Setzen Sie eine andere Tabelle in dem td - Elemente wie diese .

<table>
    <tr>
        ...
    </tr>
    <tr>
        <td>ABC</td>
        <td>ABC</td>
        <td>
            <table>
                <tr>
                    <td>name1</td>
                    <td>price1</td>
                </tr>
...
            </table>
        </td>
        <td>ABC</td>
    </tr>
...
</table>
Patrick
quelle
4

Fügen Sie einfach eine neue tablein die tdgewünschte. Beispiel: http://jsfiddle.net/AbE3Q/

<table border="1">
    <tr>
        <td>ABC</td>
        <td>ABC</td>
        <td>ABC</td>
        <td>ABC</td>
    </tr>
    <tr>
        <td>Item1</td>
        <td>Item2</td>
        <td><table border="1">
            <tr><td>qweqwewe</td><td>qweqwewe</td></tr>
            <tr><td>qweqwewe</td><td>qweqwewe</td></tr>
            <tr><td>qweqwewe</td><td>qweqwewe</td></tr>
            </table></td>
        <td>Item3</td>
    </tr>
    <tr>
    </tr>
    <tr>
    </tr>
    <tr>
    </tr>
    <tr>
    </tr>  
</table>
João C.
quelle
4

Vollständiges Beispiel: 

<table border="1" style="width:100%;">
  <tr>
    <td>ABC</td>
    <td>ABC</td>
    <td>ABC</td>
    <td>ABC</td>
  </tr>
  <tr>
    <td>Item 1</td>
    <td>Item 1</td>
    <td>
      <table border="1" style="width: 100%;">
        <tr>
          <td>Name 1</td>
          <td>Price 1</td>
        </tr>
        <tr>
          <td>Name 2</td>
          <td>Price 2</td>
        </tr>
        <tr>
          <td>Name 3</td>
          <td>Price 3</td>
        </tr>
      </table>
    </td>
    <td>Item 1</td>
  </tr>
  <tr>
    <td>Item 2</td>
    <td>Item 2</td>
    <td>Item 2</td>
    <td>Item 2</td>
  </tr>
  <tr>
    <td>Item 3</td>
    <td>Item 3</td>
    <td>Item 3</td>
    <td>Item 3</td>
  </tr>
</table>
Jagu
quelle
2

Sie können dies überprüfen, indem Sie einfach Tabelle in Tabelle wie folgt verwenden

<!DOCTYPE html>
<html>
  <head>
    <style>
      table, th, td {
      border: 1px solid black;
      border-collapse: collapse;
      }
    </style>
  </head>
  <body>
    <table style="width:100%">
      <tr>
        <th>ABC</th>
        <th>ABC</th>
        <th>ABC</th>
        <th>ABC</th>
      </tr>
      <tr>
        <td>Item1</td>
        <td>Item1</td>
        <td>
          <table style="width:100%">
            <tr>
              <td>name1</td>
              <td>price1</td>
            </tr>
            <tr>
              <td>name2</td>
              <td>price2</td>
            </tr>
            <tr>
              <td>name3</td>
              <td>price3</td>
            </tr>
          </table>
        </td>
        <td>item1</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
      </tr>
      <tr>
        <td>E</td>
        <td>F</td>
        <td>G</td>
        <td>H</td>
      </tr>
      <tr>
        <td>E</td>
        <td>R</td>
        <td>T</td>
        <td>T</td>
      </tr>
    </table>
  </body>
</html>
Arman H.
quelle
0 
<table border="1px;" width="100%" >
        <tr align="center">
            <td>Product</td>
            <td>quantity</td>
            <td>Price</td>
            <td>Totall</td>
        </tr>
        <tr align="center">
            <td>Item-1</td>
            <td>Item-1</td>
            <td>
                <table border="1px;" width="100%">
                    <tr align="center">
                        <td>Name1</td>
                        <td>Price1</td>
                    </tr>
                    <tr align="center">
                        <td>Name2</td>
                        <td>Price2</td>
                    </tr>
                    <tr align="center">
                        <td>Name3</td>
                        <td>Price3</td>
                    </tr>
                    <tr>
                        <td>Name4</td>
                        <td>Price4</td>
                    </tr>
                </table>
            </td>
            <td>Item-1</td>
        </tr>
        <tr align="center">
            <td>Item-2</td>
            <td>Item-2</td>
            <td>Item-2</td>
            <td>Item-2</td>
        </tr>
        <tr align="center">
            <td>Item-3</td>
            <td>Item-3</td>
            <td>Item-3</td>
            <td>Item-3</td>
        </tr>
    </table>
Azizul Hakim
quelle