Bảng html tr bên trong td

97

Tôi đang cố gắng tạo một bảng trong HTML. Tôi có thiết kế sau đây để tạo. Tôi đã thêm một <tr>bên trong <td>nhưng bằng cách nào đó, bảng không được tạo theo thiết kế.

nhập mô tả hình ảnh ở đây

Bất cứ ai có thể gợi ý cho tôi cách tôi có thể đạt được điều này?

Tôi không thể tạo Name1 | Giá 1 phần.

html html-table

— bọ cạp
nguồn

162

Bạn phải thêm một bảng đầy đủ bên trong td

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

Mở rộng đoạn mã

— herrhansen
nguồn

1

Có thể thêm bảng đầy đủ bên trong td không ?? Tôi chưa bao giờ làm điều đó, đó là lý do tại sao tôi hỏi điều này. Nếu nó là hơn các sản phẩm thực sự tuyệt vời

— Scorpion

2

bạn có thể đặt hầu hết mọi thứ vào một td, chỉ html, cơ thể và đầu không được phép tôi nghĩ

— herrhansen

1

Vâng, đây chính xác là những gì tôi sợ hãi. Tôi nhìn lên trên google hy vọng rằng có một lối thoát

— Giacomo Tecya Pigani

Cho đến thời điểm hiện tại, nó không gây ra bất kỳ lỗi nào khi tôi đặt tr s vào td, thực tế là tôi đã đặt nhiều tr bên trong một số td vì ứng dụng của tôi hiển thị các mảng đối tượng trong một số thuộc tính và nó hoạt động trên tất cả các trình duyệt, (không biết về IE, vì tôi đã không thử nghiệm nó trong IE), bất cứ ai quan tâm có thể kiểm tra nó - stackblitz.com/edit/angular-u7aman , Lưu ý: nó là một ứng dụng Angular, không chắc chắn rằng Angular đứng đằng sau điều này hành vi.

— Hasintha Abeykoon

Mặc dù nó không gây ra lỗi trong trình duyệt của bạn nhưng nó là sai và có thể gây ra lỗi trong các trình duyệt hoặc trường hợp khác. Bạn nên luôn cố gắng sử dụng HTML-Elements trong mục đích sử dụng của chúng, chẳng hạn như không sử dụng block-Elements bên trong Inline-Elements

— herrhansen

39

Bạn không thể đặt tr bên trong td. Bạn có thể xem nội dung được phép từ tài liệu về tài liệu web MDN về td. Thông tin liên quan nằm trong phần nội dung được phép .

Một cách khác để đạt được điều này là sử dụng colspanvà rowspan. Kiểm tra trò chơi này .

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>

Và một số CSS:

table {
    border-collapse: collapse       
}

td {
   border: 1px solid #000000
}

— lavavrik
nguồn

11

đặt bảng bên trong bảng là hoàn toàn hợp lệ, hãy viết một mã html đơn giản nơi bạn chèn một bảng bên trong TD và dán nó vào trình xác thực w3: validator.w3.org/check Bạn sẽ thấy nó sẽ được thông qua. tất cả các lỗi liên quan đến loại tài liệu và thẻ thiếu phần đầu.

— Malloc

đặt một phần tử bảng bên trong tr là không hợp lệ trong khi đặt một bảng bên trong td là hợp lệ..bạn có thể xác thực trên validator.w3.org/check

— May mắn

3

Tôi nghĩ rằng ý nghĩa chủ định ở đây là một cái bàn bên trong một cái bảng là một cách tiếp cận kỳ quặc cho tình huống, vì colspan& rowspannhằm giải quyết vấn đề này.

— connorbode

6

Không chắc tại sao giải pháp này nhận được nhiều ủng hộ như vậy. Mã đã đăng hoàn toàn không rõ ràng khi không có trình duyệt, đạt được mục tiêu trực quan với chi phí của mối quan hệ logic mà một bảng được cho là đại diện. Và, theo ghi nhận của @Malloc, câu đầu tiên của nó là sai nghiêm trọng.

— brianpck

20

Bạn có thể giải quyết mà không cần lồng bảng.

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

Mở rộng đoạn mã

— WalterV
nguồn

6

Hãy thử mã này

<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
nguồn

4

Đặt một bảng khác bên trong phần tử td như thế này .

<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
nguồn

4

Chỉ cần thêm một cái mới tabletrong cái tdbạn muốn. Ví dụ: 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
nguồn

4

Ví dụ đầy đủ:

<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
nguồn

2

Bạn có thể kiểm tra điều này chỉ cần sử dụng bảng bên trong bảng như thế này

<!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
nguồn

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
nguồn