Making Tables and Table Templates.  

sexyfit_helper 54F
185 posts
3/19/2006 8:55 pm

Last Read:
12/30/2007 2:03 pm

Making Tables and Table Templates.


Tables are definitely confusing and take some work to figure out. It might be easiest to find a table style that interests you and start with that. As time goes by, I'll add table templates you can start with.



This post contains
  • A table.
  • A brief explanation of what the code means.
  • The code that you can cut and paste and modify.
  • Links to some awesome posts on the subject by GoddessOfTheDawn.


Sexyfit_Helper's table
sexyfitwoman
My alter ego
PS. This is a cell.

GoddessOfTheDawn
A great friend.
A great writer of self-help posts.


Mr. CEO Man
Good looking, don't you think?
luvpump
[blog sexyfitwoman]
GoddessOfTheDawn
luvpump

blogging 108b ~ xample of a table with xplanation

blogging 108 ~ tables

[post 275634]





Explanation of code

This explanation assumes you can make your way around the standard stuff like center, fonts, background color, etc.



The table tags, [table] and [/table] don't actually put a table in, they tell the complier that next stuff coming is about a table.



The [tr] and [/tr] tags open a close a table row. They tell the compiler that everything inbetween the tags belongs on one row.



Each [td] and [/td] open and close each cell and you put what you want into the cell between these tags. Everything between these tags can be changed.



Look at the code carefully. There are three sets of the tr tags, and the table has 3 rows.

The columns are a little different because the first row goes across all three columns. Notice for the first set tr tags the td tag has a command colspan=3. This says make this cell go across all three columns. Without this command, the title cell would stop the end of the first column.



Say you wanted to modify this table to have 4 columns, well, change the colspan to equal 4 and just add another set of td tags to each of the other rows.



Width is used a few times. The first time is in the table tag, width=95%. That says make the table take up 95% of the width of the frame. Each of the columns also have their width set by putting a width in the td tag. This 27%, 46% and 27% makes the middle column roughly 1.7 times the size of the other two.

There is also a width used for the cellpadding around Goddess's picture in the bg tag which makes the frame wider on the sides then the top and bottom. Using the cellpadding command makes that frame around the pictures even.

Alternatively, when cellpadding is used in the td tag, it is saying keep the things inside the cell this far away from the edges of the cell, so cellpadding is used a little differently, depending on the tag it is used in.



Use the preview button when working with tables and check to see how your changes are affecting the table.



Cut and Paste Code

[center]
[table width=95% bgcolor=202020 cellpadding=4 border=3]
[tr bgcolor=FFAAFF]
[td colspan=3 align=center]
[size 4][b]Sexyfit_Helper's table[/b][/size]
[/td]
[/tr]

[tr]
[td width=27% bgcolor=EE55BB valign=top]
[center]
[bg bgcolor=deeppink cellpadding=4 border=2]
[photo sexyfitwoman]
[/bg]
My alter ego
PS. This is a cell.
[/center]
[/td]

[td width=47% bgcolor=FBA16C valign=center]
[center]
[bg bgcolor=aaaadd cellpadding=4 width=80% border=2]
[center][photo GoddessOfTheDawn][/center][/bg]
A great friend.
A great writer of self-help posts.[/center]
[/td]

[td bgcolor=9999FF cellpadding=4 width=27% valign=bottom]
[center]
Mr. CEO Man
Good looking, don't you think?
[bg bgcolor=0000ff cellpadding=4 border=2]
[photo luvpump][/center]
[/bg]
[/td]
[/tr]

[tr]
[td align=center bgcolor=9876BB]
[blog sexyfitwoman]
[/td]
[td align=center bgcolor=AAFFAA]
[blog GoddessOfTheDawn]
[/td]

[td bgcolor=FFAAAA align=center]
[blog luvpump]
[/td]
[/tr]
[/center]
[tr bgcolor=FFAAFF]
[td colspan=3 align=center cellpadding=10]

[b][post 275182]

[post 273489] [/b]

[/td]
[/tr]
[/table] [/center]




keithcancook 60M
17718 posts
3/20/2006 7:25 am

Well, this just proves that you weren't elected mayor without reason. Thanks, sweetie...


sexyfit_helper replies on 3/20/2006 8:14 pm:
Thanks Keith . So this next table design is a tribute to you and HOLLYBLOG SQUARES


sexyfitwoman
sexyfitwoman
sexyfitwoman
sexyfitwoman
sexyfitwoman
sexyfitwoman
sexyfitwoman
sexyfitwoman



So the cut and paste code for the hollyblog squares table follows, just change the pics, and the colors are 9999ff and deeppink, that is easy enough to change as well.



[center]
[table width=95% bgcolor=202020 cellpadding=6 border=3]
[tr]
[td bgcolor=9999ff valign=center]
[center]
[bg bgcolor=deeppink cellpadding=4 border=2]
[photo sexyfitwoman][/bg][/center][/td]

[td bgcolor=9999ff valign=center]
[center]
[bg bgcolor=deeppink cellpadding=4 border=2]
[photo sexyfitwoman][/center][/bg][/center][/td]

[td bgcolor=9999FF cellpadding=4 valign=center]
[center]
[bg bgcolor=deeppink cellpadding=4 border=2]
[photo sexyfitwoman][/center]
[/bg]
[/td]
[/tr]

[tr]
[td bgcolor=9999ff valign=center]
[center]
[bg bgcolor=deeppink cellpadding=4 border=2]
[photo sexyfitwoman][/bg][/center][/td]

[td bgcolor=deeppink valign=center]
[center]
[bg bgcolor=9999FF cellpadding=16 border=6 bordercolor=black]
[center][photo Keithcancook][/center][/bg][/center][/td]

[td bgcolor=9999FF cellpadding=4 valign=center]
[center]
[bg bgcolor=deeppink cellpadding=4 border=2]
[photo sexyfitwoman][/center]
[/bg]
[/td]
[/tr]

[tr]
[td bgcolor=9999ff valign=center]
[center]
[bg bgcolor=deeppink cellpadding=4 border=2]
[photo sexyfitwoman][/bg][/center][/td]

[td bgcolor=9999ff valign=center]
[center]
[bg bgcolor=deeppink cellpadding=4 border=2][center]
[photo sexyfitwoman][/center][/bg][/center][/td]

[td bgcolor=9999FF cellpadding=4 valign=center]
[center]
[bg bgcolor=deeppink cellpadding=4 border=2]
[photo sexyfitwoman][/center]
[/bg]
[/td]
[/tr]
[/table] [/center]

sexyfit_helper 54F
63 posts
3/23/2006 6:50 am

Making a Two Column List
In general, to make a list, we need to line up columns, and this is achieved with a simple two column table.

Column1 Column2
New York 6
LA 3

The code:
[table border=0]

[tr]
[td]Column1 [/td]
[td]Column2 [/td]
[/tr]

[tr]
[td]New York [/td]
[td]6 [/td]
[/tr]

[tr]
[td]LA [/td]
[td]3 [/td]
[/tr]

[/table]

I did absolutely no formatting, just enough to show you how the list works. With the column1, column2 header, it looks like the numbers on the list need centering, add an align=center to the second td tag in each row.
Column1 Column2
New York 6
LA 3

The formatting for each row under the header:
[tr]
[td]New York [/td]
[td align=center]6 [/td]
[/tr]

Happy blogging!


NSAAddict 42F

4/15/2006 8:07 am

Just wanted to say thanks so much for all of your very useful information, you rock!


sexyfit_helper replies on 4/15/2006 1:39 pm:
You are welcomed NSAAddict

Fox4aKnight1 43F

5/27/2006 6:22 pm

This is what I get when I copy paste your main table.....


Sexyfit_Helper's table
sexyfitwoman
My alter ego
PS. This is a cell.

GoddessOfTheDawn
A great friend.
A great writer of self-help posts.


Mr. CEO Man
Good looking, don't you think?
luvpump
[blog sexyfitwoman]
GoddessOfTheDawn
luvpump

blogging 108b ~ xample of a table with xplanation

blogging 108 ~ tables




Now my modifications first came to this...



[tr]

[tr bgcolor=FFAAFF]
But I can handle the peril...
Technical Stuff
Clicking on the link of
fucked! (and sum techie fingz)
Clicking on thw link
[blog sexyfitwoman]
they both have links to various places
to get more technical info.


The groups that I am in...
Just4Laughs
bloggers of this friendly site
The Likeminded Ones
DizzingHeights LurkingShadows
[/font]

If you click on the pics another window opens and you get to see a bigger pic[/bg]


And eventually this is what I arrived at....

But I can handle the peril...
Technical Stuff
Clicking on the link of
fucked! (and sum techie fingz)
Clicking on thw link
[blog sexyfitwoman]
they both have links to various places
to get more technical info.


The groups that I am in...
Just4Laughs
bloggers of this friendly site
The Likeminded Ones
DizzingHeights LurkingShadows


If you click on the pics another window opens and you get to see a bigger pic


I don't know how to show you the code I did ......but I wish I could as this is driving me nuts. As far as I know the lighter colored cells were suppose to be the top and bottom however as you can see it didn't work out like that.


sexyfit_helper replies on 6/17/2006 9:29 pm:
Right away I notice some table code at the top of your table, which indicates that maybe your tags are not matched somewhere, a close tag for every open tag.

lonelyinny5 43M/41F
126 posts
11/11/2006 7:36 am

thank you for all the help ---I'm trying to create a table of contents but it still gives me a f*!#ing headache!!Kisses Lonely


Searching for my fairytale: Passion & intimacy tied together in a warm, wonderful friendship


sexyfit_helper replies on 11/12/2006 5:29 pm:
Too me ages to update the title section on this blog...

sexyfit_helper 54F
63 posts
11/12/2006 5:03 pm

To check out the code for how this is done, click on the quote button and the code will show up above the comment entry frame.

Sexyfit's Information and Programming Help Blog
Welcome to Sexyfit's blogging help

This blog is specifically a "how to" blog, offering information on how to do things like add tables, colors, fonts, etc., so you can personalize and enhance both your profile and your blog.

It also offers a few advice articles to think about, such as for photos used, readability, journalism and how much of an echo you leave behind when you shut down your profile.

Formatting Links
  • Fonts
  • Available Tags
  • Framing Text or Pictures, using the background command
  • Making Tables and Table Templates.
  • Creating Background Color and Using Hexidecimal Colors
  • Special Characters, the Ascii Codes
  • My alter ego
    sexyfitwoman
    [blog sexyfitwoman]
    GoddessOfTheDawn
    GoddessOfTheDawn
    Need more help? Check her out.
    Mr. CEO
    luvpump
    luvpump
    Advice Links
  • Journalism 101 - tips for success on a fickle forum
  • Pictures, worth more then a 1000 words
  • Deleting All of Your Profile
  • Practicalities of working with aff

  • sexyfit_helper replies on 11/12/2006 5:32 pm:
    Unfortunately if you lay out the code so it is easier to read, dang AdultFriendFinder adds extra spaces all over the place, so it is very difficult to read code.

    Specialairsevice 48M

    8/13/2007 12:28 am

    hey thanks for the info,it`s simple for even for me to understand,which is no mean feat I might add,lol.
    A few questions,if I cut and paste the format can I add my own text such as links later in the cells or do I need to do it when I post.If so how do I make collums and add my own photos?
    You`re a gem,thanks for your patience.

    Dan

    ~Carpe Diem~


    rm_NewYearChic 48F
    14804 posts
    8/14/2007 12:12 am

    Smiles thanks for all this info
    wonderful to be able to play with it.
    NYC


    sexyfit_helper 54F
    63 posts
    9/4/2007 4:30 pm

      Quoting Specialairsevice:
      hey thanks for the info,it`s simple for even for me to understand,which is no mean feat I might add,lol.
      A few questions,if I cut and paste the format can I add my own text such as links later in the cells or do I need to do it when I post.If so how do I make collums and add my own photos?
      You`re a gem,thanks for your patience.

      Dan
    Hi Dan,

    Tables are confusing and I think getting the tags correctly in terms of how you want the table laid out takes some planning. It is just way easier to find the code for a table layout you like and cut and paste what you want into them.

    You can edit a post, but not a comment, so can add stuff later to a post.


    sexyfit_helper 54F
    63 posts
    9/4/2007 4:32 pm

      Quoting clubgirl1976x:
      your blog rocks, thanks so much for the info!
    Beautiful frame of your pictures that you've done...


    feedhercum 53M/56F

    11/29/2007 12:26 pm

    Just had to stop by and say 'thanks!' - I learned how to do a basic table and a few other things in one morning of reading your helpful blog. This HTML stuff is hard! I'm used to publishing programs and ready made clip art....lol Again - Thanks!

    Live Your Love and Love Your Life...
    Life is too short to put it off. {=}

    Please Sign Our Guest Book and Enjoy Original Erotic Stories & Poems


    SilverSammi 105F

    12/1/2007 7:00 pm

    I have your blog marked and use it so much ~ Thankyou for all your help.

    Just one thing tho, How do I make my blog header stretch across the page more?

    Sammi


    Reputation is for time ~ Character is for eternity.


    sexyfit_helper 54F
    63 posts
    12/30/2007 1:58 pm

      Quoting SilverSammi:
      I have your blog marked and use it so much ~ Thankyou for all your help.

      Just one thing tho, How do I make my blog header stretch across the page more?

      Sammi
    The only thing I can think of is to force it by putting in a long string without any spaces, perhaps a line _________________.


    sexyfit_helper 54F
    63 posts
    12/30/2007 2:01 pm

      Quoting SilverSammi:
      I have your blog marked and use it so much ~ Thankyou for all your help.

      Just one thing tho, How do I make my blog header stretch across the page more?

      Sammi
    Actually, I think you can also use the width command. See where I have put the width equal to a percent, change that to a number for pixels. I think a lot of computer screens fit 1024 by 768 pixels and resolutions go as high as 1600 by 1200 now, so try numbers in that range and see how it looks.


    sexyfit_helper 54F
    63 posts
    12/30/2007 2:03 pm

      Quoting feedhercum:
      Just had to stop by and say 'thanks!' - I learned how to do a basic table and a few other things in one morning of reading your helpful blog. This HTML stuff is hard! I'm used to publishing programs and ready made clip art....lol Again - Thanks!
    Yes, html is confusing, especially when you try and do tables. The formatting stuff isn't too bad.


    Become a member to create a blog