Merhabalar, bir şey sormayalı epey oldu, bu beni bir süredir rahatsız eden bir şey, sorunun kendisi başlıkta:
Dikey başlıklara sahip HTML tabloları yazmak için tercih ettiğiniz yol nedir?
Dikey başlık ile tablonun <th>sol tarafında başlık ( ) etiketi olduğunu kastediyorum (genellikle)
Başlık 1 veri veri verileri
Başlık 2 veri veri verileri
Başlık 3 veri veri verileri
Şuna benziyorlar, şimdiye kadar iki seçenek buldum
İlk seçenek
<table id="vertical-1">
<caption>First Way</caption>
<tr>
<th>Header 1</th>
<td>data</td><td>data</td><td>data</td>
</tr>
<tr>
<th>Header 2</th>
<td>data</td><td>data</td><td>data</td>
</tr>
<tr>
<th>Header 2</th>
<td>data</td><td>data</td><td>data</td>
</tr>
</table>
Bu yolun ana avantajı, temsil ettiği verilerin yanında sağda (aslında solda) başlıklara sahip olmanızdır, ancak hoşlanmadığım şey <thead>, <tbody>ve <tfoot>etiketlerinin eksik olması ve bunları bozmadan dahil etmenin bir yolu yoktur. Öğeleri güzelce bir araya getirerek beni ikinci seçeneğe götürüyor.
İkinci seçenek
<style type="text/css">
#vertical-2 thead,#vertical-2 tbody{
display:inline-block;
}
</style>
<table id="vertical-2">
<caption>Second Way</caption>
<thead>
<tr>
<th colspan="3">Header 1</th>
</tr>
<tr>
<th colspan="3">Header 2</th>
</tr>
<tr>
<th colspan="3">Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>row 1</td>
<td>row 1</td>
<td>row 1</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">Footer</td>
</tr>
</tfoot>
</table>
Buradaki ana avantaj, tamamen açıklayıcı bir html tablonuzun olmasıdır, dezavantajları, uygun temsilin tbodyve theadetiketleri için biraz CSS'ye ihtiyaç duyması ve başlıklar ile veriler arasındaki ilişkinin çok net olmamasıdır, çünkü oluştururken şüphelerim vardı. işaretleme.
Yani, her iki yol da tabloyu olması gerektiği gibi işler, işte bir pitcure:
İsterseniz sol veya sağdaki başlıklarla, herhangi bir öneri, alternatif, tarayıcı sorunu var mı?