Làm cách nào để tạo một bảng HTML nội tuyến

Question

Trong HTML, tôi muốn hiển thị một bảng nhỏ như một phần của một đoạn văn. Một cách để làm điều đó là thế này:

<table> 
    <tr> 
    <td> 
     Before 
     <table style="display:inline;"><tr><td>a</td><td>b</td></tr> <tr><td>c</td><td>d</td></tr> </table> 
     After 
    </td> 
    </tr> 
</table> 

trong đó sản xuất bố trí đẹp này:

 a b 
Before  After 
     c d 

đó là chính xác những gì tôi muốn.

Nhưng nó có vẻ khá ngớ ngẩn với tôi khi sử dụng một bảng bên trong một bảng khi những gì tôi thực sự muốn là sử dụng một bảng bên trong một đoạn văn. Tuy nhiên, nếu tôi thử sử dụng HTML này:

<p> 
    Before 
    <table style="display:inline;"><tr><td>a</td><td>b</td></tr> <tr><td>c</td><td>d</td></tr></table> 
    After 
</p> 

tôi nhận được bố trí xấu xí này:

Before 
a b 
    After 
c d 

Tôi đã cố gắng sử dụng phong cách khác nhau hiển thị khác nhau, nhưng không ai có vẻ để làm những gì tôi muốn.

Tôi có buộc phải sử dụng mã trong bảng hay không hoặc tôi có thiếu gì đó không?

Answer 1

Làm cho đoạn display: inline; hoạt động cho tôi. Tuy nhiên, nếu bạn có nhiều đoạn văn, bạn sẽ phải thêm <br /> sau mỗi đoạn.

Answer 2

Tôi cho rằng bạn có lý do chính đáng để sử dụng bảng ở đây thay vì css. Bạn có thể nhận được hiệu ứng bằng cách sử dụng một bảng duy nhất.

<table> 
    <tr> 
    <td rowspan="2">Before</td> 
    <td>a</td> 
    <td>b</td> 
    <td rowspan="2">After</td> 
    </tr> 
    <tr> 
    <td>c</td> 
    <td>d</td> 
    </tr> 
</table> 

Answer 3

Bạn có thể sử dụng css sau:

display:inline-table 

onnly IE7 và dưới đây không hỗ trợ tài sản. Có lẽ gói bảng trong một khoảng thời gian với zoom:1 áp dụng cho nó có thể giúp IE7.

Answer 4

Tôi đang sử dụng trình duyệt Chrome trên Linux và tôi có thể có được điều này để làm việc bằng cách thêm display:inline-table cho cả hai đoạn (p) và các thẻ bảng:

<p style="display:inline-table;"> 
    Before 
    <table style="display:inline-table;"><tr><td>a</td><td>b</td></tr> <tr><td>c</td><td>d</td></tr></table> 
    After 
</p> 

Chỉ cần kiểm tra Firefox trên Linux và có vẻ như để làm việc ở đó.

FYI: Xóa một trong hai kiểu display:inline-table đã đưa ra định dạng không mong muốn.