Jump to content

How to style serveral tables?


Baxtex
 Share

Recommended Posts

if you have two tables, just give them two different classes. you could probably do Id's too.

.table1{  //styles}.table2{  //other styles}

<table class="table1></table><table class="table2></table>

Link to comment
Share on other sites

Yes but <table class="table1"> just defines the outer border, if i want to style the cells, do i have to guve them indivudal classes aswell?for example:

HTML code:<table class="rov"><tr><td>Anton</td><td>Gustafsson</td></tr><tr><td>Gustafsson</td><td>Anton</td></tr><tr><td>anton</td><td>gustafsson</td></tr></table>	<br><br><table class="rov2"><tr><td>Anton</td><td>Gustafsson</td></tr><tr><td>Gustafsson</td><td>Anton</td></tr><tr><td>anton</td><td>gustafsson</td></tr></table><br><br><br><table class="rov3"><tr><td>Anton</td><td>Gustafsson</td></tr><tr><td>Gustafsson</td><td>Anton</td></tr><tr><td>anton</td><td>gustafsson</td></tr></table>_________________________________________________________________________________________________________________________CSS code:.rov  {border:1px solid black; }.rov2  {border:1px solid black; }.rov3 {border-collapse:collapse; }table, td, th{border:1px solid black; }

If i do like above all td an th elements gets a border (as it sould) but if i just want to have td and th elemets in the rov3 table, then how do i do that? I tried to do like this: .rov3 {border-collapse:collapse; }.td1{border:1px solid black; }And my first Cell got a border. But this seems as a very time-consuming thing do to. Aren't there anyway to shorten this code? Do i realy have to write every cell as a class like this?:

HTML:<table class="rov4"><tr><td class="td10">Anton</td><td class="td20">Gustafsson</td></tr><tr><td class="td30">Gustafsson</td><td class="td40">Anton</td></tr><tr><td class="td50">anton</td><td class="td60">gustafsson</td></tr></table>CSS:.rov4 {border-collapse:collapse; }.td10 {border:1px solid black; }.td20 {border:1px solid black; }.td30 {border:1px solid black; }.td40 {border:1px solid black; }.td50 {border:1px solid black; }.td60 {border:1px solid black; }.rov4 {width:100%;}.td10 {height:50px;}.td10 {text-align:right;}

Very time-consuming indeed.About ID:s...I Don't undertsnad when you should use ID:s or Classes. I have just used classes in my whole document and there haven't been any faults.

Edited by Baxtex
Link to comment
Share on other sites

a id reference targets only one specific unique element, within a page, where a class can be used multiple times within a page, for duplicating the same styling for elements within a page.to target th, td cells with a table given a class or id use.rov {border:1px solid black; } /*relates to table with class .rov*/.rov th {border:2px solid black; } /*targets th in table with class .rov*/.rov td {border:1px solid red; } /*targets td in table with class .rov*/if you wanted change specific cells to say a different colour border, you would have to assign a class to those cells<table class="rov"><tr><td>Anton</td><td>Gustafsson</td></tr><tr><td class="cellstyle01">Gustafsson</td><td>Anton</td></tr><tr><td>anton</td><td>gustafsson</td></tr></table>and use.rov {border:1px solid black; } /*relates to table with class .rov*/.rov th {border:2px solid black; } /*targets th in table with class .rov*/.rov td {border:1px solid red; } /*targets td in table with class .rov*/.rov td.cellstyle01 {border:1px solid blue; } /*targets td with class cellstyle01 in table with class .rov*/

Link to comment
Share on other sites

AlrightI have just started codeing CSS, but do i still need use like rowspan (for example) or do they also exist in CSS code?Just to se if i'm right: A ID can only be used once. You can just use the id="hello" on one element. So if you have 2 elements who got the id="hello", it won't work? A class can be used on many elements. If i have a sentence; <p class="hello2"></p> i can make serveral <p class="hello"></p> instead of just once with that name?

Edited by Baxtex
Link to comment
Share on other sites

Just to se if i'm right: A ID can only be used once. You can just use the id="hello" on one element. So if you have 2 elements who got the id="hello", it won't work? A class can be used on many elements. If i have a sentence; <p class="hello2"></p> i can make serveral <p class="hello"></p> instead of just once with that name?
Yep, you're right.Some properties of the ID may work in certain contexts if you used a single one on multiple elements, but I heavily advise you don't try it since that would be against what the IDs are meant for in the first place.IDs would more use useful for styling anything that shows up once per page, but on multiple pages; like a web banner or navigation bar.
Link to comment
Share on other sites

Ok, I think I got the hang of it. W3C's explanation wasn't so easy to understand.Now i'm going a little off-topic, but when i want images in my html document, should i use the "normal" html tags to link to the picture when i use CSS?

Edited by Baxtex
Link to comment
Share on other sites

Ok, I think I got the hang of it. W3C's explanation wasn't so easy to understand.Now i'm going a little off-topic, but when i want images in my html document, should i use the "normal" html tags to link to the picture when i use CSS?
I'm not sure what you mean. If you want an image element in your markup, you use an <img> tag.CSS is strictly presentational, and has nothing to do with markup/creating elements, only styling them. So in CSS you use background-image.http://www.w3schools.com/css/css_background.aspNot sure if that helps, but feel free to elaborate if it doesn't. Edited by thescientist
Link to comment
Share on other sites

I meant when i want images on my website, i just use img src as usual? Nothing with CSS?
pretty much.http://www.w3schools.com/html/html_images.aspyou can use CSS to style the element itself, height, width, pseudo-classes, etc.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...