WordPress.org

Ready to get started?Download WordPress

Forums

How to make table data a link (12 posts)

  1. kbaird62
    Member
    Posted 3 years ago #

    I am trying to use the wp- table reloaded plugin on my website to manage a table that changes frequently. It is a table of artists that is in alphabetical order. I like how the tool works, but need to understand how I can make each artists name a link to their website?

    Can you help me with that?

    Kevin

  2. TobiasBg
    Member
    Posted 3 years ago #

    Hi Kevin,

    you can simply use the "Insert Link" wizard for this. There's a button below the table text fields. You will be asked for the link text and the URL. The plugin will then generate the necessary HTML code and add it to the cell you want.

    Best wishes,
    Tobias

  3. transy68
    Member
    Posted 2 years ago #

    Tobias - VERY new to WordPress, but it's moving along OK. Started a website last week and I feel that I have some idea of what I'm doing.

    The problem je jour was making a nice table for my lists. I found your plug in and it looks like a good solution. One of the problems I'm having, however, is the same as you addressed, but I'm not sure about your answer. When I make the table, copy the short code and insert it into a page - all I see is the shortcode. The same on the visual part of the page. Therefore, I can't attach links. Without links, the table is not useful. You suggested using HTML code, and while that would take quite awhile - I would be willing to individually code each anchor - but I don't see code anywhere to let me add the anchors. Where do I find the code for the table? So sorry for the stupid question - but I'm learning.

    Also - I noticed you attached a amazon page (auf Deutsch) with a list of books, I'm assuming you like purchased for you. do we just go to this wish list page and make a purchase, pay for it and you get the book?

    Tom

  4. TobiasBg
    Member
    Posted 2 years ago #

    Hi Tom,

    thanks a lot for your question. Nice to hear that you found the WordPress project and use for your website!

    To get started (and just to be sure): Have you created a table and filled it with some data? That's obviously a prerequisite to use a Shortcode.
    (You can do that under the "WP-Table Reloaded" entry in the "Tools" section in the navigation bar on the left.)

    Now, when you then see the input fields for the table content, that's where you enter the HTML code for link (or simply use the "Insert link" button below the input fields).
    With this method, you build your table and fill it with data.
    Now your table has an ID, which you need to put into the Shortcode, and the Shortcode goes into the post/page of WordPress, where you want the table to be shown.

    You say that you only see the Shortcode on the "visual part" of the page. With that do you mean when you actually open a page to view it?
    Does this happen with the WordPress Default theme TwentyTen or did you already install a new theme? (If yes, please temporarily switch to the Default theme.)

    Can you maybe also provide a link to the page with the table/Shortcode? Thanks.

    Regarding the Amazon wishlist: You are correct. If you pick a book and pay for it, it will be delivered to me (my address is stored there).

    Regards,
    Tobias

  5. transy68
    Member
    Posted 2 years ago #

    Tobias -- vielen dank. I was looking for something to make the link on the pages. I can see how to edit the wp-table reloaded and it's pretty simple, really.

    I'm enclosing a link to the page I'm trying to use a table on. I've included two variations of tables. You'll notice yours is second. The first one isn't quite as neat - but it does have a pop-up when you put your cursor over the name. The next one is yours - and it looks much neater, but there is no pop up when you put your cursor over a linked nae.

    Under the B - I tried putting in an image - thinking that would be part of a pop up (it would be very nice if there were a pop up when you put your cursor on a linked name that shows the name and a small image). Anyhow, I don't mind this look too much - but the pictures are way too large. I used the thumbnail option when inserting the photo. I'm thinking that I could make much smaller pictures on my pc for this purpose and upload them to the media library.

    Any thoughts for completing this table?

    again - vielen dank, (and something will be on the way soon - you've made my life simpler)

    Tom

  6. transy68
    Member
    Posted 2 years ago #

  7. TobiasBg
    Member
    Posted 2 years ago #

    Hi,

    thanks for the link.

    That small popup is a so-called "tooltip". To achieve that in WP-Table Reloaded, you will need to modify the HTML code that is entered for a link:
    If you have something like

    <a href="http://www.example.com/">Link</a>

    you can a "title" attribute, which will then be the text of the tooltip. Just add it like this:

    <a href="http://www.example.com/" title="Tooltip Text">Link</a>

    Having images in those popups is not possible, unfortunately. You would need a much more complicated JavaScript solution for this.
    To decrease the size of the images, either make them smaller beforehand, or also decrease the width and height in the HTML code of the image. You should find "width" and "height" attributes in the code.

    Regards,
    Tobias

  8. jonkb
    Member
    Posted 2 years ago #

    Hi Tobias the great :)
    Is it possible to make a smal pop-up window from a table call-link?
    How can this be done?

  9. TobiasBg
    Member
    Posted 2 years ago #

    Hi,

    yes, but as I mentioned, you will need your own JavaScript code for this and manually add it to the links.
    Unfortunately, I don't have any examples for this, sorry :-(

    Regards,
    Tobias

  10. Kevin Peter
    Member
    Posted 2 years ago #

    Hi Tobias,

    I am using WP-Table Reloaded plugin in my site. Thanks for this fantastic plugin.

    I use following CSS and html to get pop-up window/tooltip which can show both text and images. No javascript is required.

    Just put the following css in your style sheet:

    a:hover {background:#ffffff;}
    a.popup span {display:none; padding:2px 3px; margin-left:8px; width:150px;}
    a.popup:hover span{display:inline; position:absolute; text-align:left; background:#ffffff; border:1px solid #333333; color:#000000;}

    To make the link to show text, use following code in the table:

    <a href="#">My Text<span>This is my tooltip message</span></a>

    To make the link to show image, use following code in the table:

    <a href="#">My image<span><img src="http://www.example.com/image.jpg" alt="" width="" height="" /></span></a>

    To see the demo, visit my broadband comparison site.

    Regards,

    Kevin Peter

  11. Kevin Peter
    Member
    Posted 2 years ago #

    Sorry, important correction in the html code:

    To make the link to show text, use following code in the table:

    <a class="popup" href="#">My Text<span>This is my tooltip message</span></a>

    To make the link to show image, use following code in the table:

    <a class="popup" href="#">My image<span><img src="http://www.example.com/image.jpg" alt="" width="" height="" /></span></a>

    Now, this will work

    Kevin Peter

  12. TobiasBg
    Member
    Posted 2 years ago #

    Hi,

    very nice solution, I like it! Thanks for sharing it!

    Best wishes,
    Tobias

Topic Closed

This topic has been closed to new replies.

About this Topic