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.
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.
- 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.
- 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:
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:
Data 1 Data 2
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.
Column 1 Data 1
- 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.
- 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:
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 1 Column 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.
Column 1 Column 2 Row 2 Row 2
|Column 1||Row 1|
|Row 1||Row 2||Row 3|
|Column A||Column B|
|Data 1||Data 2|
|Data 3||Data 4|
|Data 5||Data 6|
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!