Add a hyperlink alongside every row in the table

My table comprises three columns in each row, and I am looking to include a link next to each row.

<table>
    <th>
        Name:
    </th>
    <th>
        Price:
    </th>
    <th>
        Description
    </th>

    <?php while ($row = $foods->fetch()) { ?>
        <tr>
            <td>
                <?php echo $row['Name']; ?>
            </td>
            <td>
                <?php echo $row['foodPrice']; ?>
            </td>
            <td>
                <?php echo $row['foodDescription']; ?>
            </td>
        <a class="editLink">roma</a>
        </tr>
    <?php } ?>
</table>

I attempted to place the link a following the last td, but it appears at the top of the table instead. Thank you in advance for your help.

htmlcss

Answer №1

Make sure to include a table cell for the link and ensure that the th tags are nested within a tr tag.

<table>
    <tr>
        <th>
            Name:
        </th>
        <th>
            Price:
        </th>
        <th>
            Description
        </th>
        <th>
        </th>
    </tr>

    <?php while ($row = $foods->fetch()) { ?>
        <tr>
            <td>
                <?php echo $row['Name']; ?>
            </td>
            <td>
                <?php echo $row['foodPrice']; ?>
            </td>
            <td>
                <?php echo $row['foodDescription']; ?>
            </td>
            <td class="link"><!-- Don't forget this -->
                <a class="editLink">roma</a>
            </td><!-- also this -->
        </tr>
    <?php } ?>
</table>

To customize the style of the link cell, apply a CSS class of link to the td containing the a tag. Then define the styling in CSS as shown below:

CSS

table{
    text-align: center;
}

td{
    width: 200px;
}

td.link{
    width: 50px;
}

View the Working Example: http://jsfiddle.net/y9C3G/

Answer №2

Having an <a> tag directly inside a <tr> is not considered valid HTML. To correct this, add another column to the table and place the link in its own cell. You may also want to consider adding another <th> in the first row or using the attribute colspan="2" for the Description column.

Furthermore, it is recommended that a table includes a <tbody> element, and I recommend organizing your header cells within a <thead>:

<table>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Answer №3

<tr>
    <td>Custom Text</td>
    <td>Custom Text</td>
    <td>Custom Text</td>
    <td class="myNewLinkClass"><a href=""></a></td>
</tr>

<style>
    .myNewLinkClass {
        width: 150px; /* Adjusting the width for td with new class */ 
    }
</style>

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

When we typically scroll down the page, the next section should automatically bring us back to the top of the page

When we scroll down the page, the next section should automatically bring us back to the top of the page without having to use the mouse wheel. .bg1 { background-color: #C5876F; height: 1000px; } .bg2 { background-color: #7882BB; height: 1000px; } .bg3 ...

javascripthtmlcss

What is the best way to create an interactive menu icon that includes dropdown options using MUI menu features?

i am looking to create a component similar to this https://i.sstatic.net/fwIB0.png currently, I am utilizing a material UI pop menu in my project below is the JSX code snippet <div className="navMenu" style={{ position: "relative" ...

cssreactjsmaterial-uipopup

Tips for executing a Python function from JavaScript, receiving input from an HTML text box

Currently, I am facing an issue with passing input from an HTML text box to a JavaScript variable. Once the input is stored in the JavaScript variable, it needs to be passed to a Python function for execution. Can someone provide assistance with this pro ...

javascriptpythonhtmlrobotframework

A Guide to Overflowing Text Above Divs - Even When the Parent Div has a Width of 0%

My webpage, built with Bootstrap 4, features a row with three divs placed horizontally. The divs have different percentage widths and sometimes the center div's width is set to 0%. However, I need to ensure that the text within the 0% div is always v ...

cssflexboxbootstrap-4

Using Handlebars JS to incorporate HTML tags such as <li>, <br>, and more in your data

Is there a way to use handlebars to display a list of data in an unordered format, with "title" and "articles" as the main categories? The issue arises when some of the articles contain HTML tags, such as <a> for links. In my current code, instead of ...

javascriptjqueryhtmlhandlebars.js

Can fputs() or fwrite() encode HTML special characters at times?

I have encountered an issue where I am outputting HTML content as a string to an HTML file, but some servers are encoding special characters (for example " becomes \&quot;). Even after using the htmlspecialcharacters_decode function, the problem p ...

phphtmlstringcharacter-encodinghtmlspecialchars

Modifying .vue files within Laravel seems to unexpectedly impact unrelated CSS styles

I've been working on a Laravel project that involves building Vue components. Strangely, every time I update a .vue file and add it for a commit, modifications are also made to the app.css and app.js files. These changes seem to be undoing a particula ...

javascriptcsslaravelvue.jsnpm-run

Support for these CSS properties of left: 0; and right: 0; are compatible with

Just wondering if it's okay to utilize the CSS code below to ensure the element adjusts to its parent's width. .element { position: absolute; left: 0; right: 0; background-color: #ccc; border-top: 1px solid #ddd; } We don&ap ...

htmlcss

Issues with AngularJS ng-bind-html failing to display list items

I am working with a basic HTML document that looks like this... <ol> <li><strong>Test 1</strong></li> <li><strong>Test 2</strong></li> </ol> ...and I am attempting to connect it to a div ...

javascripthtmlangularjsng-bind-html

Using single-line ellipsis with the Material-UI select and option components

I have a TableHead Component with multiple columns. Among them is a <Select> element that allows users to filter the table content based on one of four statuses. I am trying to implement an ellipsis at the end of the option string if it exceeds its c ...

cssreactjsmaterial-ui

Retrieve a specific element using BeautifulSoup

Looking at this html structure found in a bs4.BeautifulSoup: <div class="bordered radius border-color-ui-2 bg-white h-100"> <a href="#" class="box-card-link-wishlist" role="button" aria-label="Adicion ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

Unable to display background image on Webpage due to blank page issue while uploading it with HTML and CSS

I've been attempting to build a webpage with an image as the background, but I seem to be facing some issues. Instead of seeing the desired image, all I get is a blank white page. The folder named "images" is located in the same directory as my HTML a ...

htmlcss

Updating the CSS style of an inner DIV using JavaScript

Can you provide guidance on how to modify the background color using JavaScript for the different styles listed below? i) Internal Style sheet and/or ii) External Style sheet I am currently working with the card deck slide show available at https://githu ...

javascriptcssbackground-colordivision

Issues with the functionality of Angular 2 routerLink

Unable to navigate from the homepage to the login page by clicking on <a routerLink="/login">Login</a>. Despite reviewing tutorials and developer guides on Angular 2 website. Current code snippet: index.html: <html> <head> ...

htmlangulartypescriptroutes

What Is Preventing Fields from Being Filled in the Drop-Down Menu?

Looking to achieve this outcome: https://jsfiddle.net/nstruth/t0dopzav/1/ The issue I'm facing is that the HTML appears correctly when Volvo is selected, but the JavaScript is not functioning as expected. Despite reviewing similar innerHTML JavaScrip ...

javascripthtmljquerycssjquery-select2

Utilizing LESS for Mixing

I've been diving into the official LESS documentation (version 1.5) and I'm struggling to grasp how I can import a reference to another CSS file to utilize its content in my own stylesheet. For instance: stylesheet.less @import (reference) "boo ...

csstwitter-bootstraplessmixins

Positioning and resizing elements based on varying screen sizes and levels of zoom

I recently designed a basic webpage using HTML with two main elements - a chat window for user interaction and a chart.js plot. Here is a snippet of the HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

htmlcss

Placing images inside a div causes them to vanish

I encountered a strange issue where the images I added to a background disappeared. .Background1{ position:relative; top:0%; left:0%; height:100%; width:100%; content:url("/assets/backgroundlayer1.jpg") } .Background2{ posi ...

htmlcssangular

How to navigate to the "not now" button in Instagram notifications with Selenium and Python

I'm currently working on a custom "Instagram bot" to log in to Instagram. Although I've managed to bypass the login screen, I'm encountering an issue with a popup message that says: https://i.stack.imgur.com/OMA6h.png from selenium import we ...

pythonhtmlseleniumbotsweb-deployment

What is a way to center content vertically without using extra containers?

I've been facing challenges in vertically aligning an item within its container. Despite trying multiple suggestions that advise wrapping the content in another div or container, I encountered various issues which I won't delve into. Therefore, ...

htmlcssflexbox