Bạn sử dụng colspan và rowspan trong các bảng HTML như thế nào?

Tôi không biết cách hợp nhất các hàng và cột bên trong các bảng HTML.Bạn sử dụng colspan và rowspan trong các bảng HTML như thế nào?

Example

bạn có thể vui lòng giúp tôi với làm một bảng như trong HTML?

Nguồn

2012-03-22 Ockonal

họ Merge đúng? Bạn có nghĩa là 'colspan'? – animuson

@DavidThomas Tôi có thể tạo bảng với 5 hàng và 3 cột. Nhưng tôi không thực sự biết nơi để áp dụng rowpan, vv – Ockonal

+13

@DAvid: Dường như người hỏi không rõ bắt đầu từ đâu, đôi khi khó khi bạn thậm chí không biết một thuộc tính mà bạn đang tìm kiếm Để tồn tại (rowspan trong trường hợp này) –

tôi muốn đề nghị:

table { 
 
    empty-cells: show; 
 
    border: 1px solid #000; 
 
} 
 

 
table td, 
 
table th { 
 
    min-width: 2em; 
 
    min-height: 2em; 
 
    border: 1px solid #000; 
 
}

<table> 
 
    <thead> 
 
     <tr> 
 
      <th rowspan="2"></th> 
 
      <th colspan="4">&nbsp;</th> 
 
     </tr> 
 
     <tr> 
 
      <th>I</th> 
 
      <th>II</th> 
 
      <th>III</th> 
 
      <th>IIII</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td></td> 
 
      <td>1</td> 
 
      <td>2</td> 
 
      <td>3</td> 
 
      <td>4</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Tài liệu tham khảo:

Nguồn

2012-03-22 21:09:52

Đừng quên thêm màu sắc đẹp. – Blazemonger

+27

Tôi để lại 'màu sắc đẹp' như một bài tập cho người đọc trong trường hợp này. –

Bạn có thể sử dụng rowspan="n" trên một yếu tố td để làm cho nó trải rộng n hàng, và colspan="m" trên một yếu tố td để làm cho nó trải rộng m cột.

Dường như số td đầu tiên của bạn cần số rowspan="2" và số td tiếp theo cần colspan="4".

Nguồn

2012-03-22 21:07:51

Sử dụng rowspan nếu bạn muốn mở rộng ô và colspan để mở rộng.

Nguồn

2012-03-22 21:08:05 Wadester

Thuộc tính bạn đang tìm kiếm rằng td đầu tiên là rowspan: http://www.angelfire.com/fl5/html-tutorial/tables/tr_code.htm

<table> 
<tr><td rowspan="2"></td><td colspan='4'></td></tr> 
<tr><td></td><td></td><td></td><td></td></tr> 
<tr><td></td><td></td><td></td><td></td><td></td></tr> 
</table>

Nguồn

2012-03-22 21:09:04

<style type="text/css"> 
    table { border:2px black dotted; margin: auto; width: 100%; } 
    tr { border: 2px red dashed; } 
    td { border: 1px green solid; } 
</style> 
<table> 
    <tr> 
     <td rowspan="2">x</td> 
     <td colspan="4">y</td> 
    </tr> 
    <tr> 
     <td>I</td> 
     <td>II</td> 
     <td>III</td> 
     <td>IV</td> 
    </tr> 
    <tr> 
     <td>nothing</td> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     <td>4</td> 
    </tr> 
</table>

Nguồn

2012-03-22 21:12:35 hjpotter92

<body> 
<table> 
<tr><td colspan="2" rowspan="2">1</td><td colspan="4">2</td></tr> 
<tr><td>3</td><td>3</td><td>3</td><td>3</td></tr> 
<tr><td colspan="2">1</td><td>3</td><td>3</td><td>3</td><td>3</td></tr> 
</table> 
</body>

Nguồn

2012-03-22 21:15:36 Wadester

Nếu bạn đang nhầm lẫn cách bố trí bàn làm việc, họ về cơ bản bắt đầu tại x = 0, y = 0 và làm việc theo cách của họ qua. Hãy giải thích với đồ họa, bởi vì chúng rất thú vị!

Khi bạn bắt đầu một bảng, bạn tạo lưới. Hàng và ô đầu tiên của bạn sẽ ở góc trên cùng bên trái. Hãy suy nghĩ về nó giống như một con trỏ mảng, di chuyển sang phải với mỗi giá trị gia tăng của x, và di chuyển xuống với mỗi giá trị gia tăng của y.

Đối với hàng đầu tiên, bạn chỉ xác định hai ô. Một kéo dài 2 hàng xuống và một kéo dài 4 cột trên. Vì vậy, khi bạn đến cuối của dòng đầu tiên của bạn, nó trông giống như sau:

Preview #0001

<table> 
    <tr> 
     <td rowspan="2"></td> 
     <td colspan="4"></td> 
    </tr> 
</table>

Bây giờ hàng đã kết thúc, các "con trỏ mảng" nhảy xuống hàng tiếp theo. Vì vị trí x đã được đưa lên bởi một ô trước đó, x nhảy tới vị trí 1 để bắt đầu điền vào các ô. * Xem lưu ý về sự khác biệt giữa các hàng.

Hàng này có bốn ô trong đó là tất cả các khối 1x1, điền cùng chiều rộng của hàng phía trên nó.

Preview #0002

<table> 
    <tr> 
     <td rowspan="2"></td> 
     <td colspan="4"></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
</table>

Dòng tiếp theo là tất cả các ô 1x1. Nhưng, ví dụ, nếu bạn thêm một ô phụ? Vâng, nó sẽ bật ra khỏi cạnh bên phải.

Preview #0003

<table> 
    <tr> 
     <td rowspan="2"></td> 
     <td colspan="4"></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
</table>

* Nhưng nếu chúng ta thay vì (thay vì thêm các tế bào thêm) khiến tất cả những tế bào này có một rowspan của 2? Điều bạn cần xem xét ở đây là mặc dù bạn sẽ không bổ sung thêm bất kỳ ô nào trong hàng tiếp theo, hàng vẫn phải tồn tại (mặc dù nó là một hàng trống). Nếu bạn đã cố gắng thêm các ô mới trong hàng ngay sau đó, bạn sẽ nhận thấy rằng nó sẽ bắt đầu thêm chúng vào cuối hàng dưới cùng.

Preview #0004

<table> 
    <tr> 
     <td rowspan="2"></td> 
     <td colspan="4"></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td rowspan="2"></td> 
     <td rowspan="2"></td> 
     <td rowspan="2"></td> 
     <td rowspan="2"></td> 
     <td rowspan="2"></td> 
    </tr> 
    <tr> 
     <td></td> 
    </tr> 
</table>

Thưởng thức thế giới tuyệt vời của việc tạo ra bảng!

Nguồn

2012-03-22 21:29:37 animuson

Cân nhắc sử dụng PNG thay vì JPG để minh họa. –

Cảm ơn một triệu. Tôi đã không bao giờ được giao dịch với bảng quá nhiều, nhưng bây giờ tôi stumbled khi một vấn đề mà dữ liệu bảng đúng phải được trình bày trong một cấu trúc bảng khá phức tạp. Nhờ lời giải thích của bạn, cuối cùng tôi cũng đã tìm ra cách hoạt động của hàng/cột. –

Hình ảnh xem trước bị hỏng .. – hyip

Nó tương tự như bảng

<table border=1 width=50%> 
<tr> 
    <td rowspan="2">x</td> 
    <td colspan="4">y</td> 
</tr> 
<tr> 
    <td bgcolor=#FFFF00 >I</td> 
    <td>II</td> 
    <td bgcolor=#FFFF00>III</td> 
    <td>IV</td> 
</tr> 
<tr> 
    <td>empty</td> 
    <td bgcolor=#FFFF00>1</td> 
    <td>2</td> 
    <td bgcolor=#FFFF00>3</td> 
    <td>4</td> 
</tr>

Nguồn

2012-03-23 10:44:01 Ha3Ha3Ha3

Nếu bất cứ ai đang tìm kiếm một rowspan trên cả hai bên trái và bên phải, đây là cách bạn có thể làm điều đó:

table { 
 
    border-collapse: collapse; 
 
} 
 

 
td { 
 
    padding: 20px; 
 
    border: 1px solid black; 
 
    text-align: center; 
 
}

<table> 
 
    <tbody> 
 
    <tr> 
 
     <td rowspan="2">LEFT</td> 
 
     <td> 1 </td> 
 
     <td> 2 </td> 
 
     <td> 3 </td> 
 
     <td> 4 </td> 
 
     <td rowspan="2">RIGHT</td> 
 
    </tr> 
 
    <tr> 
 
     <td> 5 </td> 
 
     <td> 6 </td> 
 
     <td> 7 </td> 
 
     <td> 8 </td> 
 
    </tr> 
 
    <tr> 
 
     <td> - </td> 
 
     <td> - </td> 
 
     <td> - </td> 
 
     <td> - </td> 
 
     <td> - </td> 
 
     <td> - </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Ngoài ra, nếu bạn muốn thêm trái và phải để một rowset hiện tại, bạn có thể đạt được kết quả tương tự bằng cách ném chúng vào với một sụp đổ colspan ở giữa:

table { 
 
    border-collapse: collapse; 
 
} 
 

 
td { 
 
    padding: 20px; 
 
    border: 1px solid black; 
 
    text-align: center; 
 
}

<table> 
 
    <tbody> 
 
    <tr> 
 
     <td rowspan="3">LEFT</td> 
 
     <td colspan="4" style="padding: 0; border-bottom: solid 1px transparent;"></td> 
 
     <td rowspan="3">RIGHT</td> 
 
    </tr> 
 
    <tr> 
 
     <td> 1 </td> 
 
     <td> 2 </td> 
 
     <td> 3 </td> 
 
     <td> 4 </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 5 </td> 
 
     <td> 6 </td> 
 
     <td> 7 </td> 
 
     <td> 8 </td> 
 
    </tr> 
 
    <tr> 
 
     <td> - </td> 
 
     <td> - </td> 
 
     <td> - </td> 
 
     <td> - </td> 
 
     <td> - </td> 
 
     <td> - </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Nguồn

2014-03-08 20:59:44 Lane

Bạn sử dụng colspan và rowspan trong các bảng HTML như thế nào?

Trả lời

Các vấn đề liên quan