[英]Semantic HTML markup for complex tables
您將使用哪個HTML標記來描述這樣的表格:
+--------+---------+---------+---------+
| TH1 | TH2 | TH3 | TH4 |
+--------+--------+---------+---------+---------+
| TR1 | str1 | 1 | 1 | 1 |
+--------+--------+---------+---------+---------+
| TR2 | str2 | 1 | 2 | 1 |
+--------+--------+---------+---------+---------+
| TR3 | str3 | 1 | 1 | 3 |
+========+========+=========+=========+=========+
| total | 3 | 4 | 5 |
+--------+---------+---------+---------+
第二個:
+--------+---------+---------+---------+
| TH1 | TH2 | TH3 | TH4 |
+========+========+=========+=========+=========+
| GROUP 1 |
+--------+--------+---------+---------+---------+
| TR1 | str1 | 1 | 1 | 1 |
+--------+--------+---------+---------+---------+
| TR2 | str2 | 1 | 1 | 1 |
+========+========+=========+=========+=========+
| GROUP 2 |
+--------+--------+---------+---------+---------+
| TR3 | str3 | 1 | 1 | 1 |
+--------+--------+---------+---------+---------+
| TR4 | str4 | 1 | 2 | 1 |
+--------+--------+---------+---------+---------+
| TR5 | str5 | 1 | 1 | 3 |
+========+========+=========+=========+=========+
| total | 5 | 6 | 7 |
+--------+---------+---------+---------+
(假設高級別的可訪問性)
我想你正在尋找這樣的東西:
<table>
<thead>
<tr>
<th>TH1</th>
<th>TH2</th>
<th>TH3</th>
<th>TH4</th>
</tr>
</thead>
<tfoot>
<tr>
<td>total</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>str1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>str2</td>
<td>1</td>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>str3</td>
<td>1</td>
<td>1</td>
<td>3</td>
</tr>
</tbody>
</table>
和
<table>
<thead>
<tr>
<th>TH1</th>
<th>TH2</th>
<th>TH3</th>
<th>TH4</th>
</tr>
</thead>
<tfoot>
<tr>
<td>total</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="4">Group 1</td>
</tr>
<tr>
<td>str1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>str2</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td colspan="4">Group 2</td>
</tr>
<tr>
<td>str3</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>str4</td>
<td>1</td>
<td>1</td>
<td>3</td>
</tr>
<tr>
<td>str5</td>
<td>1</td>
<td>1</td>
<td>3</td>
</tr>
</tbody>
</table>
當然,造型一切都取決於你。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.