Tôi đang cố gắng tạo một bảng bằng HTML. Tôi có thiết kế sau để 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ế.Bảng Html tr bên trong td
bất cứ ai có thể gợi ý cho tôi làm thế nào tôi có thể đạt được điều này?
Tôi không thể tạo Name1 | Phần Price1.
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>Chỉ cần thêm một mới table trong td bạ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>
Đặt bảng vào bảng là cách tiếp cận hoàn toàn không hợp lệ. Ngoài ra, bạn không thể đặt tr bên trong td. Bạn cần sử dụng colspan và rowspan. Kiểm tra số fiddle 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
}
đặt bảng bên trong bảng là hoàn toàn hợp lệ, 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ó trong trình xác nhận hợp lệ w3: http: //validator.w3. org/check Bạn sẽ nhận thấy nó sẽ được thông qua. tất cả các lỗi đều liên quan đến loại tài liệu và đầu thẻ bị thiếu. – Malloc
đặt một yếu tố bảng bên trong tr trong không hợp lệ trong khi đặt một bảng bên trong một td là hợp lệ .. bạn có thể xác nhận trên https://validator.w3.org/check – Lucky
Tôi nghĩ rằng ý nghĩa dự định ở đây là một bảng bên trong của một bảng là một cách tiếp cận kỳ lạ cho kịch bản, vì 'colspan' và' rowspan' được dùng để giải quyết vấn đề này. – connorbode
Đặt bảng khác bên trong phần tử td như this.
<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>
Full Ví dụ:
<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>
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>
Bạn có thể giải quyết mà không có bàn làm tổ.
<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><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>
Có thể thêm bảng đầy đủ bên trong một td ?? Tôi chưa bao giờ làm vậy, đó là lý do tại sao tôi hỏi điều này. Nếu nó là thực sự tuyệt vời của nó – Scorpion
bạn có thể đặt gần như tất cả mọi thứ vào một td, chỉ html, cơ thể và đầu không được phép tôi nghĩ rằng – quidage
Vâng, đây là chính xác những gì tôi đã sợ hãi. Tôi nhìn lên google hy vọng rằng có một cách khác ra –