The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

BBcode to make tables look better

View previous topic View next topic Go down

BBcode to make tables look better

Post by SoSweet on January 21st 2013, 7:05 pm

How do i make tables look better?

the standard table is very ugly...

I've seen cool looking tables on other forumotion sites. what options can i use and what things can I do to make it look better visually?? thanks!

SoSweet
New Member

Female Posts : 15
Reputation : 1
Language : English

Back to top Go down

Re: BBcode to make tables look better

Post by Akkii on January 21st 2013, 7:07 pm

Can you be more specific?
What tables?

Akkii
Forumember

Male Posts : 710
Reputation : 107
Language : English,HTML, CSS,Photoshop,Javascript!
Location : Here on Forumotion!

http://www.csshelp.net

Back to top Go down

Re: BBcode to make tables look better

Post by runawayhorses on January 21st 2013, 7:10 pm

Some people style the tables in there CSS stylesheet and use a "table class" to post the tables.

runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 162
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Re: BBcode to make tables look better

Post by SoSweet on January 21st 2013, 7:20 pm

@Akkii wrote:Can you be more specific?
What tables?

Tables. As in tables.

as in
LA table
TEST
TEST


@runawayhorses wrote:Some people style the tables in there CSS stylesheet and use a "table class" to post the tables.

okay well idk how to do that. I have no idea how to css code anyway Razz

can someone give me a template or something? that would be very helpful Smile

SoSweet
New Member

Female Posts : 15
Reputation : 1
Language : English

Back to top Go down

Re: BBcode to make tables look better

Post by runawayhorses on January 21st 2013, 7:28 pm

Well for your CSS stylesheet you would create a class and call it anything you want, for example we'll call this one ".mytable". Then you would decide what colors to use and the padding and any images.

To cut to the chase copy this code and add it to your CSS stylesheet, then you can change the style later, but this will give you something to work with:

Code:
 .mytable {
    border: 1px solid;
    margin: 10px 0px;
    padding:15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
    }
    .mytable {
    color: #00529B;
    background-color: #BDE5F8;
    background-image: url('URL OF IMAGE GOES HERE');
    }

Then add this to your post:

Code:
    [table class="mytable"][tr][td]Your text here
    [/td][/tr][/table]

runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 162
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Re: BBcode to make tables look better

Post by Akkii on January 21st 2013, 7:32 pm

I sended you one template on PM.

Akkii
Forumember

Male Posts : 710
Reputation : 107
Language : English,HTML, CSS,Photoshop,Javascript!
Location : Here on Forumotion!

http://www.csshelp.net

Back to top Go down

Re: BBcode to make tables look better

Post by runawayhorses on January 21st 2013, 7:39 pm

@Akkii wrote:I sended you one template on PM.
Instead of sending it via PM you could have posted it here so other people that find this thread in a search could benefit from it.

runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 162
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Re: BBcode to make tables look better

Post by Sanket on January 21st 2013, 7:47 pm

@runawayhorses wrote:
@Akkii wrote:I sended you one template on PM.
Instead of sending it via PM you could have posted it here so other people that find this thread in a search could benefit from it.
Agreed. Akkii, please try to solve the problems here on the thread itself instead of giving solutions via PM. Smile

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Re: BBcode to make tables look better

Post by SoSweet on January 21st 2013, 8:15 pm

hey does anyone know why i cannot center tables?

like
Code:
 

doesn't work Sad

SoSweet
New Member

Female Posts : 15
Reputation : 1
Language : English

Back to top Go down

Re: BBcode to make tables look better

Post by Akkii on January 21st 2013, 10:10 pm

@Sanket wrote:
@runawayhorses wrote:
@Akkii wrote:I sended you one template on PM.
Instead of sending it via PM you could have posted it here so other people that find this thread in a search could benefit from it.
Agreed. Akkii, please try to solve the problems here on the thread itself instead of giving solutions via PM. Smile

No problem.
I sended this to him.
Code:
[table style="width:100%; border-collapse:collapse;"][tr][td style="background-color:#ebecec;padding:10px;border-bottom:1px solid #cecece;border-top:1px solid #cecece ;border-left:5px solid #3B5998;border-right:5px solid #3B5998;text-align:center;color:#a2a8ab;font-size:20px;font-weight:bold;font-family:Tahoma;padding-bottom:5px;"]Text Text Text Text Text Text Text [/td][/tr][tr][td style="background-color:#f9f9f9;border-bottom:1px solid #cecece;border-left:5px solid #3B5998;border-right:5px solid #3B5998; color:#a2a8ab;padding-left:5px;padding-right:5px;"]
[center][b]Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text [/b][/center][/td][/tr][tr][td style="background-color:#ebecec;border-bottom:1px solid #cecece;border-left:5px solid #3B5998;border-right:5px solid #3B5998; color:#a2a8ab;text-align:center;font-weight:bold;font-family:16px;"]Text Text Text Text [/td][/tr][/table]

Akkii
Forumember

Male Posts : 710
Reputation : 107
Language : English,HTML, CSS,Photoshop,Javascript!
Location : Here on Forumotion!

http://www.csshelp.net

Back to top Go down

Re: BBcode to make tables look better

Post by SoSweet on January 21st 2013, 10:18 pm

@SoSweet wrote:hey does anyone know why i cannot center tables?

like
Code:
 

doesn't work Sad

So does anyone know why i can't center justify tables?

like
Code:
 
[center] TABLESTUFFHERE [/center]

????

SoSweet
New Member

Female Posts : 15
Reputation : 1
Language : English

Back to top Go down

Re: BBcode to make tables look better

Post by Akkii on January 21st 2013, 10:20 pm

@SoSweet wrote:
@SoSweet wrote:hey does anyone know why i cannot center tables?

like
Code:
 

doesn't work Sad

So does anyone know why i can't center justify tables?

like
Code:
 
[center] TABLESTUFFHERE [/center]

????
Can you post your full code , so we can see?

Akkii
Forumember

Male Posts : 710
Reputation : 107
Language : English,HTML, CSS,Photoshop,Javascript!
Location : Here on Forumotion!

http://www.csshelp.net

Back to top Go down

Re: BBcode to make tables look better

Post by SoSweet on January 23rd 2013, 6:04 am

Rideem3 wrote:Tables have to be centered in the style attribute using the margin property:
Code:
[table style="margin: 0 auto;"][tr][td][/td][/tr][/table]

but then how do i do the table border and stuff if i have that "tablestyle" think in the first part?

SoSweet
New Member

Female Posts : 15
Reputation : 1
Language : English

Back to top Go down

Re: BBcode to make tables look better

Post by SoSweet on January 24th 2013, 4:49 am

No I mean like

This does center the table
[code]
[code]


But then I can't see the lines of the table. How do I add back the lines ?

SoSweet
New Member

Female Posts : 15
Reputation : 1
Language : English

Back to top Go down

Re: BBcode to make tables look better

Post by runawayhorses on January 24th 2013, 11:32 am

Add a border to it like this example:

Code:
[table style="margin: 0 auto;" border="1"][tr][td]row 1, cell 1[/td][td]row 1, cell 2[/td][/tr][tr][td]row 2, cell 1[/td][td]row 2, cell 2[/td][/tr][/table] 
Result:
row 1, cell 1row 1, cell 2
row 2, cell 1row 2, cell 2

runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 162
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Re: BBcode to make tables look better

Post by SoSweet on January 27th 2013, 6:33 am

cool thanks! that helped a lot!!

one more question.
How do I do spaces in the table?

like, it seems I can only stretch the table as far as the letters go. for example.

row 1, cell 1row 1, cell 2
row 2, cell 1looooooooooong words here

I want to stretch the table so it's wider than the text.
I hope you get what I'm trying to say.

SoSweet
New Member

Female Posts : 15
Reputation : 1
Language : English

Back to top Go down

Re: BBcode to make tables look better

Post by runawayhorses on January 27th 2013, 9:17 am

Hi, glad its helping you! You can do that by adding a width attribute like I did to the code below, I added "width="500".

Code:
[table style="margin: 0 auto;" border="1" width="500"][tr][td]row 1, cell 1[/td][td]row 1, cell 2[/td][/tr][tr][td]row 2, cell 1[/td][td]row 2, cell 2[/td][/tr][/table]

Result:
row 1, cell 1row 1, cell 2
row 2, cell 1row 2, cell 2



You can also add height size, background and text color, center the text, border color, colspan, etc.


Code:
[color=#00BFFF][size=20]
[table style="margin: 0 auto;" border="2" bordercolor="#FF0000" width="500" height="350" bgcolor="#000000"][td colspan="2" bgcolor="#00008B"][center][color=#FFFFFF]This top is called a colspan[/color][/center][/td][tr][td][center]row 1, cell 1[/center][/td][td][center]row 1, cell 2[/center][/td][/tr][tr][td][center]row 2, cell 1[/center][/td][td][center]row 2, cell 2[/center][/td][/tr][tr][td][center]row 3, cell 1[/center][/td][td][center]row 3, cell 2[/center][/td][/tr][td colspan="2" bgcolor="#00008B"][center][color=#FFFFFF]Here is another colspan[/color][/center][/td][tr][td][center]row 4, cell 1[/center][/td][td][center]row 4, cell 2[/center][/td][/tr][tr][td][center]row 5, cell 1[/center][/td][td][center]row 5, cell 2[/center][/td][/tr][tr][td][center]row 6, cell 1[/center][/td][td][center]row 6, cell 2[/center][/td][/tr][td colspan="2" bgcolor="#00008B"][center][color=#FFFFFF]We'll finish with colspan[/color][/center][/td][/table][/color][/size]

Result:

This top is called a colspan
row 1, cell 1
row 1, cell 2
row 2, cell 1
row 2, cell 2
row 3, cell 1
row 3, cell 2
Here is another colspan
row 4, cell 1
row 4, cell 2
row 5, cell 1
row 5, cell 2
row 6, cell 1
row 6, cell 2
We'll finish with colspan

runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 162
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum