HTML tablosu td içinde

101

HTML'de bir tablo oluşturmaya çalışıyorum. Aşağıdaki tasarıma sahibim. <tr>İçine bir eklemiştim <td>ama bir şekilde tasarım gereği masa oluşturulmadı.

görüntü açıklamasını buraya girin

Bunu nasıl başarabileceğimi bana kimse önerebilir mi?

Name1 oluşturamıyorum | Fiyat1 bölümleri.

html  html-table 
— Akrep
kaynak

Yanıtlar:

170

Td'nin içine tam bir tablo eklemelisiniz 

    <table>
      <tr>
        <td>
          <table>
            <tr>
              <td>
                ...
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
Snippet'i genişlet

— Herrhansen
kaynak
1
Bir td'nin içine tam tablo eklemek mümkün müdür? Bunu hiç yapmadım, bu yüzden bunu soruyorum. Gerçekten
— Scorpion
2
neredeyse her şeyi bir
— td'ye
1
Evet, tam olarak korktuğum şey buydu. Başka bir çıkış yolu olduğunu umarak Google'a baktım
— Giacomo Tecya Pigani
Şu an itibariyle, td'ye tr s koyduğumda herhangi bir hata atmıyor, aslında bazı td'lerin içine birçok tr s koydum çünkü uygulamam bazı özellikler içinde nesne dizilerini işliyor ve tüm tarayıcılarda çalışıyor, (IE'yi IE'de test etmediğim için bilmiyorum), ilgilenen herkes kontrol edebilir - stackblitz.com/edit/angular-u7aman , Not: Bu bir Angular uygulaması, Angular'ın bunun arkasında olduğundan emin değilim davranış.
— Hasintha Abeykoon
Tarayıcınızda bir hata oluşturmasa bile, yanlıştır ve diğer tarayıcılarda veya durumlarda hatalar atabilir. HTML-Elements'i, inline-Elements içinde block-Elements kullanmamak gibi, amaçlanan kullanımlarında her zaman kullanmaya çalışmalısınız
— herrhansen
40

Td'nin içine tr koyamazsınız. MDN web dokümanları belgelerinden izin verilen içeriği görebilirsiniz td. İlgili bilgiler izin verilen içerik bölümündedir.

Bunu başarmak için başka bir yol kullanmaktır colspanve rowspan. Bu kemanı kontrol edin .

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>

Ve biraz CSS:

table {
    border-collapse: collapse       
}

td {
   border: 1px solid #000000
}
— Lavavrik
kaynak
11
tabloyu tablonun içine koymak tamamen geçerlidir, TD'nin içine bir tablo yerleştirdiğiniz ve bunu w3 doğrulayıcısına yapıştırdığınız basit bir html kodu yazın: validator.w3.org/check Geçeceğini fark edeceksiniz. tüm hatalar doctype ve head eksik etiketleriyle ilgilidir.
— Malloc
td'nin içine bir tablo koyarken tr içerisine bir tablo elemanı koymak geçersizdir .. validator.w3.org/check'de
— Şanslı
3
Burada anlam amaçlandığı gibi bir tablonun bir tablo içinde senaryo için garip bir yaklaşım olduğunu düşünüyorum colspan& rowspanbu sorunu çözmek için tasarlanmıştır.
— connorbode
6
Bu çözümün neden bu kadar çok olumlu oy aldığından emin değilim. Gönderilen kod, bir tarayıcı olmadan tamamen opaktır ve bir tablonun temsil etmesi gereken mantıksal ilişki pahasına görsel bir hedefe ulaşır. Ve @Malloc tarafından belirtildiği gibi, ilk cümlesi açıkça yanlıştır.
— brianpck
20

Tabloları iç içe yerleştirmeden çözebilirsiniz.

<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>
Snippet'i genişlet

— WalterV
kaynak
6

Bu kodu dene

<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>
Snippet'i genişlet

— Kedar1442
kaynak
4

Gibi td elemanı içinde başka bir tablo koy bu .

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

Sadece yeni bir ekleme tablede tdistediğiniz. Örnek: 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>
Snippet'i genişlet

— João C
kaynak
4

Tam Örnek:

<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>
Snippet'i genişlet

— Jagu
kaynak
2

Bunu kontrol edebilirsiniz, sadece bunun gibi tablonun içindeki tabloyu kullanın

<!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>
Snippet'i genişlet

— Arman H
kaynak
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>
Snippet'i genişlet

— Azizul Hakim
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.