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):
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:
And the site should look like this:
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:
And your site look like this:
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:
And the site:
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:
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:
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:
And the site looks like this:
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:
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:
And if we apply it to the entire table, here’s the final code:
And here’s your final product!
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!
Posted in Uncategorized
Tags: #beyonce, #carlyraejepsen, #creatingatable, #imagefriendly, #interactivetable, #ladygaga, image, table, tables
list of references for the different colors that you can make the background. For example, if you want a dark fuschia- type color, you can use the tag”darkorchid”. 
And thats all there is to it! Have fun!
Is your website feeling a little bit bland? Do you need to grab your audiences attention? Or maybe, you want to add a little spice to your site with some moving text? Whatever the case may be, a Marquee tag is the answer to your prayers.
arielleross
ashleytang14
aswling
Amy Shih
caitmcm
camillaruiz
cashmanaiu
Jade Xiong
cindyrchen
Emily Tang
jamesjfan
jinayoo34
leonardjsantos
Miranda Kumpe
ryanott97
spikenlilli
syr0145
thesparhawkisairborne
Digital Composition DIY 
You must be logged in to post a comment.