HTML Bảng Tiêu đề sử dụng rowspan

<html> 
<body> 

<TABLE border="1" "> 

<CAPTION><EM>A test table with merged cells</EM></CAPTION> 

<TR><TH rowspan="2"><TH colspan="2"> Average 
    <TH rowspan="2">Red<BR>eyes </TH> 
</TR> 
<TR> 
    <TH>height</TH><TH>weight</TH> 
</TR> 
<TR> 
    <TD>1.9<TD>0.003<TD>40%</TD> 
</TR> 
<TR> 
    <TD>1.7<TD>0.002<TD>43%</TD> 
</TR> 

</TABLE> 
</body> 
</html>

tôi nhận được đầu ra với phần tử đầu tiên của tiêu đề như trốngHTML Bảng Tiêu đề sử dụng rowspan

A test table with merged cells 
/-----------------------------------------\ 
|   |  Average  | Red | 
|   |-------------------| eyes | 
|   | height | weight |   | 
|-----------------------------------------| 
| 1.9  | 0.003 | 40% |   | 
|-----------------------------------------| 
| 1.7  | 0.002 | 43% |   | 
\-----------------------------------------/

Dự kiến sản lượng

A test table with merged cells 
/----------------------------- \ 
|  Average  | Red |   
|-------------------| eyes |   
| height | weight |   |   
|------------------------------| 
| 1.9  | 0.003 | 40% |   
|------------------------------| 
| 1.7  | 0.002 | 43% |   
\------------------------------/

Nguồn

2012-04-20 m4n07

Và câu hỏi của bạn sẽ là ..? –

Tháo TH thêm trong mã của bạn

http://jsfiddle.net/yqQsP/

<html> 
<body> 

<TABLE border="1" > 

<CAPTION><EM>A test table with merged cells</EM></CAPTION> 

<TR> 
    <TH colspan="2"> Average</TH> 
    <TH rowspan="2">Red<BR>eyes </TH> 
</TR> 
<TR> 
    <TH>height</TH><TH>weight</TH> 
</TR> 
<TR> 
    <TD>1.9<TD>0.003<TD>40%</TD> 
</TR> 
<TR> 
    <TD>1.7<TD>0.002<TD>43%</TD> 
</TR> 

</TABLE> 
</body> 
</html>

Nguồn

2012-04-20 11:03:51 Nauphal

Thay đổi đầu tiên Row

<TR> 
    <TH colspan="2"> Average</TH> 
    <TH rowspan="2">Red<BR>eyes </TH> 
</TR>

Nó sẽ giải quyết vấn đề

Nguồn

2012-04-20 11:04:58

Trong khi nauphal đã giải quyết vấn đề của bạn, tôi chỉ muốn làm một số gợi ý về cấu trúc HTML của bạn.

Thứ nhất, chữ hoa là không bắt buộc (HTML của case-insensitive), mặc dù bạn nên bao giờ chuyển sang XHTML thấp hơn trường hợp là bắt buộc (và, thẳng thắn, trông đẹp hơn một chút quá).

Thứ hai, vì phần tử tbody luôn được trình duyệt chèn (tôi không chắc chắn về tất cả ứng dụng khách, nhưng chắc chắn là ứng dụng web trực quan) nếu chưa có, thì tốt nhất nên bao bọc các yếu tố đó đại diện cho 'cơ thể' của bảng trong chính mình là tbody, theo cách đó bạn có thể gán các hàng yếu tố th thành một số thead, làm tăng ngữ nghĩa một chút (tôi không chắc chắn hữu ích như thế nào, nhưng mọi trợ giúp).

Thứ ba, nhớ đóng thẻ của bạn:

<TR> 
    <TD>1.9<TD>0.003<TD>40%</TD> 
</TR>

nên, thực sự, là:

<TR> 
    <TD>1.9</TD><TD>0.003</TD><TD>40%</TD> 
</TR>

Một lần nữa, nó không phải là bắt buộc (trong HTML 4, tôi tin), nhưng nó làm giảm phạm vi lỗi được giới thiệu bằng cách có thêm, không đóng, thẻ bắt đầu xung quanh đánh dấu của bạn.

Thứ tư, và đây chỉ là chọn nit, có thể, nếu bạn muốn tạo kiểu cho toàn bộ caption dưới dạng văn bản được nhấn mạnh, tránh chèn thêm đánh dấu và chỉ tạo kiểu trực tiếp caption.

Điều đó nói rằng, đây là phiên bản của tôi về bảng của bạn và một số CSS:

<table> 
    <caption>A test table with merged cells</caption> 
    <theader> 
     <tr> 
      <th colspan="2">Average</th> 
      <th rowspan="2">Red Eyes</th> 
     </tr> 
     <tr> 
      <th>height</th> 
      <th>weight</th> 
     </tr> 
    </theader> 
    <tbody> 
     <tr> 
      <td>1.9</td> 
      <td>0.003</td> 
      <td>40%</td> 
     </tr> 
     <tr> 
      <td>1.7</td> 
      <td>0.002</td> 
      <td>43%</td> 
     </tr> 
    </tbody> 
</table>

CSS:

caption { 
    font-style: italic; 
} 

td, 
th { 
    border: 1px solid #000; 
    padding: 0.2em; 
}

JS Fiddle.

Nguồn

2012-04-20 11:22:03

HTML Bảng Tiêu đề sử dụng rowspan

Trả lời

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