BBcode to make tables look better

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!

Can you be more specific?
What tables?

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

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

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

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]

I sended you one template on 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 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.

hey does anyone know why i cannot center tables?

like

Code:

 

doesn't work

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.

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]

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

like

Code:

 

doesn't work

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

like

Code:

 
[center] TABLESTUFFHERE [/center]


????

SoSweet wrote:

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

like

Code:

 

doesn't work

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?

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?

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 ?

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 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

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 1	row 1, cell 2
row 2, cell 1	looooooooooong 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.

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 1	row 1, cell 2
row 2, cell 1	row 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