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>

I have created the above table with hyperlinks, the hyperlinks are opening in the same window/tab however I would like to open them in the blank column of my table.

Can you please offer some help? How do I set the target of the hyperlink to the second column of the table?

2 Answers 2

1

Using just HTML (and CSS) without client-side scripting, you would need to put an iframe element into the second column and make the links open in that iframe. (With scripting, you could alternatively just change the src attribute of an img element placed in the second column.)

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

0
-1

I think that what you really need it for the hyperlinks to be replaced with image tags, e.g.:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.