Hey. Follow us and stuff.

Look how social we are.

 

Making tables without looking like an idiot

7/7/12 4:40pm
tl;dr

DISCLAIMER: Any remarks of me calling you an idiot or demoralizing your intelect is just part of making this blog a bit more entertaining. Just enjoy the read...if you can.

Here's a Table of Contents in case you want to skip through:

  1. The Basics (Making a table, preparing it, header usage, Pixels vs. Percent)
  2. Inserting images (Thumbnails, cell spacing/padding, blog showcasing, galleries)
  3. Tableception (Inserting a table within a table - for advanced users only!)

Editor's Note: If you're looking to make a name for yourself as a g1 blogger, this is some of the best advice you could possibly use. Although I think Google Chrome works just as well as Fire Fox. But that's just me. ;)

This site sickens me. Ouch, did that hurt? Of course it did, because I for one am a loose cannon tonight. The Jetman has unlocked himself to become none other than the Imaginer, the man who speaks his mind and doesn't give a F*** about your feelings. Because the world needs a man like him, especially when it comes to the world of ScrewAttack blogging.

When I feel like it, I will tell you little buggers to listen, and listen well, as once in a while I'll be snorting out a blog like this to teach you the true way to make your blogs look not only awesome, but to also reach the skies above in terms of presentation and quality. Because I had enough of image hotlinking and poor utilization of the tools available to you.

Let's go to nitty gritty stuff: if you haven't already, check the tutorials found here, here, and most especially here. These are crash-courses brought to you by none other than the ScrewAttack HQ staff themselves, namely the man with the backwards hat Stuttering Craig and the Emperor of Kings Sean Hinz himself. Also be sure to pop open a bottle and read this other blog by g1 Ferret75 so you can really push your skills to bigger heights.

Have you watch/read them? DID YOU? NO? I SAID READ THEM!! I can wait. Look, I'm a piece of text here, it's not like I'm going to hurt you...ALRIGHT! Time for what people came here for...

 

HOW TO MAKE TABLES WITHOUT MAKING YOU LOOK LIKE AN IDIOT

Seriously, I see so many people trying hard to understand tables that they just can't do it RIGHT. IT'S NOT ROCKET SCIENCE, MI AMIGO. You wanna make awesome tables? Then let's get it done already!

 

Before you begin your crusade of total table domination, be sure to use a proper internet browser. Google Chrome is known for having SERIOUS problems in table designing, so use Mozilla Firefox instead. Internet Explorer and Safari should be avoided at ALL costs, even if you're not making blogs. Also, be sure to see if you got the Drupal rich-text editor on. If not, Email Craig.

 

NUMERO UNO: MAKE A DAMN TABLE!!!

Well, duh. You need to make a table already, do you? Well how do we make one? Simple. In rich-text mode (assuming of course you hit that "Switch to plain text editor" link by accident, JUST LIKE ANY IDIOT WOULD), there's a Word-esque toolbar at the top where you can find all the little gizmos. The first one of the last four buttons at its right is the the Tables button. Click it. Now you got something like this:

 

 

For the purpose of this tutorial, the Caption and Summary areas should be left alone - they do little other than be a burden to what we want to accomplish. What we want to focus our attention on are the other areas:

  • Rows: How many rows do you want? (Horizontal)
  • Columns: How many columns do you want? (Vertical)
  • Headers: Do you want a header on the first row or column?
  • Border size: How thick do you want the borders? (Pixels; a 0 means no borders)
  • Alignment: Where you do you want that table to be aligned? (Left, Center, Right)
  • Width: The overall width of your table. If left blank, it will change as content is added.
  • Height: The overall height of a table. It's usually wise to leave this one in blank.
  • Cell spacing/padding: How big do you want the margins inside and/or outside cells. Learn to use this wisely.

Alright, we got this out of the way. But you're questioning yourself and scratching your head, then finally ask the question: WTF? THIS IS TOO MUCH WHY DO I NEED THIS?!

For a lot of reasons, to be quite honest.

 

NUMERO DOS: PREPARE THE TABLE, FOOL!!!

So yeah, that window is open, now what? Well, you need to prepare the damn thing! What exactly do you need? Well, the way I teach things here is via examples. Suppose I want to make something a bit...simple. Say I want to make some credits to show people where to find me around the interwebz. Thing is, I need 'em to be tidy and be able to give each part of it a different format. Well, I got 3 handles: Twitter, Google+, and of course, Steam. So how do I make them into a table? Okay, that's easy.

Three handles mean three rows, and since I need an extra column to put in my links, that means 2 columns. So our settings should look somewhat like this:

  • Rows: 3
  • Columns: 2
  • Headers: None
  • Border size: 1
  • Alignment: Center*
  • Width: 500 Pixels*
  • Height: <blank>
  • Cell Spacing: 1
  • Cell Padding: 1

* Notice that where the asterisks were added are the places where the settings were changed. The default settings for Width and alignment are 200 pixels and <Not set>, respectively.

 

The end result is this:

 

   
   
   

 

Now if you don't like borders you can remove them by changing the border size down to 0, which means a transparent border. We can further blur that line by removing any cell spacing/padding by also lowering them down to 0. Now each cell can be individually formatted, meaning you can make the left boxes left-aligned and the right ones right-aligned, making this cool effect inside the table:

 

TWITTER: JETZacx
GOOGLE+: Jetz Imaginer
STEAM: JETZ.acx

 

I assume, of course, you know that you can hyperlink text by highlighting them then clicking on the hyperlink button on the toolbar so you can add the link you desire? OHWAIT you're such an idiot.

 

Now let's talk about headers here while experimenting a little with another example. Say I want to make a list here, each with its own header. Like, I got this nice little schedule here of all the stuff I need to do on each day that I wanna keep up with in a table. Where is it...Ah, here it is:

  • Mondays: Go to work, computer, video games, food
  • Tuesday: Free at last, computer, anime, food
  • Wednesday: Go to work, Sidescrollers, movies!, food

Please don't judge, this is just my imagination at work once again. But hey, can't we organize this in a tidy schedule? As I can see, I have 3 days with 4 things to do each time. Now I didn't add times on each but I did have them for each event just in case I'm a stupid moron who just can't live his life without working with a clock. Well here's where our math comes in.

To make a properly-labeled table, you will have to add 1 more row and column into each entry found on your personal list. So my 4 things to do becomes 5 rows, and my 3 days become 4 columns. So yeah, let's  put the following settings:

  • Rows: 5
  • Columns: 4
  • Headers: Both
  • Border size: 1
  • Alignment: Center
  • Width: 500 Pixels
  • Height: <blank>
  • Cell Spacing: 1
  • Cell Padding: 1

With these settings, you should get a table like this:

 

       
       
       
       
       

 

Now you fill in all the goodies inside as you see fit:

 

DAY/HOUR MONDAY TUESDAY WEDNESDAY
8:00 AM Go to work Free at last Go to work
10:00 AM Computer Computer Sidescrollers
2:00 PM Video Games Anime Movies!
5:00 PM Food Food Food

 

(Don't worry if the table stretches as you add info - it's just the blog's way of wrapping stuff around)

 

See how the first row and column are slightly different from the rest? But then there's a thing that you can also notice...the table isn't exactly the same width as the entire blog space. And when you want to do something PROFESSIONALLY, that's a complete no-no. So here's some bonus points.

 

PUNTOS DE BONO: PIXELS VS. PERCENT

What's the big deal about it? Well, here's what. With pixels, you can pinpoint exactly how big you want a table to be. It's extremely useful for, say, inserting images or something like that. Percent, though, is a bit more convenient, as the table will automatically stretch to full size of the entire blog width if it's 100%. Why? Say we get a V6 on the site all of a sudden and instead of having a blog width size of 590, we get, I dunno, 600. A fixed width on a table will just look...off when the transition comes in.

So that's why percent is so important. Let's grab that last table and change it to 100 Percent instead. Here's the result:

 

DAY/HOUR MONDAY TUESDAY WEDNESDAY
8:00 AM Go to work Free at last Go to work
10:00 AM Computer Computer Sidescrollers
2:00 PM Video Games Anime Movies!
5:00 PM Food Food Food

 

See how the table now extends all the way from side A to side B? Beautiful!

 

QUICK NOTE: Figure out when you really need tables and use them wisely. Don't use tables unless you feel that they will legitimately make your blog pop out more - it's better to use tables professionally where they can really help instead of randomly using them just because JETZ.acx is using them. And if you do that, I'll shoot you off right in the face!

 

MAKING USE OF TABLES WITH IMAGES PROPERLY WITHOUT PRATFALLING IN THE PROCESS

So you got the basics of how to make a good table, so now what? How about we get into inserting images into tables? That's what you're here for, amarite? Well first off let's think about where you want to put those images first. Well for starters we need an image - so let's get my good friend Kyubey to help me out.

 

Before we start, I want to stress the importance of evading the practice of hotlinking. DO NOT GRAB LINKS OUT OF IMAGE SEARCHING PAGES LIKE GOOGLE, YAHOO, BING, ETC. Find its original source, save the image to your computer, then upload them somewhere else in a separate image hosting service like Photobucket or Imageshack. You'll thank me later.

 

NUMERO UNO: THUMBNAILS!!

 Alright, where was I? Ah yes! Kyubey! Come over here!

 

 

So say this is going to be some sort of thumbnail for an explanation I want to give about why Kyubey's an interesting character. The typical thing here, of course, is to just write the caption below, like I'm doing right now, but what if I want to add it in a table, on the left side, while adding text on the right? Well here's how you do it.

Prepare a table with only 1 row and 2 columns, 100% width, and no border. Now on the left side, you must insert an image, but you must resize the image just enough so that it can allow text on the right side. In my case, I want to have at least 400 pixels left to write text, so let's resize the image to about...190 pixels. Here is the result:

 

If you are a girl with low self-esteem or with a deep desire of something, chances are you will encounter this creature. Striking a deal with Kyubey for a wish may sound tempting, but girls might pay the ultimate price living their lives as Puella Magi.

 

(BTW the shadow borders can be added when you select an image and choose "bordered image" on the style drop box at the toolbar)

 

If we experiment a little with cell spacing/padding, we can make the letters move a little farther from the image. Here's what happens to the top table when you add a 5-pixel padding:

 

If you are a girl with low self-esteem or with a deep desire of something, chances are you will encounter this creature. Striking a deal with Kyubey for a wish may sound tempting, but girls might pay the ultimate price living their lives as Puella Magi.

 

Now here's something some people are wondering: how do you make these awesome thumbnail-with-description tables you often use on showcase blogs? Well that's...easy. See, each blog has a designated thumbnail that you can simply grab and put in here without an issue. If you want to do something like this, it'll take you some time, but the payoff is sweet.

First, you'll need the thumbnails themselves. Get a blog you want to showcase - in my case, I'll showcase two of the latest I wrote - then right-click its thumbnail. In Mozilla Firefox, it's "Copy Image Location"; in Google Chrome, it's "Copy Image URL" (although I do suggest sticking to Firefox at this point).

 

MOZILLA FIREFOX GOOGLE CHROME

 

Now you need to make a table to showcase the blogs; in my case I'm showcasing two, so it'll be a 2 row x 2 column table with a 1 pixel border and 100% width. On the left side, I'll simply paste the image as-is as it's just the right size for a caption on the right side (150 pixels). So the result should look like this:

 

Check out my Top 10 Controllers! People often complain about me leaving out the N64 controller, but hey, it BARELY got cut.
Also check out my Top 5 Awesomeness and Idioticies of E3 2012. Shameless plugs FTW.

 

Add captions, hyperlinks, and whatever you like...and boom, there's your thumbnail table right there!

 

NUMERO DOS: GALLERIES!!

This one is a bit trickier, and I can understand if you don't want to use this technique because mortals can only go so far. (OHWAIT, that's what Darkhyrulelord used to say.)  See, to make a gallery out of your images...it can take some time. We don't have the nifty tools from ScrewAttack to make thumbnails out of the blue, so we're just going to have to do them ourselves. Or do we? Well we CAN do some hocus-pocus here without doing much work...though this could just throw out all professionalism out of the window. Meh, at least it's easy enough.

First off, we need a gallery. In this case, I'll be using a gallery from one of my past blogs here on ScrewAttack - the SNES Anniversary series. (Go check 'em out if you haven't - I wrote those with my heart on a stick, with blood dripping down as my ink...okay, not really, but you get the point) The screenshots make perfect thumbnails, so we're going to use them here.

In this scenario, I'll be using 10 images for my gallery, 5 for each row. So we'll need a 2x5 table to start things up, making sure that the cell spacing and padding remains in 0. Next, we need to know how big do we want the thumbnails. If the maximum width of the blog is 590 pixels, then we need to resize each screenshot so it can fit in that space. so 590/5 = 118 Pixels. So each image should be about 118 pixels wide in order for this to work, although with bordered images it could spill over a bit, so we will dock a few pixels down to 110. Make every image centered, and here is the result:

 

 

DAMN even I got to be proud of this set of images. But we're not done yet. Using each of the images links, we will hyperlink them so that when you click on them, you get the larger, 100%-sized version of each. (Well kinda. These are emulator-snapped pics. Boo-hoo.) So click each of them and then insert the links just like you would on text. (Neat trick: right-click them and hit "Image properties" so you can grab the link right off the bat. This only works if you're not using a separate set of thumbnails for each image) With that, you got yourself a gallery! Then again, you can also use this trick to load thumbnails with links to other pages or blogs around the site...experiment a little, who knows! Not that your brain allows you to...

 

TABLECEPTION: YO DAWG, I HEARD YOU LIKE TABLES, SO WE PUT A TABLE IN A TABLE

WARNING: This is for advanced bloggers only!! I suggest practicing with the examples above first before diving into the depths of Tableception!

A table, in a table? How can this be possible? Well it is! You can actually insert tables inside other tables for a number of purposes. Now this one is a little advanced and I don't expect lousy amateurs like you to understand this (hell even the Imaginer himself is still having a hard time wrapping it around his head), so if this is too complicated for you, just move on and forget about this. But it's here and just because I CAN, I WILL.

 

NUMERO UNO: THUMBNAIL FOR A TABLE

I want to start out with an idea. Let's bring something like a compare-and-contrast idea in which I want to compare two controllers that many people have a hard time deciding: the Xbox 360 Controller and the PS3 Dualshock 3 controller. I want to showcase both the pros and cons of each, but I'd also want to add an image to the left as a thumbnail. I also want a single cell for each pro/con list instead of multiple cells for each bullet on the list, with the top cell having the purpose of a header.

 

...sounds...extremely complicated, amarite? (I told you this wasn't going to be easy.) Alright, how about we do this one step of the way. First, we need a table to start what I like to call the base project. This should be a 2x2 table, 100% width, in which I can adjust the left side to add the thumbnails I want. It is advisable that said table does not have any spacing or padding whatsoever.

 

   
   

 

Now I want that table to be transparent because it's not my main table; the main tables will be the ones containing the pros and cons of each controller. (We'll keep them visible until the end result is shown.) So we'll start by adding in the images on the left cells first:

 

 
 

 

Now that we got that out of the way, we'll add two more tables on the cells to the right, both 2x2 and with a width of 440 pixels (590 minus 150, the width of the thumbnails):

 

   
   
   
   

 

Now let's add in the pros and cons as we see fit, put the base table transparent and VOILA, here's your first tableception:

 

 PROS: CONS:
  • Decade-strong design
  • Responsive D-Pad
  • Integrated Rechargeable battery
  • Pressure-sensitive buttons
  • May be small for some gamers
  • Poor analog trigger design
  • Short battery time
  • Analog stick placement
 PROS: CONS:
  • Hefty, ergonomic design
  • Concave analog sticks
  • Responsive analog triggers
  • PC-compatible
  • Poor battery pack design
  • Unresponsive D-pad
  • Not-so-durable analog sticks
  • Rechargeable batteries sold separately

Note: ignore my Pros and cons here - I just wrote them out of the blue.

 

NUMERO DOS: THUMBNAIL IN A PARAGRAPH

Now here's another cool example in which Tableception occurs. Let's say I want to give some awesome profile about a g1 (say, yours truly) but I want the text to wrap around the image like in MS Word or something like that. Normally you can't do such a thing on typical text, as the end result would be something like this:

You wanna talk about ScrewAttack? YOU WANNA TALK ABOUT THE SCREWATTACK?! Well the Jetman has something to say about the New ScrewAttack.

You see, this man right here might be one of the newest g1s out there [...]

 

See how the text is all the way down there and not at the top of the image, as we would want? Well with Tableception, we can do just that. First off, we need a single-cell table (that is, a 1x1 table) with 100% width and zero transparency and no spacing or padding whatsoever. (For the purposes of explaining, this one will be visible)

 

 

 

Before we add in the image, we will add in the text inside the box:

 

You wanna talk about ScrewAttack? YOU WANNA TALK ABOUT THE SCREWATTACK?! Well the Jetman has something to say about the New ScrewAttack.

You see, this man right here might be one of the newest g1s out there [...]

 

Next up, we shall add another table, from the start of the paragraph, aligned to our left in which we want our image to be placed. A variable width table (which means leaving the text box blank) should be nice, but start with the default 200 pixel size in order to have somwhere to put the picture in. And so, we got this:

 

You wanna talk about ScrewAttack? YOU WANNA TALK ABOUT THE SCREWATTACK?! Well the Jetman has something to say about the New ScrewAttack.

You see, this man right here might be one of the newest g1s out there, a man who got hooked up with so many Top 10s, VGVs and company controversies that he joined in just a year ago to share with the community, but don't you ever think for ONE SECOND that the Jetman is not a force to be reckoned with. No, no. Here you are seeing a man who saved galaxies and collected treasures in more imaginary worlds that you could ever imagine in 24 hours straight! This is a man that can put on a multi-purpose jacket with infinite possible weaponry, from some twin magnum guns to a FUCKING BAZOOKA, over a damn portable jetpack that doubles as a fricking power armor!  [...]

 

Experiment a little with the picture because it might not look nice the first time around. In this one, I simply put a spacing/padding of 5 pixels in order to put the text a little further from the image itself. With that, we remove the borders, and this is the end result:

 

You wanna talk about about ScrewAttack? YOU WANNA TALK ABOUT THE SCREWATTACK?! Well the Jetman has something to say about the New ScrewAttack.

You see, this man right here might be one of the newest g1s out there, a man who got hooked up with so many Top 10s, VGVs and company controversies that he joined in just a year ago to share with the community, but don't you ever think for ONE SECOND that the Jetman is not a force to be reckoned with. No, no. Here you are seeing a man who saved galaxies and collected treasures in more imaginary worlds that you could ever imagine in 24 hours straight! This is a man that can put on a multi-purpose jacket with infinite possible weaponry, from some twin magnum guns to a FUCKING BAZOOKA, over a damn portable jetpack that doubles as a fricking power armor! Who are you talking to? You're talking to the one who's gonna take you to space, man...where no air can be breathe, no gravity can pull you, where the sun can easily fry your entire body with its unprotected solar radiation...cuz to think you can outsmart the Jetman, the Legendboy, the Imaginer, the MAN with the BIGGEST IMAGINATION OF THE ENTIRE WORLD!! ...except that purple dinosaur that we all love to hate...

IT TAKES A LOT OF GUTS, MA FRIEND!!

GUTS, I TELL YOU!!

So what if...and this is just a what if...I were a civilizied person, someone with an average mind, a guy who speaks what he sees, who plays video games while chatting around the net while living in his parents house all while taking care of his studies, both in and out of the classroom...I would be an awesome friend to hang out with and chat, and is willing to make great sacrificies to help you out in the need. Yeah, I can be sociable and even kiss and hug you to share the love.

But nope, no...the Jetman isn't that guy. He's a monster, a man who will tear you apart, a man who CAN go to a convention and tear you apart without cheat codes, a man who uses a nickname from another g1 WITHOUT HIM KNOWING IT AT ALL, a man who is seeking Roses where he can only find Outcasts, a man who desires nothing more that the utmost respect and dignity. As for you my friend...prepare yourself, because the Jetman is blasting off, and he's taking you for a ride.

 

CONCLUSION - AKA THE PART WHERE YOU LEARN THAT THIS IS NOT FOR THE FAINT OF HEART

I don't expect you to immediately know how to make tables after reading this. In fact, my way of teaching is extremely overwhelming, to the point that you will have so much in your brain that you would literally know nothing in the end. So the best piece of advice I can give to anyone out there who wants to be a mean blogger: EXPERIMENT. EXPERIMENT. And most importantly, EXPERIMENT HARDER, FOR SCIENCE! Look at your tools and see what else you can do in that little blog of yours, and push its boundaries to the limit. The best way to do so is to prepare a little sandbox blog, unpublished, in which you simply test stuff and see the results. Each time you save a blog unpublished you get to see a preview of your current work on the actual blog, and once you see a technique that you might find useful for your next blog entry, learn it and use it (or simply grab the code). It helps to know a bit of HTML coding to do all of this, but even without much knowledge you can still do a lot with this little. Also remember: this is ONLY if you think tables can help make your blog look better. I wouldn't recommend using them for news posts or blogs containing a few paragrahs of text, for instance.

Then again, you're lazy and don't want to deal with anything other than simply writing and hotlinking pictures out of the web...which means you're still an amateur. Good luck trying to impress the guys up above for a front page! MWA HA HA!!

 

JETZ.acx signing off!

More wicked cool stories and video from around the web. Got tips for us? Tips@ScrewAttack.com

g1 Discussions

Use a Facebook account to add a comment, subject to Facebook's Terms of Service and Privacy Policy. Your Facebook name, photo & other personal information you make public on Facebook will appear with your comment, and may be used on ScrewAttack's media platforms.

ScrewAttack Classics

Modern Warfare 2 Trailer...

Made popular in 2009

The Salsa Eating Challeng...

Made popular in 2008

Ben's April Fools Ha...

Made popular in 2011

Top Ten Douchebags of Gam...

Made popular in 2007

Clip of the Week - Super...

Made popular in 2009