在 <a> 中包装 HTML 表格行标签 [英] Wrapping HTML table rows in <a> tags

问题描述

是否可以用 <a> 标签包裹整个表格行?我希望整行都是可点击的链接.

如果我尝试以下操作，链接会在表格的上方和外部呈现:

这个:

<a href="value_url"><tr><td>value</td><td>value</td></tr></a><a href="value_url"><tr><td>value</td><td>value</td></tr></a>

渲染如下:

<a href="value_url"></a><表格><tr><td>值</td><td>值</td></tr><tr><td>值</td><td>值</td></tr>

解决方案

Edit 2021:
现在似乎有更好的选择，它们更具语义和更适合屏幕阅读器.签出例如Jans 解决方案.

原答案:
由于每个 td 中的链接不是一个好的选择，而且使用 js 有点脏，这里是另一种 html/css 方法:

HTML:

<a class="table-row";href="/mylink"><div class="table-cell">...</div><div class="table-cell">...</div><div class="table-cell">...</div></a>

CSS:

.table { display:table;}.table-row { display:table-row;}.table-cell { display:table-cell;}

Is it possible to wrap entire table rows in <a> tags? I want the the entire row to be a clickable link.

If I try the following, the links get rendered above and outside the table:

This:

<table>
<a href="value_url"><tr><td>value</td><td>value</td></tr></a>
<a href="value_url"><tr><td>value</td><td>value</td></tr></a>
</table>

Renders like this:

<a href="value_url"></a>
<a href="value_url"></a>
<table>
<tr><td>value</td><td>value</td></tr>
<tr><td>value</td><td>value</td></tr>
</table>

解决方案

Edit 2021:
It seems nowadays there's better options that are more semantic and more screen-reader-friendly. Check out e.g. Jans solution.

Original answer:
as a link in each td is not a good alternative and using js is a bit dirty, here is another html/css approach:

HTML:

<div class="table">
    <a class="table-row" href="/mylink">
        <div class="table-cell">...</div>
        <div class="table-cell">...</div>
        <div class="table-cell">...</div>
    </a>
</div>

CSS:

.table { display:table; }
.table-row { display:table-row; }
.table-cell { display:table-cell; }

这篇关于在 <a> 中包装 HTML 表格行标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！