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!

Advertisements

~ by leonardjsantos on February 6, 2017.

10 Responses to “Creating an Image-Friendly, Interactive Table”

  1. Most thoughtful- Leonard used fun and prevalent images to make the post more visually engaging. Using public figures instead of generic stock images made the lesson a little more easy to remember. Each step was also outlined painstakingly. -Judy Gu

  2. I think this is the best overall instructional blog post because it provided step by step instructions with the code and the corresponding changes in the table which made it very easy to follow along.

    — Stanley

  3. Most Engaging – Leonard, your writing voice is clear and concise, and coupled with an engaging use of images, makes for a very charming and appealing tutorial.

  4. Best overall. You have very well explained the use of tables tags and the blogs is very easy to read.

    Jigna

  5. I am awarding this as the best overall. I did the same table on my own website, but I thought you explained it very well. Not only did you show us how to create a table, but you showed us how to create a table with style.

  6. I believe that this DIY is the Most Thoughtful. Tables have been something I’ve struggled with while learning HTML, and incorporating images makes tables that much more complicated for me. This tutorial provided great step by step information that clearly describes the process of including images in your tables, as well as describing what each tag does and maintaining a friendly tone. – Anastasiya Muravyeva

  7. I think that this is best overall! Not only did it show how to use a table, it showed you how to do many other things as well. It was clear, concise, and I liked the theme of musicians! It was engaging and informational

  8. The best overall! Most detailed and more intricate! I don’t know if il ever use table but your explanation will be helpful for all

    Mike

  9. It is most thoughtful because table is always something that make the page have a good structure and the author also shows how to upload images and other things in this post

  10. This DIY is the best overall! It had attributes of being thoughtful and engaging. It was thoughtful because I was able to easily follow the steps clearly and concisely. While it was engaging because the tone of voice that was picked up through your use of writing was friendly and made you want to try it on your own website as well.

Comments are closed.

 
%d bloggers like this: