Tabela html tr wewnątrz td

99

Próbuję utworzyć tabelę w HTML. Mam do wykonania następujący projekt. Dodałem <tr>wnętrze, <td>ale jakoś tabela nie jest utworzona zgodnie z projektem.

wprowadź opis obrazu tutaj

Czy ktoś może mi podpowiedzieć, jak mogę to osiągnąć?

Nie mogę utworzyć Name1 | Price1 sekcje.

html html-table Skorpion
źródło

Odpowiedzi:

165

Musisz dodać pełną tabelę w td 

    <table>
      <tr>
        <td>
          <table>
            <tr>
              <td>
                ...
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
Rozwiń fragment

herrhansen
źródło
1
Czy można dodać pełną tabelę do td ?? Nigdy tego nie zrobiłem, dlatego o to pytam. Jeśli to jest naprawdę świetne
Scorpion
2
możesz umieścić prawie wszystko w td, tylko html, myślę, że ciało i głowa nie są dozwolone
herrhansen
1
Tak, właśnie tego się bałem.
Poszukałem
Na razie nie wyświetla żadnego błędu, gdy wstawiam tr s do td, w rzeczywistości umieściłem wiele tr w niektórych td s, ponieważ moja aplikacja renderuje tablice obiektów w ramach niektórych właściwości i działa we wszystkich przeglądarkach, (nie wiem o IE, bo nie testowałem tego w IE), każdy zainteresowany może to sprawdzić - stackblitz.com/edit/angular-u7aman , Uwaga: jest to aplikacja Angular, nie jestem pewien, czy za tym stoi Angular zachowanie.
Hasintha Abeykoon
Mimo że nie powoduje to błędu w przeglądarce, jest fałszywe i może powodować błędy w innych przeglądarkach lub w innych okolicznościach. Należy zawsze próbować używać elementów HTML zgodnie z ich przeznaczeniem, na przykład nie używać elementów blokowych w elementach inline
herrhansen
40

Nie możesz umieścić tr wewnątrz td. Możesz zobaczyć dozwoloną zawartość w dokumentacji MDN na temat td. Odpowiednie informacje znajdują się w sekcji dozwolonych treści .

Innym sposobem osiągnięcia tego jest użycie colspani rowspan. Sprawdź to skrzypce .

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>

I trochę CSS:

table {
    border-collapse: collapse       
}

td {
   border: 1px solid #000000
}
lavavrik
źródło
11
umieszczenie tabeli wewnątrz tabeli jest całkowicie poprawne, napisz prosty kod HTML, w którym wstawiasz tabelę do TD i wklejasz ją do walidatora w3: validator.w3.org/check Zauważysz, że przeszedł. wszystkie błędy są związane z brakującymi tagami doctype i head.
Malloc
umieszczenie elementu tabeli wewnątrz tr w nieważne podczas umieszczania tabeli wewnątrz td jest poprawne .. możesz sprawdzić poprawność na validator.w3.org/check
Lucky
3
Myślę, że zamierzonym znaczeniem było tutaj to, że tabela wewnątrz tabeli jest dziwnym podejściem do scenariusza, ponieważ colspan& rowspansą przeznaczone do rozwiązania tego problemu.
connorbode
6
Nie jestem pewien, dlaczego to rozwiązanie zbiera tak wiele pozytywnych opinii Wysłany kod jest całkowicie nieprzejrzysty bez przeglądarki, osiągając wizualny cel kosztem logicznej relacji, którą ma reprezentować tabela. Jak zauważył @Malloc, jego pierwsze zdanie jest ewidentnie fałszywe.
brianpck
20

Możesz rozwiązać problem bez zagnieżdżania tabel.

<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>
Rozwiń fragment

WalterV
źródło
6

Wypróbuj ten kod

<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
źródło
4

Umieść kolejną tabelę wewnątrz elementu td w ten sposób .

<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
źródło
4

Po prostu dodaj nowy tablew tdżądanym. Przykład: 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
źródło
4

Pełny przykład: 

<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
źródło
2

Możesz to sprawdzić, po prostu użyj tabeli wewnątrz tabeli w ten sposób

<!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.
źródło
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
źródło