Is it Possible for TD Not to Function as a Hyperlink?

I've exhausted all topics but nothing seems to be working for me! My goal is to have a table completely covered with anchor tags, but for some reason, it's not displaying any links within the TD elements, not even the text!

HTML

        <table border=1>
            <tr>
                <a href="1.php"><td>A</td></a>
                <a href="2.php"><td>B</td></a>
                <a href="3.php"><td>C</td></a>
            </tr>
            <tr>
                <a href="4.php"><td>D</td></a>
                <a href="5.php"><td>E</td></a>
                <a href="6.php"><td>F</td></a>
            </tr>
        </table>

CSS

            table {
            border-collapse:collapse;
            border:white;
            background-color:#0078ff;
        }

        td {
            font-size:50px;
            padding:50px;
            text-align:center;
            color:white;
        }

I'm stumped as to why it's not working. I even attempted:

            td a {
            font-size:50px;
            padding:50px;
            text-align:center;
            color:white;
            display:block;
            height:100%;
            width:100%;
        }

Any suggestions?

Answer №1

Try placing an a element inside a td and adjust your CSS accordingly to achieve the desired effect

SEE DEMO

table {
    border-collapse:collapse;
    border:white;
    background-color:#0099cc;
}
td {
    font-size:40px;
    padding:0;
    text-align:center;
    color:black;
}
table a {color:inherit; text-decoration:none}
table td a {display:inline-block; padding:30px}

Answer №2

a tags cannot contain td. To get around this, you can use a JavaScript workaround.

<table border=1>
    <tr>
        <td onclick="window.location.href='1.php'">A</td></a>
        <td onclick="window.location.href='2.php'">B</td></a>
        <td onclick="window.location.href='3.php'">C</td></a>
    </tr>
</table>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unforeseen Issues Arising from Media Queries

Trying out some new styling for different screen sizes based on the bootstrap grid system dimensions. Facing an issue where only certain styles apply while others don't seem to take effect. Here's a snippet of the CSS: @media only screen and ( ...

TinyMCE toolbar missing the "hr" option

I am encountering an issue while using TinyMCE as my editor. I have added the plugin as instructed, but I cannot find the "hr" button/option in the editor interface. If anyone has any insights or solutions to this problem, please share! This is how I am ...

A guide on how to select all child checkboxes when the main checkbox is checked in a React application

I am looking to achieve a dynamic check of the children's checkboxes when the main checkbox is checked, specifically using ReactJS. I have come across solutions on Stackoverflow that involve JQuery, but I want to implement this functionality in ReactJ ...

Incorporating a Bootstrap table within another table and adjusting the table height

I am facing a minor issue on my website. I am utilizing bootstrap 4 and within the table box, I have nested another table as shown in the image below. How can I adjust the height of the inner table to match the height of the box (td)? https://i.sstatic.ne ...

Ways to determine if a date matches today's date within a component template

I am currently displaying a list of news articles on the webpage and I want to show the word "Today" if the news article's date is equal to today's date. Otherwise, I want to display the full date on the page. Is there a way to compare the news.D ...

The ASP.NET MVC HTML5 Boilerplate's Content Security Policy is blocking all external scripts, including those that are supposed to be allowed

Recent Project: ASP.NET 4.5.2 MVC 5 HTML5 Boilerplate Google ReCaptcha (multiple NuGet packages tried) It seems like any content from external sources on the site under development is being blocked by the Content Security Policy. The Google ReCaptcha at ...

Adjust the size of the Error Validation message container

https://i.sstatic.net/e6Lor.png Once validations are added, the error message is displayed within the width of that div. How can I adjust the width to make the error message fit on a single line? Alternatively, if there are other methods for front-end val ...

Exploring the world of HTML and Javascript to enhance user search functionality

When I type in the search form, JavaScript is returning an error: "Uncaught TypeError: Cannot read property 'innerText' of null". I am working on a page with Bootstrap cards and trying to filter them by name. I attempted to access the "card-titl ...

What is the reason behind having a selectedOptions property rather than just a selectedOption?

Why does the selectedOptions property of select return an HTMLCollection instead of just one HTMLOptionElement? As far as I understand (correct me if I'm wrong), a select element can only have one selected option, so why do I always need to access it ...

Using AngularJS 1 and HTML, creating a modal within a modal or a hidden div that can be shown and hidden in a modal

I already have a modal set up that allows me to add information about "thing1", but I also need to include specific details related to that "thing1" within the same modal. These additional details should appear in the modal when I click on "add more spec ...

Updating the ghost image for HTML5 drag and drop functionality

I am facing an issue with a large div element that is too big for my liking. I have come up with a solution to change it by implementing the following code: <div draggable = "true" id = "ololo"> </div> var k = document.getElementById("ololo"); ...

Having trouble making class changes with ng-class

I am attempting to change the direction of the arrow in my checkbox by utilizing two classes with the assistance of ng-class. Unfortunately, it is not producing the desired outcome. Below is my code: Note: The angularJS CDN has already been incorporated. ...

Looking for assistance with implementing mouseover scrolling on an unordered list

I am attempting to create a scrolling effect on my UL element when the mouse hovers over it, but I am having trouble getting it to work. Here is the link to my fiddle: http://jsfiddle.net/MisterStorm/4ja9apqz/3/ and here is my code: $(document).ready( ...

When elements are arranged side by side without using floats, the alignment at the top is not correct

I am having trouble aligning multiple divs next to each other using inline-flex. They are not lining up properly on top (refer to the screenshot). Interestingly, if I remove the svg, the divs align correctly. ...

How to Resize Images in Internet Explorer and Firefox Using CSS

Having an issue with CSS formatting on Internet Explorer and Firefox. I am trying to create a navigation bar with several images displayed in a column, using a background image. I positioned the background image on the page and then created a div inside it ...

Issue with Ionic3: When using ElementRef nativeElement.getElementsByClassName, the returned collection is inaccessible

I've been following a tutorial on Ionic and directives, and everything seems to be working fine except for one thing. When I try to retrieve the FAB element using ElementRef's nativeElement.getElementsByClassName method, it returns undefined. Str ...

The parent of these inline-blocks does not adjust its width to match its children, even when the parent has overflow-hidden applied

This is the code snippet I have been working with: <!DOCTYPE html> <html> <head> <style> div.ex2 { background-color: lightblue; width: 110px; height: 110px; overflow: ...

Can images be accessed and displayed on an HTML page by opening a directory and reading file data using Javascript?

Is it feasible in JavaScript to access a directory, read an image file, and display it in HTML? While it may not be possible to directly open files in a directory using JS, I am looking for a way to achieve the following: I have an XML file that includes ...

Tips for preventing curved links in a radial tree diagram created with d3

I am currently utilizing this code to generate a radial tree diagram for my data. However, I am looking to make a modification to eliminate curved links. My preference is for linear connections instead of curved ones as the curved links can make the visual ...

Vuetify's scrolling list feature allows for smooth navigation through a list

Check out my Vuetify code snippet that utilizes a list: <v-list> <v-list-tile v-for="user in users" :key="user.id" avatar @click="" > <v-list-tile-content> < ...