98 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.
|
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] |
|
18358 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
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] |
|
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!
|
|
|
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 |
|
|
5/27/2006 6:22 pm
|
This is what I get when I copy paste your main table.....
Now my modifications first came to this...
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.
|
|
|
|
|
[tr]
|
[tr bgcolor=FFAAFF]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.
|
|
|
|
|
| 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. |
|
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[blog sexyfitwoman] | GoddessOfTheDawn
Need more help? Check her out.
| Mr. CEOluvpump
| 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. |
|
|
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~
|
|
|
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.
|
|
|
Beautiful frame of your pictures that you've done...
|
|
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.
|
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 _________________.
|
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.
|
63 posts 12/30/2007 2:03 pm |
Yes, html is confusing, especially when you try and do tables. The formatting stuff isn't too bad.
|
