Baxtex Posted April 6, 2011 Share Posted April 6, 2011 So, i got 2 tables in my HTML Document. How do i Assign them differant classes? Do i have to make every td element it's own class? Link to comment Share on other sites More sharing options...
thescientist Posted April 6, 2011 Share Posted April 6, 2011 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 More sharing options...
Baxtex Posted April 7, 2011 Author Share Posted April 7, 2011 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted April 7, 2011 Share Posted April 7, 2011 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 More sharing options...
Baxtex Posted April 7, 2011 Author Share Posted April 7, 2011 Aaa, now i understand! But are there any consequenses by just using Classes instead of ID:s? Link to comment Share on other sites More sharing options...
dsonesuk Posted April 7, 2011 Share Posted April 7, 2011 No, not really, if you are planning to use javascript to access a specific table, you would have to assign a unique id to these tables, but you won't have to change/remove the classes, just add a unique id reference to each table. Link to comment Share on other sites More sharing options...
Baxtex Posted April 7, 2011 Author Share Posted April 7, 2011 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? Link to comment Share on other sites More sharing options...
dsonesuk Posted April 7, 2011 Share Posted April 7, 2011 rowspan, colspan has no alternative in css, so yes you can still use them. Link to comment Share on other sites More sharing options...
Rough Divide Posted April 7, 2011 Share Posted April 7, 2011 colspan and rowspan are used for semantic purposes and change the structure of the table.I'm pretty sure you can't define them using CSS. Link to comment Share on other sites More sharing options...
Baxtex Posted April 7, 2011 Author Share Posted April 7, 2011 OkThanks! Link to comment Share on other sites More sharing options...
Rough Divide Posted April 7, 2011 Share Posted April 7, 2011 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 More sharing options...
Baxtex Posted April 7, 2011 Author Share Posted April 7, 2011 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? Link to comment Share on other sites More sharing options...
thescientist Posted April 7, 2011 Share Posted April 7, 2011 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. Link to comment Share on other sites More sharing options...
Baxtex Posted April 7, 2011 Author Share Posted April 7, 2011 I meant when i want images on my website, i just use img src as usual? Nothing with CSS? Link to comment Share on other sites More sharing options...
thescientist Posted April 7, 2011 Share Posted April 7, 2011 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 More sharing options...
Baxtex Posted April 7, 2011 Author Share Posted April 7, 2011 Ok Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.