Таблица HTML tr внутри td

100

Я пытаюсь создать таблицу в HTML. Мне нужно создать следующий дизайн. Я добавил <tr>внутри, <td>но почему-то таблица не создается в соответствии с дизайном.

введите описание изображения здесь

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

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

html html-table Скорпион
источник

Ответы:

166

Вы должны добавить полную таблицу внутри td 

    <table>
      <tr>
        <td>
          <table>
            <tr>
              <td>
                ...
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
Развернуть фрагмент

Herrhansen
источник
1
Можно ли добавить в тд полную таблицу ?? Я никогда этого не делал, поэтому и спрашиваю об этом. Если это так, то это действительно здорово
Scorpion
2
вы можете поместить почти все в td, только html, body и head, я думаю, не допускаются
herrhansen
1
Да, именно этого я и боялся. Я заглянул в Google в надежде, что есть другой выход
Джакомо Текя Пигани
Что ж, на данный момент он не вызывает никаких ошибок, когда я помещаю tr в td, на самом деле я поместил много tr внутри некоторых td, потому что мое приложение отображает массивы объектов в некоторых свойствах и работает во всех браузерах, (не знаю об IE, так как я не тестировал его в IE), любой желающий может проверить это - stackblitz.com/edit/angular-u7aman , Примечание: это приложение Angular, не уверен, что за этим стоит Angular поведение.
Хасинта Абейкун,
Несмотря на то, что он не вызывает ошибки в вашем браузере, он является ложным и может вызывать ошибки в других браузерах или обстоятельствах. Вы всегда должны пытаться использовать HTML-элементы по назначению, например, не использовать блочные элементы внутри встроенных элементов
herrhansen
40

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

Другой способ добиться этого - использовать colspanи rowspan. Проверьте эту скрипку .

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>

И немного CSS:

table {
    border-collapse: collapse       
}

td {
   border: 1px solid #000000
}
лававрик
источник
11
размещение таблицы внутри таблицы полностью допустимо, напишите простой html-код, в котором вы вставляете таблицу внутри TD и вставляете его в валидатор w3: validator.w3.org/check Вы заметите, что он будет принят. все ошибки связаны с отсутствующими тегами doctype и head.
Malloc
положить элемент таблицы внутри тра в инвалиду при отдаче таблицы внутри пДа valid..you можно проверить на validator.w3.org/check
Лаки
3
Я думаю, что подразумеваемое значение здесь заключалось в том, что таблица внутри таблицы является странным подходом для сценария, поскольку colspan& rowspanпредназначены для решения этой проблемы.
connorbode
6
Не уверен, почему это решение получает так много голосов. Опубликованный код совершенно непрозрачен без браузера, достигая визуальной цели за счет логических отношений, которые должна представлять таблица. И, как отмечает @Malloc, его первое предложение заведомо ложно.
brianpck
20

Решать можно без таблиц вложенности.

<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>
Развернуть фрагмент

WalterV
источник
6

Попробуйте этот код

<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>
Развернуть фрагмент

Кедар1442
источник
4

Поместите еще одну таблицу в элемент td следующим образом .

<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>
Патрик
источник
4

Просто добавьте новый tableв tdнужный. Пример: 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>
Развернуть фрагмент

Жуан С
источник
4

Полный пример:

<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>
Развернуть фрагмент

Ягу
источник
2

Вы можете проверить это, просто используйте таблицу внутри таблицы, подобную этой

<!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>
Развернуть фрагмент

Арман Х
источник
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>
Развернуть фрагмент

Азизул Хаким
источник