Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to alternate table row background colors with JSTL?

Tags:

java

html

jstl

How do i alternate table rows with 2 seperate colours but i nid the header row to be of another colour. Is it possible? i am required to use the looping technique. oh no i aint allowed to post pictures. but it looks something like a table with 5 rows and the header row is blue in colour while the other 4 rows are red>white>red>white

like image 235
tim Avatar asked Jun 04 '11 16:06

tim


People also ask

How do I change the background color of a row in a table?

The HTML <tr> bgcolor Attribute is used to specify the background color of a table row. It is not supported by HTML 5. Attribute Values: color_name: It sets the background color by using the color name.

How do I alternate row colors in CSS?

A style selector in CSS is used to change the alternative rows. Using the CSS style selector, you can easily modify the color of the alternate rows. The nth-child() selector in CSS takes an even or odd parameter and then changes the color using the background-color property within this style selector.

Can the rows have different Colours in a table?

Select the range of cells that you want to format. Click Home > Format as Table. Pick a table style that has alternate row shading. To change the shading from rows to columns, select the table, click Design, and then uncheck the Banded Rows box and check the Banded Columns box.


1 Answers

Use <c:forEach> with a varStatus and some lines of CSS.

<table>
    <thead>
        <tr>
            <th>header1</th>
            <th>header2</th>
            <th>header3</th>
        </tr>
    </thead>
    <tbody>
        <c:forEach items="${bean.list}" var="item" varStatus="loop">
            <tr class="${loop.index % 2 == 0 ? 'even' : 'odd'}">
                <td>${item.property1}</td>
                <td>${item.property2}</td>
                <td>${item.property3}</td>
            </tr>
        </c:forEach>
    <tbody>
</table>

with CSS

tr.even { background: red; }
tr.odd { background: white; }

In the above example, the header is just separated from the body. When the table row index in the body is a multiple of 2 (even), then it get class="even", otherwise class="odd" (open page in browser, rightclick it and View Source to see it yourself). With CSS you can just control the style of the invididual elements. To give the header row a blue background, just add

thead tr { background: blue; }
like image 57
BalusC Avatar answered Oct 13 '22 01:10

BalusC