Add a hyperlink alongside every row in the table

Question

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.

html css

Answer 1

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

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 3

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 4

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 5

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>

Answer 6

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

Add a hyperlink alongside every row in the table

Answer №1

Answer №2

Answer №3

Similar questions

Unable to attach the event listener for the 'onchange' event to a div nested within a ul element

Issue with jQuery DataTables column.width setting failing to meet expectations

I'm curious as to why the web browser is showing a timestamp below the image I have on my HTML page

Is there a way for me to align my div with my header on the same line?

Is it possible to apply capital spacing in CSS for OpenType fonts without using font-feature-settings?

Updating the logo image on mobile devices using responsive CSS styling

Using jQuery AJAX to preload GIF images for CSS background-image loading

Embed HTML code to a website using a PHP script on a separate webpage

The event listener is failing to trigger the JavaScript function upon click

CSS Priority - determining the ultimate winner

Edge and Internet Explorer fail to recognize the :focus CSS selector

React Navigation Item Toolbar Misplacement

Is it possible to display a variety of color schemes in just one console.log()?

Missing sidebar display

The userscript will keep the window open as long as it remains inactive

Utilizing SEO and incorporating special characters like !# in a website's URL

Is It Always Necessary to Specify a Width and Height for an Image?

I am looking for guidance on removing the bottom line from the ionic 4 segment indicator. Any advice or tips on

Having issues when dynamically adding options to a multiselect dropdown

Using Jquery to loop through a function for every select box that is added dynamically