HTML 超链接输出到 table

Question

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

我创建了带有超链接的上述 table，超链接在同一个 window/tab 中打开，但是我想在 table 的空白栏中打开它们。

你能提供一些帮助吗？如何将超链接的目标设置为 table 的第二列？

Answer 1

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

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

Answer 2

仅使用 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>

HTML 超链接输出到 table

HTML Hyperlink output into table

html

hyperlink

html-table