1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.



Tables For Dummies

Discussion in 'General' started by Lint Roller, Jul 7, 2010.

  1. Offline

    Lint Roller Queen Mother

    • Skin Fiend
    Member Since:
    Jan 14, 2009
    Total Posts:
    3,988
    Likes Received:
    1,618
    Gender:
    Female
    Location:
    Northern California
    • Awards
    <div align=center><span style='font-size:12pt;line-height:100%'>TABLES FOR DUMMIES</span></div>
    • I know what everyone says about tables. Either they're too hard or they don't work or the famous "Well I can do that with a div too!" theory that's been cropping up lately. Now don't get me wrong, tables aren't always the answer. That said, tables are used ALL the time not just in skinning but in real web design. With a table, you can make some of the most complicated layouts actually simple to make. Furthermore, tables will always look the same on all browsers, they will not stretch if you don't tell them to nor will they gunk any of your other codes up with fancy css or div layers. In fact you ca make a perfectly respectable table using JUST HTML.

      So, in this tutorial I'm going to show you all the things you can do with a well placed table, and hopefully by the end of it I'll have you guys using tables more often. This is obviously not the best way to use tables, I certainly don't have the foresight to know what the best way is, but this is how I've always worked with tables and it's the simplest way I can think of. I hope it's of any use to you guys.
    <span style='font-size:12pt;line-height:100%'>BASICS OF THE TABLE</span>
    • For those of you who are familiar with the mechanics of how to make a table, go ahead and skip over this part but for those of you who are less familiar with my happy tables keep reading:
      Tables essentially work like a huge container which holds all of your site. Everything you see on your board, you can think of as a table. Now that table is nothing more than a rectangle, in order to manipulate the things inside the table, you'd have to add sections inside the rectangle that way you can move stuff around in it. Without the stuff inside a table, there's nothing really a table can do for you if you just have an empty table. That's why you'll never see a table that looks like:
    Code: Select
    <table>
    STUFFFFF
    </table>
    • Inside the table, there are rows and there are columns, kind of as though it were a grid. You can define how many rows and columns you want. In one table, you may have a million rows and columns, but in another table you may only have one. On that note, you may have one million rows but only one column, it all depends on what you want to do. The coding for the table is very simple: a row is simply <tr> and a column is considered <td>. All of the STUFF of the table is placed inside the <td> so a very simple table code would look like:
    Code: Select
    <table>
    <tr>
    <td>
    STUFFFFF
    </td>
    </tr>
    </table>
    • Now you might be looking at this code and think there isn't much you can do with this. You're wrong there are a couple things you can do with this code: for one you can give it a background and create a border around something effectively.
    <span style='font-size:12pt;line-height:100%'>CREATING BORDERS OUT OF BACKGROUNDS</span>
    • This is kind of a crazy concept but consider this: you have a cbox and you want to give it a really epic border and background. Maybe you'd like to do something kind of like this:
    [IMG]
    (Note, the cbox doesn't match because, well I'm not going to make a new cbox JUST for this tutorial. XD For all intensive purposes the colors don't matter, we're concentrating on that positioning and how to create that effect)
    • To start, what you want to do is enter in the super basic Table code. This will be what we'll base everything else on, I'll walk you through everything step by step. So as a reminder, right now you should have this code placed in your headers where-ever you want your background border to go.
    Code: Select
    <table>
    <tr>
    <td>
    STUFFFFF
    </td>
    </tr>
    </table>
    • Now, the first thing we need to do is we need to get out the image we'd like to use. This can be any image, at all it absolutely doesn't matter. However, be forewarned, your image needs to be /bigger/ than the cbox (or able to repeat) because otherwise the image will simply be hidden behind the cbox and that would defeat the purpose of this tutorial :3

      Once you have your image at the ready, check what dimensions the image is add the url of you uploaded image and the height and width of your image like in the following code:
    Code: Select
    <table background=&#34;http&#58;//i49.tinypic.com/2epikbb.jpg&#34; height=&#34;450px&#34; width=&#34;400px&#34;>
    <tr>
    <td>
    STUFFFFF
    </td>
    </tr>
    </table>
    • Now depending on your image you may be done, for instance if you have an image that is simply a tile which repeats behind your cbox like a texture then you all you need to do is install your cbox where it says "STUFFFF".

      However, I suspect many of you are not using tile images and, maybe like myself, have designated a certain area for your cbox to go. So for you, let's add some padding to help give your cbox a shove in the right direction. For me, the cbox likes to stay to the left of the picture and, frankly, I don't want that. I want it in the black box to the right. So, I'm going to add some padding from the left of the picture and some padding from the top of the picture so that everything is perfectly centered:
    Code: Select
    <table background=&#34;http&#58;//i50.tinypic.com/jkf0h3.jpg&#34; width=&#34;400px&#34; height=&#34;450px&#34;>
    <tr><td>
    <div style=&#34;padding-left&#58;110px; padding-top&#58;40px;&#34;>
    STUFFFFFFFFF
    </div>
    </tr></td>
    </table>
    • And that's it, you're done. Pat yourself on the back, you used a table and you used a div and nothing exploded. But, you can do the same thing without that div. Now using a div and padding is the easy way out, it's the simpler way to do it and it makes it easier for you to edit later. Yeah, you're welcome for not making you do it the purist way using only tables. XD
    <span style='font-size:12pt;line-height:100%'>HOW TO MAKE A SIDEBAR</span>
    • This is something I get SO often, especially in class. I'll be asked how I make sidebars, or how someone could go about making their own sidebar instead of using Roswenth's code. (I'd like to point everyone to Roswenth's sidebars if you haven't seen them already because they really are quite fantastic and just work wonderfully :3)

      Now I know you guys probably don't want to believe me, but really sidebars are just as simple as the above code. In fact, to create a sidebar all you really have to do is create one table and the rest can be done using css styles. Creating the sidebar is quite simple, all it takes is one big table which encompasses the entire board, for the most part I call this table "forumbg".
    [IMG]
    • The first thing you want to do is create a table which will encompass all your boards, excluding your Board Header and Navigation, but including the Board and Stats. When you put the <!BOARD!> inside your table where your forums are meant to go, it'll actually make the forums listen to your table rather than just laugh at you (and they do laugh, they're jerks). Most of you, I will assume, have a banner set so that everything will be below the banner strictly speaking so you don't much have to worry about putting those two things in the table--neither of them are being split up anyway so it'll save you some time!

      So in your headers, under HEADER and NAVIGATION, you will want to put a code that will say how wide your forum is (or how wide you want it to be) and define column for the sidebar and a separate column for the boards which will have widths of their own defined, like below:
    Code: Select
    <table width=&#34;950px&#34;>
    <tr>
    <td width=&#34;200px&#34; valign=&#34;top&#34;>
    SIDEBAR WILL BE HERE
    </tr>
    <td width=&#34;750px&#34; valign=&#34;top&#34;>
    FORUMS WILL BE HERE
    <BOARD> SHOULD BE HERE
    </tr>
    </tr>
    </table>
    • Now that's simple, only one problem: there are those pesky credits at the bottom which are quite upset now (or for many of you they will be upset). To fix them, it's simple, all you have to do is stretch your table down to your footers and give the credits their own row to frolic and be free in, like so:
    HEADERS
    Code: Select
    <table width=&#34;950px&#34;>
    <tr>
    <td width=&#34;200px&#34; valign=&#34;top&#34;>
    SIDEBAR WILL BE HERE
    </tr>
    <td width=&#34;750px&#34; valign=&#34;top&#34;>
    FORUMS WILL BE HERE
    <BOARD> SHOULD BE HERE
    </tr>
    </tr>
    <tr>
    <td colspan=&#34;2&#34;>
    FOOTERS
    Code: Select
    </tr>
    </td>
    </table>
    • Well now you have an area for your sidebars to go but what do you do now? Well now you can do whatever the heck you want. You can put more tables inside your sidebars, for instance, if you wanted to have background images for all your sidebar categories you could use the above tutorial (putting backgrounds behind stuff) to do that on the side, or you could simply add CSS. For the most part, sidebars tend to have coding that looks like:
    HEADERS
    Code: Select
    <table width=&#34;950px&#34;>
    <tr>
    <td width=&#34;200px&#34; valign=&#34;top&#34;>
    
    <div class=&#34;maintitle&#34;>Welcome</div>
    <div class=&#34;titlemedium&#34;>Subtitle here</div>
    <div class=&#34;tablefill&#34;>
    <span class=&#34;desc&#34;>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </span></div>
    
    
    </tr>
    <td width=&#34;750px&#34; valign=&#34;top&#34;>
    FORUMS WILL BE HERE
    BOARD AND STATS GO HERE
    </tr>
    </tr>
    <tr>
    <td colspan=&#34;2&#34;>
    FOOTERS
    Code: Select
    </tr>
    </td>
    </table>
    • Or something to that effect, but really it's up to you how you do your sidebars. They're extremely customizable and you can do, quite literally, whatever the heck you want to do with them. :3



    So in conclusion, you can use tables for many things but even a really simple layout that takes almost no real coding knowledge can create a very powerful framework to make it possible for you to do many different and cool effects. So, try out tables for yourself. I also highly recommend reading this particularly the codes at the end pertaining to tables because it explains all the ways to customize a table. There is more than just adding a background or some padding, so try it out for yourself and experiment a bit! If you find you'd like some more advanced tutorials on more ways to use tables I also recommend using W3Schools tutorials because they're amazing.
  2. Offline

    ShelbySunshine Community Devoted (M)

    • Community Devoted
    Member Since:
    Nov 16, 2009
    Total Posts:
    645
    Likes Received:
    7
    Ahaha xD I'm totally in that chat box!

    Lovely guide. <3
  3. Offline

    Lint Roller Queen Mother

    • Skin Fiend
    Member Since:
    Jan 14, 2009
    Total Posts:
    3,988
    Likes Received:
    1,618
    Gender:
    Female
    Location:
    Northern California
    • Awards
    <div align=center><span style='font-size:17pt;line-height:100%'>ACCEPTED CODING TUTORIAL</span>
    <span style='font-size:11pt;line-height:100%'>[color=7f323a]THANK YOU FOR YOUR SUBMISSION[/color]</span>
    Thank you for submitting to our learning center and helping other learn to code! Keep up the great work and we look forward to seeing more from you!</div>
  4. Offline

    Shangrila Emerging Artist (M)

    • Emerging Artist
    Member Since:
    Nov 26, 2009
    Total Posts:
    198
    Likes Received:
    2
    I love this document! Because of this I've written my own sidebar and used tables for all sorts of things. Thank you Lint!
  5. Offline

    Maleficent What an ugly looking beastie.

    • Community Challenger
    • Community Devoted
    Member Since:
    Jul 31, 2007
    Total Posts:
    2,776
    Likes Received:
    1,966
    Gender:
    Female
    Location:
    England
    • Awards
    Oooh this is brilliant. Had no idea it was so simple! :o

    -feels a little foolish now-

    Thank youuu.
  6. Offline

    Lint Roller Queen Mother

    • Skin Fiend
    Member Since:
    Jan 14, 2009
    Total Posts:
    3,988
    Likes Received:
    1,618
    Gender:
    Female
    Location:
    Northern California
    • Awards
    CONGRATULATIONS TO BOTH OF YOU
    Yes.
    Tables really are not that bad. I'm proud of you T___T *gives group coding hug*
  7. Offline

    Bekah Member

    Member Since:
    Feb 7, 2011
    Total Posts:
    76
    Likes Received:
    1
    Gender:
    Female
    Awesome tutorial!
    Thank you so much :)
  8. Offline

    bovril for today I am a wild creature.

    Member Since:
    May 1, 2011
    Total Posts:
    45
    Likes Received:
    19
    Gender:
    Female
    Location:
    England
    Super helpful tutorial!! Thanks a lot, it really helped.
  9. Offline

    Krixxix Programmer // Friend

    Member Since:
    May 14, 2013
    Total Posts:
    122
    Likes Received:
    44
    Gender:
    Male
    Super bump, however just wanted to share my 2 cents.

    Tables are for tabular data, ie, data that cannot be pre determined.. generally from a database.
    If you use tables, remember to use <th>,<thead>,<tbody> and <tfoot> grouping the elements of a table.

    Divs are also awesome, generally it is much easier to create a responsive design that way.

    However nice tutorial :).

    Any reason why @Lint Roller your 2nd post doesn't look right? (see: http://rpg-directory.com/threads/tables-for-dummies.19342/#post-232647)
    Kohana likes this.
  10. Offline

    Kohana Member

    Member Since:
    Sep 30, 2012
    Total Posts:
    77
    Likes Received:
    57
    Gender:
    Female
    Two thumbs up for an understandable and organized tutorial!

    I agree with Krixxix (Although, I tend to lean towards more lazy webdesign on free hosts that actually seem to penalize proper coding habits). It is impractical to use tables for everything, but I'll admit that it makes cross browser skinning a lot easier. Just be careful not to use too many tables! It can bog down your site a bit, although I'm sure the average person isn't as concerned with half a second difference in load time as I am.

    The only thing I would add to your tutorial is perhaps a bonus section on using css to make the code cleaner and easier. Assigning a class to a td with coding you find yourself using over and over again can really save not just time but precious character counts that a lot of these free hosts have.

Share This Page