`
wkf41068
  • 浏览: 457508 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

table中交替展现背景色

 
阅读更多
<table>
  <c:forEach items=
    "${entryList}" var="blogEntry" varStatus="status">
    <tr><td align="left" class="blogTitle">
      <c:out value="${status.count}"/>.
      <c:out value="${blogEntry.title}" escapeXml="false"/>
    </td></tr>
    <tr><td align="left" class="blogText">
      <c:out value="${blogEntry.text}" escapeXml="false"/>
    </td></tr>
  </c:forEach>
</table>



<table>
  <c:forEach items=
    "${entryList}" var="blogEntry" varStatus="status">
    <tr>
    <td align="left" class="blogTitle">
      <c:if test="${${status.count}%2==0"}">
        <font color="#FF0000">
          <c:out value="${status.count}"/>.
           <c:out value="${blogEntry.title}" escapeXml="false"/>
         </font>
      <c:if/>

    </td></tr>
    <tr><td align="left" class="blogText">
      <c:out value="${blogEntry.text}" escapeXml="false"/>
    </td></tr>
  </c:forEach>
</table>


分享到:
评论

相关推荐

    利用CSS控制表格table的交替颜色

    在这个例子中,我们使用`:nth-child(odd)`和`:nth-child(even)`选择器来分别给奇数行和偶数行设置不同的背景颜色。这样,每一行都会自动根据其位置呈现红色或蓝色背景,从而实现交替着色的效果。 #### 示例2:行和...

    LabVIEW表格选中行的上色、改变背景颜色.rar

    在处理大量数据时,为了提高用户交互体验和数据可读性,我们经常需要对表格中的行进行特定的高亮显示,比如选中行的上色或改变背景颜色。下面将详细介绍如何在LabVIEW中实现这一功能。 首先,我们需要了解LabVIEW...

    表格table隔行换色以及点击整行变色.rar

    这段代码中,`nth-child(even)` 选择器选取了表格中的偶数行,即第二行、第四行等,并设置了它们的背景颜色。`hover`伪类则会在鼠标悬停在某行上时改变其背景颜色。 接下来,我们探讨点击整行变色的效果。这需要...

    用CSS控制表格的交替颜色.rar

    在表格中,我们通常为偶数行和奇数行设置不同的背景色,以形成视觉上的差异。 以下是一个简单的示例,展示如何为表格的奇数行和偶数行设置不同的背景色: ```css /* 选择所有的表格行 */ table tr { /* 避免默认...

    用JS控制表格的交替颜色.rar

    在CSS中,我们可以为表格的每一行设置不同的类,比如`.even`和`.odd`,然后分别定义它们的背景色。例如: ```css .table tr.even { background-color: #F5F5F5; } .table tr.odd { background-color: #FFFFFF; }...

    jquery css 设置table的奇偶行背景色示例

    在网页设计中,经常需要对表格(table)的行进行美化,其中一种常见的方法是为奇偶行设置不同的背景色,以提高可读性和视觉效果。这个示例讲解了如何使用jQuery和CSS来实现这一功能。 首先,我们需要理解CSS部分。...

    表格奇偶行不同背景色.rar

    对于表格,我们可以使用`:nth-child()`伪类选择器来为奇数行和偶数行设置不同的背景颜色。例如: ```css table tr:nth-child(odd) { background-color: #f2f2f2; /* 奇数行背景色 */ } table tr:nth-child(even) ...

    HTML Table 漂亮的CSS

    2. **背景色与文字颜色**:`background-color`和`color`属性用于设置单元格或表头的背景和文字颜色,以增加对比度和视觉吸引力。 3. **圆角表格**:通过`border-radius`属性实现圆角效果,使表格看起来更柔和。例如...

    实现Table报表格式

    例如,.table-striped可以为表格添加交替的行背景色,.table-bordered则可以添加边框,增加表格的结构感。 在实现表格的交互功能时,通常会使用JavaScript库,如jQuery或更现代的React、Vue等。在这个项目中,可能...

    CSS样式Table[7] - table_zebra

    斑马纹表格通常是指交替改变行背景色的表格,这样可以让表格的每一行在视觉上有所区分,尤其是在大量数据的展示中,可以降低用户的视觉疲劳,帮助他们更容易地跟踪和区分不同的行。 要实现CSS斑马纹效果,我们需要...

    table样式.zip

    5. **条纹效果**:通过交替设置不同背景色,可以实现类似斑马纹的条纹效果,例如:`.table tr:nth-child(even) { background-color: #f2f2f2; }` 6. **单元格合并**:使用`colspan`和`rowspan`属性可以合并单元格,...

    漂亮的Table CSS

    4. **行和列的交替颜色**:利用`:nth-child()`伪类选择器,可以为偶数行或奇数列添加不同的背景色,如`tr:nth-child(even) {background-color: #f2f2f2;}`。 5. **表头样式**:`thead`元素可以帮助我们设置表头的...

    CSS+JS实现table隔行变色

    当表格内容变化时,遍历所有可见的行,根据索引的奇偶性添加`even-row`或`odd-row`类,这两个类在CSS中定义了相应的背景颜色。 当然,如果你不希望依赖jQuery,原生JavaScript同样可以实现类似的功能,只是代码会...

    企业级Table样式

    3. **隔行换色**:交替行颜色的设计,有助于区分不同行的信息,提高数据对比度,使用户在浏览长表格时能迅速分辨出行间的差异,增强可读性。 4. **响应式设计**:考虑到现代应用常常需要在不同设备上运行,这套...

    JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享

    利用模运算符(%)来判断行号是否为偶数,以此来交替设置背景颜色。例如,如果行号是奇数,则背景色设置为白色('white'),而偶数行则设置为浅黄色('#F4FAC7')。这样可以实现隔行换色的效果。 3. **新增行的实现...

    html Table 表头固定的实现

    首先,我们需要为表头定义一个CSS类,比如这里的.table-head,然后为其设置固定的高度和背景颜色,确保它在视觉上与表格主体(.table-body)有所区分。重要的是,给这个表头添加一个合适的padding-right样式。这个...

    样式表达式实现交替显示table行颜色

    在网页设计中,为了提高可读性和用户体验,经常会在表格(table)中使用交替行颜色的方法,使得用户能更容易区分不同的数据行。本主题探讨的是如何通过样式表达式(CSS Expression)来实现这一功能,虽然现代浏览器...

    经典使用的table样式

    2. **行和列的交替颜色**:通过为奇数行或偶数行设置不同的背景色,可以增加表格的视觉层次感,帮助用户更容易区分不同行的数据。 3. **头部和脚部样式**:表头(thead)和表脚(tfoot)通常会有特殊的背景色和字体...

    Table常用的几种CSS样式

    - `background-color`: 用于设定表格、行或单元格的背景颜色。 - `background-image`: 可以添加背景图片,为表格增加视觉层次感。 3. **单元格间距**: - `cellspacing`(HTML属性):控制单元格之间的距离,但...

    Jquery + CSS 制作条纹table表格

    2. **CSS样式**:接着,定义CSS样式,为奇数行和鼠标悬停时的行设置不同的背景颜色。 ```css table { width: 100%; border-collapse: collapse; } tr.stripe-row:nth-child(odd) { background-color: #f9f9f9; ...

Global site tag (gtag.js) - Google Analytics