GameBanana shows no ads to members. Sign up now!
Ads keep us online. Without them, we wouldn't exist. We don't have paywalls or sell mods - we never will. But every month we have large bills and running ads is our only way to cover them. Please consider unblocking us. Thank you from GameBanana <3

Making Tables with HTML

A Tutorial for GameBanana

!!!NOTICE!!!
May 24, 2014
I wrote this tutorial years ago, and while the code still works and my words are still true, the formatting on this website has changed drastically since this tutorial was originally written. I don't have the time to recode everything but I've made it as legible as possible. Apologies for the eye strain.

-YellowJello
Table of Contents
  1. Introduction
  2. Tables
  3. Cells
  4. Advanced Tables
  5. Summary

Introduction There are a few other tutorials here on FPSB that show you the HTML code for tables, but they do not go anywhere beyond that and they also do not show you how to change certain pieces of the tables either. This tutorial is here to teach what these tables are, how to use them, and how to customize them. This is not duplication, this is expansion.
    What Are Tables?
    • Tables are very similar to fieldsets in that they form boxes on your screen but the main difference between the two is that boxes can be segmented into cells (explained later on) in order to separate two pieces of information or anything like that. In other words, tables made with HTML are essentially the HTML equivalent of the cells that you see when you use Microsoft Excel.
    Why Use Tables?
    • Tables are great for when you are typing up something like what I have in my studio's first collaborative tutorial, Source Console Commands List. As you can see by look at that, tables are great for things like definitions, listing your computer's specifications, or even captioning a picture of your skin. When you use tables, everything seems much more organized and easy to read.
Tables I've already explained to you what a table is and what it's used for, so now I'm going to show you how to make and customize the looks of a few simple ones for starters. It's very easy as long as you read this tutorial correctly.
    Making a Simple Table
    • To begin with, I'll show you an example of two very simple tables, a normal, bordered table and a flat basic looking table with no borders. Basic Table with Borders:
      Data 1
      Data 2
      HTML for Basic Table with Borders: <table border="4" cellpadding="2" cellspacing="2" width="400"><tr><td>Data 1</td></tr><tr><td>Data 2</td></tr></table> Basic Table without Borders:
      Column 1
      Data 1
      HTML for Basic Table without Borders: <table cellpadding="2" cellspacing="2" width="400"><tr><td bgcolor="blue">Table Title</td></tr><tr><td>Data 1</td></tr></table> As I said before, these are very basic tables, and since they only have one cell per row, there isn't much sense in using as they are here, but I'll explain how to add cells later on. If you take a look at the code, some of the parameters for the tables are pretty self explanatory.
      • border - adjusts how thick or thin the border surrounding the table is (can only be used with bordered tables, durr)
      • cellpadding - adjusts the vertical dimension of the table and its cells.
      • cellspacing - adjusts the amount of space or the size of the border around the table and its cells.
      • width - adjusts how wide the table and its cells will be. If you set it to a percentage such as 50% or 100%, it will take up that percentage of the page, or in the case of FPSB, the space that it is posted in.
      • bgcolor - sets the background color for the cell (can only be used inside of the td tags). Some sites, such as FPSB, have certain colors set up so that you don't need to memorize the literal color code, but instead you can just type in bgcolor="blue" or bgcolor="red". If the site you are using does not support that, then a good program to look for to get those color codes is Color Cop.
Cells You might have noticed that I briefly mentioned cells before and if you don't know what cells are already, they are the boxes inside of the tables which contain the text. These cells can hold anything that you want, pictures, text, links, whatever. You can have as many cells in your table as you want, but you need to pay attention to how neat it looks. The whole point of using these tables is to make your post or website or whatever it is that you're using look nice.
    How Do I Add More Cells?
    • Take a look back at the codes for the two basic tables that I put up in the tables section of this tutorial. You'll notice that they both only have one horizontal cell. Adding cells is very simple, it just takes two tags and it splits right down the middle. Here are those two same types of tables but with two horizontal cells rather than just one: Basic Table with Borders and Two Horizontal Cells:
      Column 1Column 2
      HTML for Basic Table with Borders and Two Horizontal Cells: <table border="4" cellpadding="2" cellspacing="2" width="400"><tr><td>Column 1</td><td>Column 2</td></tr></table> Basic Table without Borders and Two Horizontal Cells:
      Column 1Column 2
      Row 2Row 2
      HTML for Basic Table without Borders and Two Horizontal Cells: <table cellpadding="2" cellspacing="2" width="400"><tr><td bgcolor="blue">Column 1</td><td bgcolor="blue">Column 2</td></tr><tr><td>Row 2</td><td>Row 2</td></tr></table> Do you see what I changed in the code? All I did was add </td><td> after the text that I wanted in the first cell and then added the text that I wanted in the second cell. If you want more than two horizontal cells, all you need to do is add </td><td> after the text in the second cell and a third cell will appear. You can do this as many times as you like, but if you add too many then it won't look good.
Advanced Tables Now that you've got the hang of things and you know what all of the parameters do, here are some more complicated tables for you guys, their HTML code can be found underneath them. Remember that all of this stuff can be changed, the code is right here for you if you mess up, so play around with the parameters and you might learn a thing or two! Parameters such as the ones used in these tables are also used in other things, many of which are used on this site! So if you learn these, you learn a bunch of other things as well. The reason I'm not going through all of these and teaching you every little thing is because I want you guys to apply all the basics that I taught you above and you'll learn more that way.
Column 1Row 1
Row 2
Row 3
<table border="1" cellpadding="0" cellspacing="0" width="400"><tr><td align="center" rowspan="3" width="100">Column 1</td><td align="center" width="200">Row 1</td></tr><tr><td align="center">Row 2</td></tr><tr><td align="center">Row 3</td></tr></table>
Table Title
Row 1Row 2Row 3
<table border="1" cellpadding="0" cellspacing="0" width="400"><tr><td align="center" colspan="3"><b>Table Title</b></td></tr><tr><td align="center" width="100">Row 1</td><td align="center" width="100">Row 2</td></td><td align="center" width="100">Row 3</td></tr></table>

Table Title

Column AColumn B
Data 1Data 2
Data 3Data 4
Data 5Data 6
<table border="4" width="50%" cellpadding="4" cellspacing="3"><tr><th colspan="2"><h3>Table Title</h3></th></tr><th>Column A</th><th>Column B</th><tr><td>Data 1</td><td>Data 2</td></tr><tr><td>Data 3</td><td>Data 4</td></tr><tr><td>Data 5</td><td>Data 6</td></td></table>

Summary I hope it was helpful and all. I would just like to let you guys know that I am not stealing credits for the information in this tutorial, everything in here is my work, but it's based off of what I've read on other sites and some tables are used in other tutorials. Oh, and one last thing, for those of you guys who feel the need to make every little bit of HTML code in your posts capital letters, it's not necessary and it makes things really hard to look through, so don't do it! Anyway, thanks for reading my tutorial! :)

Did I Miss Anything? If you think I missed something or did not explain something well enough, please send me a PM telling me what you think I missed or should have explained differently!
Sign up to access this!
  • Necodominus avatar
    Necodominus Joined 14y ago
    Offline
    2,195 points Ranked 20,719th
    12y
    Goos tut its nice to actually have it explained instead of heres a table figure it out. funky chickens a great resource but not munch in the way of explaining. And a bit of humor helps, nice pun btw
    Shepard of the path avatar
    Mantra
    Shepard of the path
    URL to post:
  • YellowJello avatar
    YellowJello username pic Joined 16y ago
    Ripe Supporter RC Manager Admin
    Not Jiggling
    106,496 points Ranked 31st
    44 medals 6 legendary 10 rare
    • 10 years a member Medal icon
    • Submitted 200 Threads Medal icon
    • Submitted 50 Maps Medal icon
    • Returned 5000 times Medal icon
    • Achieved Admin clearance Medal icon
    • Became a Ripe Supporter Medal icon
    13y
    Posted by Gez 9/10 for a perfectly formatted, in-depth tutorial on creating Tables (with a Table of contents, pun intended?). +1 for subliminal message.
    Yup, totally did that on purpose. :) Thanks for the compliments, I'll probably go back and add more for the advanced tables, I was basically typing that up as I was walking out the door.
    Jiggle Jiggle avatar
    Mantra
    Jiggle Jiggle
    URL to post:
  • Supa Scoopa avatar
    Supa Scoopa Joined 15y ago
    Offline
    4,263 points Ranked 1,694th
    13y
    9/10 for a perfectly formatted, in-depth tutorial on creating Tables (with a Table of contents, pun intended?). +1 for subliminal message.
    URL to post:

Embed

Share banner
Image URL
HTML embed code
BB embed code
Markdown embed code

Credits

Original Authors
YellowJello avatar
YellowJello username pic Joined 16y ago
Ripe Supporter RC Manager Admin
Not Jiggling
106,496 points Ranked 31st
44 medals 6 legendary 10 rare
  • 10 years a member Medal icon
  • Submitted 200 Threads Medal icon
  • Submitted 50 Maps Medal icon
  • Returned 5000 times Medal icon
  • Achieved Admin clearance Medal icon
  • Became a Ripe Supporter Medal icon
Author

Submitter

YellowJello username pic Joined 16y ago
Ripe Supporter RC Manager Admin
Not Jiggling
106,496 points Ranked 31st
44 medals 6 legendary 10 rare
  • 10 years a member Medal icon
  • Submitted 200 Threads Medal icon
  • Submitted 50 Maps Medal icon
  • Returned 5000 times Medal icon
  • Achieved Admin clearance Medal icon
  • Became a Ripe Supporter Medal icon
YellowJello avatar
YellowJello

Creator
Sign up to access this!
Sign up to access this!
Sign up to access this!

Game

Sign up to access this!

Category

Details

Difficulty Level
Beginner

Attributes

Share

  • Share on Reddit
  • Share on Twitter
  • Share on Facebook
  • 2
  • 3.7k
  • 3
  • 13y
  • 5y

More from Submitter

More Other/Misc Tutorials