HTML超链接输出到表中答案

【问题标题】：HTML Hyperlink output into tableHTML超链接输出到表中
【发布时间】：2015-03-16 20:51:37
【问题描述】：

<!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

【解决方案1】：

仅使用不使用客户端脚本的 HTML（和 CSS），您需要将 iframe 元素放入第二列，并在该 iframe 中打开链接。（使用脚本，您也可以只更改第二列中 img 元素的 src 属性。）

<!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>

【讨论】：

非常感谢！这对我帮助很大

【解决方案2】：

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

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

【讨论】：