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.

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

View previous topic View next topic Go down

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

Post by Kamui on March 24th 2016, 3:55 pm

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"


Last edited by Kamui on March 25th 2016, 2:10 am; edited 1 time in total

Kamui
Forumember

Male Posts : 280
Reputation : 3
Language : English
Location : Greed Island

http://narutogaiden.forumotion.com/

Back to top Go down

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

Post by Guest on March 24th 2016, 4:18 pm

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 Sad

Hello Samantha.

Guest
Guest


Back to top Go down

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

Post by Ange Tuteur on March 24th 2016, 4:58 pm

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. Wink

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. Smile

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

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

Post by Guest on March 24th 2016, 5:55 pm

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

Samantha.

Guest
Guest


Back to top Go down

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

Post by Kamui on March 24th 2016, 6:19 pm

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.

Kamui
Forumember

Male Posts : 280
Reputation : 3
Language : English
Location : Greed Island

http://narutogaiden.forumotion.com/

Back to top Go down

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

Post by Ange Tuteur on March 24th 2016, 8:12 pm

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.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

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

Post by Kamui on March 24th 2016, 8:29 pm

Yes

Kamui
Forumember

Male Posts : 280
Reputation : 3
Language : English
Location : Greed Island

http://narutogaiden.forumotion.com/

Back to top Go down

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

Post by Ange Tuteur on March 25th 2016, 12:50 am

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.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

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

Post by Kamui on March 25th 2016, 2:08 am

Smile Thanks a ton!

Kamui
Forumember

Male Posts : 280
Reputation : 3
Language : English
Location : Greed Island

http://narutogaiden.forumotion.com/

Back to top Go down

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

Post by SLGray on March 25th 2016, 3:47 am

Topic solved and archived


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36648
Reputation : 2443
Language : English
Location : United States

http://ztwds.forumotion.com/

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