current community

your communities

more stack exchange communities

Stack Exchange
tour help
Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.
up vote 4 down vote favorite
1

I have a table with forms in two colors - the first row is one color, the second is the other. Can you please tell me if there is a way to optimize my code (such as with this)?

I have two CSS classes:

tr.content1{  
    background-color: #EFF4FA; 
}

tr.content2{  
    background-color: #F7FAFD; 
}

And the table looks this way:

    <tr class="content1">
        <td>Previous Plan:</td>
        <td>{{ form_row(form.prev_plan) }}</td>
    </tr>
    <tr class="content2">
        <td>Previous Server:</td>
        <td>{{ form_row(form.prev_srv) }}</td>
    </tr>

There is also a problem this way - I get some text in the second column in front of the form field.

share|improve this question
    
ewww... Tables and CSS together, what blasphemy! –  mseancole Aug 6 '12 at 14:52
1  
@showerhead: Well, how else would one structure and style tabular data? –  Lèse majesté Aug 6 '12 at 16:06
    
@Lèsemajesté: You can use spans and divs in this case, but there are other solutions too. –  mseancole Aug 6 '12 at 16:12
2  
@showerhead: That is far less semantic than using tables, and far less accessible to users of assistive technologies. DLs maybe. But tables are still the ideal and most proper way of presenting tabular data. –  Lèse majesté Aug 6 '12 at 16:16
1  
@showerhead: There is nothing "clean" about having a document entirely comprised of divs and spans and using CSS to imitate the proper semantic elements. That'd be like replacing all of your links with spans that have onclick handlers or using spans in place of h1, h2, h3.... divs and spans do not have a summary attribute, colgroups, proper table headers, nor do they have axis, scope, or headers attributes to associate the data cells with their respective headers. –  Lèse majesté Aug 6 '12 at 17:12

1 Answer 1

up vote 7 down vote accepted

Depending on your requirements (is javascript allowed, which browsers can be used), I'd go for a CSS only solution.

CSS:

table.zebra tr:nth-child(odd) {  
    background-color: #EFF4FA; 
}

table.zebra tr:nth-child(even) {  
    background-color: #F7FAFD; 
}

PHP:

<table class="zebra">
  <tr>
    <td>Previous Plan:</td>
    <td>{{ form_row(form.prev_plan) }}</td>
  </tr>
  <tr>
    <td>Previous Server:</td>
    <td>{{ form_row(form.prev_srv) }}</td>
  </tr>
</table>

Here's the catch:

You can't use these wonderfull selectors in every browser (IE < 9, I'm looking at you!). Only in most of them. There's a great explanation of the selector at w3c and an overview over browsers supporting it at caniuse.

And if you still want to use CSS3 selectors and need early IE support, there's javascript providing it (e.g. selectivizr - I never used it, but it's easy to find alternatives). Just search for "css3 selectors in IE" in your favorite search engine.

I guess this still doesn't solve your text overlay issues, but for that, you'd best point to an example page.

share|improve this answer
2  
+1 for the CSS3 method + polyfill for regressive enhancement. –  Lèse majesté Aug 6 '12 at 16:09

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.