4
\$\begingroup\$

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.

\$\endgroup\$
9
  • \$\begingroup\$ ewww... Tables and CSS together, what blasphemy! \$\endgroup\$
    – mseancole
    Commented Aug 6, 2012 at 14:52
  • 1
    \$\begingroup\$ @showerhead: Well, how else would one structure and style tabular data? \$\endgroup\$ Commented Aug 6, 2012 at 16:06
  • \$\begingroup\$ @Lèsemajesté: You can use spans and divs in this case, but there are other solutions too. \$\endgroup\$
    – mseancole
    Commented Aug 6, 2012 at 16:12
  • 2
    \$\begingroup\$ @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. \$\endgroup\$ Commented Aug 6, 2012 at 16:16
  • 1
    \$\begingroup\$ @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. \$\endgroup\$ Commented Aug 6, 2012 at 17:12

1 Answer 1

7
\$\begingroup\$

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.

\$\endgroup\$
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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