Creating an Image-Friendly, Interactive Table

By Leonard Santos

There are many reasons to have tables on a website; they’re useful for organizing information and they can be great visual guides to conveying a point across. However, I think they can also be used as a fun way to comprehensively compare items, so here’s a guide on how to combine some of the current skills I’ve learned so far to create the most comprehensive tables ever.

Here’s a screengrab of the final product (showcasing three of my favorite modern artists: Carly Rae Jepsen, Lady Gaga, and Beyonce):

Screen Shot 2017-02-06 at 1.40.08 AM.png

As you can see, not only did I have to make a table, but I also had to put images within it and links! This is especially helpful when creating visual comparisons between different items and providing quick access to additional information found on other links.

Step 1: Let’s begin first by creating the actual table part of the table. An HTML table is defined using a <table> tag (which is super shocking), with each table row defined by the <tr> tag. If we want to make all of the categories I put above, the code should look a little like this:

Screen Shot 2017-02-06 at 1.43.10 AM.png

And the site should look like this:

Screen Shot 2017-02-06 at 1.44.00 AM.png

Step 2: As you can probably notice, there are no borders on the table, and it looks a lot more than a navigational header than the header for a table. To solve this, we’re going to use the CSS border property in order to get some divisional lines between our headers. Using the <style> tag, make the html look like this:

Screen Shot 2017-02-06 at 1.48.02 AM.png

And your site look like this:

Screen Shot 2017-02-06 at 1.48.38 AM.png

Step 3: Now that the header is completely finished, it’s time to begin working on the actual contents of the table! To input table data, just continue using the <tr> tag whenever you start working on a new row the <td> tag when you want to put data into the row in question. To clarify, put any words or information you want to include within the table cell between the <td> tags!

To fill in the space for the moment, let’s input all of the data with no images or links (we’ll get to that later, I promise).

At this point, the code should look like this:

Screen Shot 2017-02-06 at 1.52.58 AM.png

And the site:Screen Shot 2017-02-06 at 1.52.45 AM.png

Step 4: So here’s where the normal table tutorial ends and we begin adding the fun stuff within the table! Beginning with the photos, we have to use the <img> tag in order to insert images into the table. To do this, simply look up an image that you want to insert and copy the URL of the image down. After that, use src=”url” and just put the url in! Here’s an example of what that would look like in the code:

Screen Shot 2017-02-06 at 2.00.17 AM.png

You might notice that it says “width” and “height” in the code. Not surprisingly, those help define the width and height of the image. Here’s what it looks like on the site:

Screen Shot 2017-02-06 at 2.01.43 AM.png

Step 5: If we now fill in all of the blanks where it says “Photo”, we can now use that same exact code in the HTML to fill the entire table with code! It can now look like this:

Screen Shot 2017-02-06 at 2.03.38 AM.png

And the site looks like this:

Screen Shot 2017-02-06 at 2.04.35 AM.png

Step 6: Finally, it’s time to add those links to the end of each row. It’s actually fairly similar to how we put images into the table, but instead of image urls, we’re looking for the urls to these artists websites! In order to do that, we must use the <a> tag. If we use Carly for this example, the specific code would look like this:

Screen Shot 2017-02-06 at 2.08.11 AM.png

In this, the <td> tag defines that the link is the cell data, while the <a> tag defines what the link is. The words found outside of the URL, “Official Website”, actually acts as the hyperlink that will take a user straight from the table to website if clicked on.

That section now looks like this:

Screen Shot 2017-02-06 at 2.09.57 AM.png

And if we apply it to the entire table, here’s the final code:

Screen Shot 2017-02-06 at 2.11.12 AM.png

And here’s your final product!

Screen Shot 2017-02-06 at 2.12.07 AM.png

As you can see, you’ve taken what could’ve been a normal, boring text-ridden table and have made an image friendly, interactive source of information instead!

And that’s it! Best of luck with your table making, and try to listen to these great artists if you have the chance!

~ by leonardjsantos on February 6, 2017.