文章/答案/技术大牛

发布

问HTML超链接输出到表中
EN

Stack Overflow用户

提问于 2015-01-18 20:47:08

回答 2查看 201关注 0票数 1

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <style type="text/css">
        .table {
            border-collapse: collapse;
            border-spacing: 0;
        }

            .table td {
                font-family: Arial, sans-serif;
                font-size: 14px;
                padding: 10px 20px;
                border-style: solid;
                border-width: 2px;
            }

            .table th {
                font-family: Arial, sans-serif;
                font-size: 14px;
                font-weight: normal;
                padding: 10px 20px;
                border-style: solid;
                border-width: 2px;
            }

            .table .tg-1 {
                text-align: center;
            }

            .table .tg-2 {
                font-weight: bold;
                background-color: #c0c0c0;
                text-align: center;
            }
    </style>
    <table class="table">
        <tr>
            <th class="tg-2">Animal Name</th>
            <th class="tg-2">Picture</th>
        </tr>
        <tr>
            <td class="tg-1"><a href="Images/cat.jpg">Cat</a></td>
            <td rowspan="3"></td>
        </tr>
        <td class="tg-1"><a href="Images/Dog.jpg">Dog</a></td>
        </tr>
        <tr>
            <td class="tg-1"><a href="Images/Horse.jpg">Horse</a></td>
        </tr>
    </table>
</body>
</html>
<br>

我已经用超链接创建了上面的表，超链接是在同一个窗口/选项卡中打开的，但是我想在表的空白列中打开它们。

你能帮帮忙吗？如何将超链接的目标设置为表的第二列？

html

hyperlink

html-table

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-01-18 22:00:09

只使用没有客户端脚本的HTML (和CSS)，就需要在第二列中放置一个iframe元素，并在该iframe中打开链接。(使用脚本，您也可以更改放置在第二列中的src元素的img属性。)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <style type="text/css">
        .table {
            border-collapse: collapse;
            border-spacing: 0;
        }

            .table td {
                font-family: Arial, sans-serif;
                font-size: 14px;
                padding: 10px 20px;
                border-style: solid;
                border-width: 2px;
            }

            .table th {
                font-family: Arial, sans-serif;
                font-size: 14px;
                font-weight: normal;
                padding: 10px 20px;
                border-style: solid;
                border-width: 2px;
            }

            .table .tg-1 {
                text-align: center;
            }

            .table .tg-2 {
                font-weight: bold;
                background-color: #c0c0c0;
                text-align: center;
            }
            .table iframe {
                padding: 0;
                width: 216px;  /* modify as needed according to image size */
                height: 116px; /* use +16px in both to allow for internal padding */
                border: none;
            }
    </style>
    <table class="table">
        <tr>
            <th class="tg-2">Animal Name</th>
            <th class="tg-2">Picture</th>
        </tr>
        <tr>
            <td class="tg-1"><a href="http://lorempixel.com/200/100/animals/" target="pic">Cat</a></td>
            <td rowspan="3"><iframe src="about:blank" name="pic"></iframe></td>
        </tr>
        <td class="tg-1"><a href="http://lorempixel.com/200/100/animals/" target="pic">Dog</a></td>
        </tr>
        <tr>
            <td class="tg-1"><a href="http://lorempixel.com/200/100/animals/" target="pic">Horse</a></td>
        </tr>
    </table>
</body>
</html>

票数 1

Stack Overflow用户

发布于 2015-01-18 20:51:01

我认为您真正需要的是将超链接替换为图像标记，例如：

<td class="tg-1"><image src="Images/Horse.jpg" alt="Horse"/></td>

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/28014645

复制

相似问题

问HTML超链接输出到表中
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML超链接输出到表中EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML超链接输出到表中
EN