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
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.
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.
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.
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; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With