Üst tablonun üstbilgileriyle hizalanan (ve ilişkilendiren) HTML iç içe geçmiş bir tablonun nasıl kodlanacağı

Question

Düzenleme: Seçilen yanıt, iç içe geçmiş bir tablo kullanmadan oluşturabildiğim çalışma klibine bir bağlantı içerir.

HTML'deki tabloyu aşağıdaki resim gibi bir düzen ile semantik olarak kodlamak istiyorum. Ne yazık ki, ağdaki gibi bir şey bulamadım.

el hücre genişliklerini ayarlayarak göz zorlamak mümkün olmuştur, ama ben üreten ediyorum kod mantıklı emin olmak ve bunun nedeni olmadan, vaka olduğunu sanmıyorum Genişliklerin manuel olarak ayarlanması, standart oluşturma aşağıdaki resme daha çok benziyor.

Şimdiye kadar

, böyle görünüyor geldi sorunlu kod: o biraz zor söylenecek var görüntülerin olmadan

<table> 
    <thead> 
    <tr> 
     <th scope="col">Type of Loss Dollar</th> 
     <th scope="col">Reserve Amount</th> 
     <th scope="col">Paid Amount</th> 
     <th scope="col">Total This Loss</th> 
    </tr> 
    </thead> 

    <tbody> 
    <tr> 
     <td colspan="3"> 
     <table> 
      <tbody> 
      <tr> 
       <th scope="row">Medical</th> 
       <td><input type="text" /></td> 
       <td><input type="text" /></td> 
      </tr><tr> 
       <th scope="row">Indemnity</th> 
       <td><input type="text" /></td> 
       <td><input type="text" /></td> 
      </tr><tr> 
       <th scope="row">Expense</th> 
       <td><input type="text" /></td> 
       <td><input type="text" /></td> 
      </tr> 
      </tbody> 
     </table> 
     </td><td> 
     TOTAL 
     </td> 
    </tr> 
    </tbody> 
</table> 

Answer 1

ama iç içe geçmiş tablolar daha iyi bir çözüm düşünmek sadece colspan ve rowspan özniteliklerini kullanmak olacaktır.

Düzenleme: Görüntüleri görme, kesinlikle rowspan (ve colspan zaten kullanma şeklinizi kullanarak) elde edebileceğinizi söyleyebilirim.

Ayrıca "col" ise scope özniteliğini ayarlamanıza gerek yoktur. Varsayılan olarak "col" olarak adlandırılır.

Düzenleme: Marat Tanalin, scope özniteliğinin varsayılan değerinin aslında "üstbilgi hücresine, bağlama göre seçilen bir hücre kümesine uygulandığı" olduğunu bildiren auto olduğunu belirtir. Ve benim deneyimlerimde tam olarak "col" (ekran okuyucular için) olarak ayarlamakla aynı davranıyor.

Düzenleme: http://www.456bereastreet.com/archive/200910/use_the_th_element_to_specify_row_and_column_headers_in_data_tables/ & http://www.456bereastreet.com/archive/200410/bring_on_the_tables/

Düzenleme:: Here is the fiddle istenilen davranışı sergileyen (görsel en az) ve bu keman kaynak kodunu izler: Burada gelişmiş tabloları işaretlerken iki büyük makaleler

<table border="1"> 
    <thead> 
    <tr> 
     <th>Status</th> 
     <th>Type of Loss Dollar</th> 
     <th>Reserve Amount</th> 
     <th>Paid Amount</th> 
     <th>Total This Loss</th> 
    </tr> 
    </thead> 

    <tbody> 
    <tr> 
     <td rowspan="3">Open</td> 
     <td>Medical</td> 
     <td><input type="text" /></td> 
     <td><input type="text" /></td> 
     <td rowspan="3">TOTAL</td> 
    </tr><tr> 
     <td>Indemnity</td> 
     <td><input type="text" /></td> 
     <td><input type="text" /></td> 
    </tr><tr> 
     <td>Expense</td> 
     <td><input type="text" /></td> 
     <td><input type="text" /></td> 
    </tr> 
    </tbody> 
</table> 

Answer 2

Evet, yukarıdaki tüm dikizlerin önerdiği gibi, tüm bunlar rowspan ile ilgilidir.

burada bir kod yeniden yazma var:

<table> 
    <thead> 
    <tr> 
     <th>Type of Loss Dollar</th> 
     <th>Reserve Amount</th> 
     <th>Paid Amount</th> 
     <th>Total This Loss</th> 
     <th>Last Heading</th> 
    </tr> 
    </thead> 

    <tbody> 
    <tr> 
     <td rowspan="3"></td> 
     <td>Medical</td> 
     <td><input type="text" /></td> 
     <td><input type="text" /></td> 
     <td rowspan="3">TOTAL</td> 
    </tr><tr> 
     <td>Indemnity</td> 
     <td><input type="text" /></td> 
     <td><input type="text" /></td> 
    </tr><tr> 
     <td>Expense</td> 
     <td><input type="text" /></td> 
     <td><input type="text" /></td> 
    </tr> 
    </tbody> 
</table>