我們有一些 HTML 當前以一種表格格式顯示資料，但它確實不正確，因為沒有標題，并且應該沒有此資料的標題。作為我們努力遵守螢屏閱讀器網路標準的一部分，我們需要用 div/span 替換這些不正確的表格，但不改變外觀/感覺。我正在嘗試使用 Tailwind 和 Flex 來做到這一點，我認為這應該是可行的，但我一直掛斷電話。
這是最終結果應該是什么樣子（忽略封閉框，只討論內部列內容）
基本上我需要有 2 列帶有右對齊標簽和左對齊值。我有一個為這里的內容設定基本結構的順風游樂場。感謝您的幫助，我是順風的新手。
uj5u.com熱心網友回復：
這不是針對 Tailwind，但重要的是要宣告——
宣告此資訊不能標記為表格并且仍然符合可訪問性最佳實踐和網路標準是不正確的。宣告它會在語意上用 div 和 span 標記也是不正確的。Div 和spans 沒有語意意義，依賴輔助技術的用戶很難辨別標題和資料之間的關系。
從可訪問性和 Web 標準的角度來看，應該使用帶有水平范圍標題的表格來標記此資訊，如下所示（因為它是表格內容，就像您說的那樣）：
th { text-align: right; }<table>
<caption>Project Information</caption>
<tr>
<th scope="row">Company</th>
<td>ABC, Inc.</td>
</tr>
<tr>
<th scope="row">Project Duration</th>
<td>10/01/2020 – 03/07/2022</td>
</tr>
<tr>
<th scope="row">Technology</th>
<td>Electromagnets</td>
</tr>
</table>或者作為描述串列，它在語意上將術語和相應的描述聯系起來：
dl {
display: grid;
grid-template: 1fr / auto auto;
justify-content: start;
}
dt {
font-weight: bold;
text-align: right;
}
dd {
margin-left: 1ch;
}<dl>
<dt>Company</dt>
<dd>ABC, Inc.</dd>
<dt>Project Duration</dt>
<dd>10/01/2020 – 03/07/2022</dd>
<dt>Technology</dt>
<dd>Electromagnets</dd>
</dl>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/388454.html