Tr tabel html di dalam td

98

Saya mencoba membuat tabel dalam HTML. Saya memiliki desain berikut untuk dibuat. Saya telah menambahkan <tr>di dalam <td>tetapi entah bagaimana tabel tidak dibuat sesuai desain.

masukkan deskripsi gambar di sini

Adakah yang bisa menyarankan saya bagaimana saya bisa mencapai ini?

Saya tidak dapat membuat Name1 | Harga1 bagian.

html html-table Kalajengking
sumber

Jawaban:

162

Anda harus menambahkan tabel lengkap di dalam td 

    <table>
      <tr>
        <td>
          <table>
            <tr>
              <td>
                ...
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
Luaskan cuplikan

herrhansen
sumber
1
Apakah mungkin menambahkan tabel penuh di dalam td ?? Saya tidak pernah melakukan itu, itulah mengapa saya menanyakan ini. Jika lebih dari itu benar-benar hebat
Scorpion
2
Anda dapat memasukkan hampir semuanya ke dalam td, hanya html, tubuh dan kepala yang tidak diizinkan Saya pikir
herrhansen
1
Ya, inilah yang saya takuti. Saya mencari di google berharap ada jalan keluar lain
Giacomo Tecya Pigani
Sampai sekarang, tidak ada kesalahan saat saya meletakkan tr s di td, sebenarnya saya telah meletakkan banyak tr di dalam beberapa td karena aplikasi saya merender array objek dalam beberapa properti, dan berfungsi di semua browser, (tidak tahu tentang IE, karena saya tidak mengujinya di IE), siapa pun yang tertarik dapat memeriksanya - stackblitz.com/edit/angular-u7aman , Catatan: ini adalah aplikasi Angular, tidak yakin Angular ada di balik ini tingkah laku.
Hasintha Abeykoon
Meskipun tidak menimbulkan kesalahan di browser Anda, itu salah, dan dapat menyebabkan kesalahan di browser atau keadaan lain. Anda harus selalu mencoba menggunakan Elemen HTML dalam penggunaan yang dimaksudkan, seperti tidak menggunakan elemen blok di dalam elemen inline
herrhansen
39

Anda tidak dapat meletakkan tr di dalam td. Anda dapat melihat konten yang diperbolehkan dari dokumentasi web MDN tentang td. Informasi yang relevan ada di bagian konten yang diizinkan .

Cara lain untuk melakukannya adalah dengan menggunakan colspandan rowspan. Periksa biola ini .

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>

Dan beberapa CSS:

table {
    border-collapse: collapse       
}

td {
   border: 1px solid #000000
}
lavavrik.dll
sumber
11
meletakkan tabel di dalam tabel benar-benar valid, tulis kode html sederhana di mana Anda memasukkan tabel di dalam TD dan tempelkan di validator w3: validator.w3.org/check Anda akan melihat itu akan berlalu. semua kesalahan terkait dengan doctype dan tag kepala yang hilang.
Malloc
menempatkan elemen tabel di dalam tr menjadi tidak valid sementara meletakkan tabel di dalam td adalah valid..Anda dapat memvalidasi di validator.w3.org/check
Lucky
3
Saya pikir maksud yang dimaksud di sini adalah bahwa tabel di dalam tabel adalah pendekatan yang aneh untuk skenario tersebut, karena colspan& rowspandimaksudkan untuk memecahkan masalah ini.
connorbode
6
Tidak yakin mengapa solusi ini mendapat begitu banyak suara positif. Kode yang diposting benar-benar buram tanpa browser, mencapai tujuan visual dengan mengorbankan hubungan logis yang seharusnya diwakili oleh tabel. Dan, seperti dicatat oleh @Malloc, kalimat pertamanya jelas salah.
brianpck
20

Anda dapat menyelesaikannya tanpa tabel bersarang.

<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>
Luaskan cuplikan

WalterV
sumber
6

Coba kode ini

<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
sumber
4

Letakkan tabel lain di dalam elemen td seperti ini .

<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
sumber
4

Cukup tambahkan yang baru tableyang tdAnda inginkan. Contoh: 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
sumber
4

Contoh Lengkap: 

<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
sumber
2

Anda dapat memeriksa ini hanya menggunakan tabel di dalam tabel seperti ini

<!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.
sumber
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
sumber