HTML-таблица tr внутри тд

Я пытаюсь создать таблицу в HTML. У меня есть следующий дизайн для создания. Я добавил внутри но так или иначе таблица не создана согласно дизайну.

Кто-нибудь может подсказать, как мне этого добиться?

Я не могу создать Name1 | Цена1 раздела.

Ответы на вопрос(9)

Решение Вопроса

    <table>
      <tbody><tr>
        <td>
          <table>
            <tbody><tr>
              <td>
                ...
              </td>
            </tr>
          </tbody></table>
        </td>
      </tr>
    </tbody></table>

 Scorpion13 июн. 2013 г., 15:59
Можно ли добавить полную таблицу внутри тд? Я никогда этого не делал, этоВот почему я спрашиваю это. Если это так, то это действительно здорово
 quidage13 июн. 2013 г., 16:00
Вы можете положить почти все в тд, только html, тело и голова не разрешены, я думаю
 Giacomo Tecya Pigani20 февр. 2014 г., 21:16
Да, это именно то, чего я боялся. Я посмотрел на Google, надеясь, что был другой выход

этот.

<table>
    <tbody><tr></tr>
    <tr>
        <td>ABC</td>
        <td>ABC</td>
        <td>
            
...
            <table>
                <tbody><tr>
                    <td>name1</td>
                    <td>price1</td>
                </tr></tbody></table>
        </td>
        <td>ABC</td>
    </tr></tbody></table>
        ...
    
...

как это

    
    
    
    <style>
     table, th, td {
      border: 1px solid black;
      border-collapse: collapse;
       }
   </style>
   
   

     <table style="width:100%">
        <tbody><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%">
             <tbody><tr>
                <td>name1</td>
                <td>price1</td>
             </tr>
             <tr>
                <td>name2</td>
                <td>price2</td>
             </tr>
             <tr>
                <td>name3</td>
                <td>price3</td>
             </tr>
          </tbody></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>

   </tbody></table>

  
  

<table border="1" width="100%">
<tbody><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>
</tbody></table>

ент изMDN веб-документы документация оtd, Соответствующая информация находится вразрешенный контент раздел.

Еще один способ добиться этого с помощьюcolspan а такжеrowspan, Проверь этоскрипка.

HTML:

<table width="100%">
 <tbody><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>
 </td></tr>
</tbody></table>

И немного CSS:

table {
    border-collapse: collapse       
}

td {
   border: 1px solid #000000
}
 Malloc08 мая 2014 г., 23:08
размещение таблицы внутри таблицы полностью допустимо, напишите простой HTML-код, в который вы вставляете таблицу в TD и вставляете ее в валидатор w3:validator.w3.org/check  Вы заметите, что это пройдет. все ошибки связаны с тегами типа документа и заголовка.
 brianpck17 февр. 2016 г., 23:52
Не уверен, почему это решение получает так много голосов. Размещенный код совершенно непрозрачен без браузера, что позволяет достичь визуальной цели за счет логических отношений, которые должна представлять таблица. И, как отмечает @Malloc, его первое предложение явно ложно.
 connorbode14 авг. 2015 г., 21:26
Я думаю, что здесь подразумевалось, что таблица внутри таблицы является странным подходом для сценария, так какcolspan & rowspan предназначены для решения этой проблемы.
 Lucky28 мая 2015 г., 16:54
размещение элемента таблицы внутри tr недействительным, в то время как размещение таблицы внутри td допустимо. Вы можете проверить наvalidator.w3.org/check

table вtd ты хочешь. Пример:http://jsfiddle.net/AbE3Q/

<table border="1">
    <tbody><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">
            <tbody><tr><td>qweqwewe</td><td>qweqwewe</td></tr>
            <tr><td>qweqwewe</td><td>qweqwewe</td></tr>
            <tr><td>qweqwewe</td><td>qweqwewe</td></tr>
            </tbody></table></td>
        <td>Item3</td>
    </tr>
    <tr>
    </tr>
    <tr>
    </tr>
    <tr>
    </tr>
    <tr>
    </tr>  
</tbody></table>

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


        
            Product
            quantity
            Price
            Totall
        
        
            Item-1
            Item-1
            
                
                    
                        Name1
                        Price1
                    
                    
                        Name2
                        Price2
                    
                    
                        Name3
                        Price3
                    
                    
                        Name4
                        Price4
                    
                
            
            Item-1
        
        
            Item-2
            Item-2
            Item-2
            Item-2
        
        
            Item-3
            Item-3
            Item-3
            Item-3
        
    

   <table border="1" style="width:100%;">
        <tbody><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%;">
                <tbody><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>
                </tbody></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>
    </tbody></table>

Ваш ответ на вопрос