How do I had more than one style to a table?
3 posters
Page 1 of 1
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.
This code is for aligning the text to the top.
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
Re: How do I had more than one style to a table?
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.
Samantha.
Guest- Guest
Re: How do I had more than one style to a table?
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 !
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 :
Then style the table with CSS using the class :
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 :
If any questions let me know.
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;
}
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.
Re: How do I had more than one style to a table?
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.
Samantha.
Guest- Guest
Re: How do I had more than one style to a table?
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.
Re: How do I had more than one style to a table?
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.
I can try to explain it to you. There's also this topic if you're looking for some learning resources.
Re: How do I had more than one style to a table?
For example, I add this CSS rule to my 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
to my [table] tag. Like this :
Which would give the following result :
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.
- Code:
.post-table td {
border: 3px solid blue;
vertical-align:top;
}
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:
[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.
Re: How do I had more than one style to a table?
Topic solved and archived
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Similar topics
» Script to Remove Style of Table
» announcement and tutorial topic table style on this forum
» Table Column Width and Table Grid Help
» Do I Need This In My CSS Style Sheet
» pagination style
» announcement and tutorial topic table style on this forum
» Table Column Width and Table Grid Help
» Do I Need This In My CSS Style Sheet
» pagination style
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum