html中表格怎么实现隔行变色

 时间:2024-10-31 05:05:16

1、首先,写一个普通的表格出来。

html中表格怎么实现隔行变色

2、效果如下:

html中表格怎么实现隔行变色

3、发现这个表格没有边框,那就来加一个。

html中表格怎么实现隔行变色

4、效果如下:

html中表格怎么实现隔行变色

5、但是只有外边框没有内边框,下面加入内边框。

html中表格怎么实现隔行变色

6、效果如下:

html中表格怎么实现隔行变色

7、现在内边框有了,但是太难看,边框之间有间隙。那么继续修改,将内边框合并。

html中表格怎么实现隔行变色

8、效果如下:

html中表格怎么实现隔行变色

9、效果终于好点了,现在开始加入隔行变色效果。

html中表格怎么实现隔行变色
html中表格怎么实现隔行变色

10、效果如下:

html中表格怎么实现隔行变色

11、隔行变色效果终于出来了。不过还是有点不好看,继续优化。

html中表格怎么实现隔行变色
html中表格怎么实现隔行变色

12、最终效果如下:

html中表格怎么实现隔行变色

13、在上面的例子中,样式是写在每个tr上的,但在实际运用中,往往是通过循环来给每个tr豹肉钕舞设置样式的,比如在struts中就是使用下面的循环:

html中表格怎么实现隔行变色
  • CSS怎么设分别置大DIV里面的3个并排小DIV靠左 居中 靠右!
  • 通过CSS+DIV怎么将文字写在图片上方
  • 如何在HTML中插入图片
  • 怎样在html网页中插入视频
  • css如何单独对一个单元格设置样式
  • 热门搜索
    轻声慢步手抄报内容 关于欢度春节的手抄报 书的手抄报 文明礼仪的手抄报 科学小常识手抄报 中华经典诵读手抄报 低碳环保我先行手抄报 初一手抄报 竞选大队委手抄报 小学生诚信手抄报