Таблиця html tr всередині td

98

Я намагаюся створити таблицю в HTML. Мені потрібно створити такий дизайн. Я додав <tr>внутрішню частину, <td>але якось таблиця створена не за дизайном.

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

Хтось може підказати мені, як я можу цього досягти?

Я не можу створити Name1 | Прайс1 розділи.

html  html-table 
— Скорпіон
джерело

Відповіді:

162

Ви повинні додати повну таблицю всередині td 

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

— herrhansen
джерело
1
Чи можна додати повну таблицю всередину td ?? Я ніколи цього не робив, тому і прошу це. Якщо це більше, ніж це справді чудово
— Скорпіон
2
ви можете помістити майже все в тд, тільки html, тіло та голова заборонені, я думаю
— herrhansen
1
Так, саме цього я злякався. Я подивився на Google, сподіваючись, що є інший вихід
— Джакомо Теція Пігані
Ну і на сьогоднішній день він не видає жодної помилки, коли я вкладаю tr s в td, насправді я помістив багато tr s всередині деяких td s, тому що мій додаток відображає масиви об'єктів у деяких властивостях, і він працює у всіх браузерах, (не знаю про IE, оскільки я не тестував його в IE), будь-хто зацікавлений може це перевірити - stackblitz.com/edit/angular-u7aman , Примітка: це додаток Angular, не впевнений, що за цим стоїть Angular поведінки.
— Хасінта Абейкун
Навіть незважаючи на те, що у вашому браузері не виникає помилок, воно є помилковим і може спричинити помилки в інших браузерах або обставинах. Ви завжди повинні намагатися використовувати HTML-елементи за призначенням, наприклад, не використовувати block-Elements всередині inline-Elements
— herrhansen
39

Ви не можете помістити 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 Ви помітите, що його буде пройдено. усі помилки пов'язані з типом документа та відсутніми тегами.
— Мелок
введення елемента таблиці всередині tr недійсним під час розміщення таблиці всередині td є дійсним .. Ви можете перевірити на 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>
Розгорніть фрагмент

— ВальтерV
джерело
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>
— Азізул Хаким
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.