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>

我用超链接创建了上面的表格，超链接在同一窗口/标签中打开，但是我想在表格的空白栏中打开它们。

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

Answer 1

在没有客户端脚本的情况下仅使用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>

Answer 2

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

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

HTML超链接输出到表中

2 个答案: