How do I had more than one style to a table?

I want to add more than one style to my tables because I want to align the text at the top, and still keep the color of my borders. Every time I do this the color is erased.


This is the code for colored borders I am using, and below that is a code I want to add in the tables along with the colored borders with out messing it up.

Code:

[table][tr][td style="border: 3px solid blue"]hey! 1[/td]
[td style="border: 3px solid blue"]hey! 2[/td]
[/tr]
[tr][td style="border: 3px solid blue"]hey! 3[/td]
[td style="border: 3px solid blue"]hey! 4[/td]
[/tr]
[/table]


This code is for aligning the text to the top.

Code:

style="vertical-align:top"


You've got to add something called 'text-align' to that style. But I don't have time to look into this now, I'm afraid. I'm sorry

  Samantha.

Hi @Kamui,

You can add multiple css property:value; pairs to the style attribute. Just add a semi-colon after each pair to end it !

Code:

[table][tr][td style="border: 3px solid blue; vertical-align:top;"]hey! 1[/td]
[td style="border: 3px solid blue; vertical-align:top;"]hey! 2[/td]
[/tr]
[tr][td style="border: 3px solid blue; vertical-align:top;"]hey! 3[/td]
[td style="border: 3px solid blue; vertical-align:top;"]hey! 4[/td]
[/tr]
[/table]

That's a lot to write though, isn't it ? If you want, you can use a classname for your tables instead, like this :

BBCode :

Code:

[table class="post-table"][tr][td]hey! 1[/td]
[td]hey! 2[/td]
[/tr]
[tr][td]hey! 3[/td]
[td]hey! 4[/td]
[/tr]
[/table]

Then style the table with CSS using the class :

Code:

.post-table td {
  border: 3px solid blue;
  vertical-align:top;
}

This CSS goes into your stylesheet, so you can change the design of all tables with the class ".post-table" just by editing this little rule.

Note however, that "td" refers to the td tags. So, the rule above only changes the style of the td tags. If you just want to change the table style, use the class :

Code:

.post-table {
  background:#F00;
  border:1px dashed #00F;
}

If any questions let me know.

Thanks @Ange Tuteur for stepping in to this. Yeah, that's about the same kinda solution I'd be giving him. Ur the best!

Samantha.

I'm not understanding the CSS part so much, I tried it out but I see nothing special happening since I don't know what I'm doing.

Are you talking about the classname part ? e.g. class="post-table"

I can try to explain it to you. There's also this topic if you're looking for some learning resources.

Yes

For example, I add this CSS rule to my stylesheet :

Code:

.post-table td {
  border: 3px solid blue;
  vertical-align:top;
}

( Admin Panel > Display > Colors > CSS stylesheet )
This class will give my table cells a 3px blue border AND align the text to the top, IF I apply the class to the table. So if I ever want my table to align the text to the top with blue borders, I just need to add

Code: class="post-table"

to my [table] tag. Like this :

Code:

[table class="post-table"][tr][td]Hello[/td][/tr][/table]

Which would give the following result :

Hello

The advantage to using a class is that if you ever want to change the style globally, all you need to do is go to your stylesheet and edit the rule.

Thanks a ton!