当前位置:首页 > Web开发 > 正文

1、不使用JS完成表格的隔行换色: htmlheadmeta charset="utf-8"title成绩登记表格/t

2024-03-31 Web开发

1、不使用JS完成表格的隔行换色:

<html> <head> <meta charset="utf-8"> <title>成效登记表格</title> </head> <body> <table cellpadding="5" cellspacing="3"> <caption>成效登记表</caption> <tr> <th bgcolor="blanchedalmond "align="middle" >序号</th> <th bgcolor="blanchedalmond "align="middle ">学号</th> <th bgcolor="blanchedalmond "align="middle ">姓名</th> <th bgcolor="blanchedalmond "align="middle ">平时成效</th> <th bgcolor="blanchedalmond "align="middle ">期末成效</td> <th bgcolor="blanchedalmond "align="middle ">学期总成效</th> </tr> <tr> <td>1</td> <td>20100300201</td> <td>张小丽</td> <td>95</td> <td>95</td> <td>95</td> </tr> <tr> <td bgcolor="grey "align="middle ">2</td> <td bgcolor="grey "align="middle ">20100300202</td> <td bgcolor="grey "align="middle ">李宁</td> <td bgcolor="grey "align="middle ">90</td> <td bgcolor="grey "align="middle ">88</td> <td bgcolor="grey "align="middle ">89</td> </tr> <tr> <td>3</td> <td>20100300203</td> <td>刘梅</td> <td>98</td> <td>92</td> <td>95</td> </tr> <tr> <td bgcolor="grey "align="middle ">4</td> <td bgcolor="grey "align="middle ">20100300204</td> <td bgcolor="grey "align="middle ">王刚</td> <td bgcolor="grey "align="middle ">98</td> <td bgcolor="grey "align="middle ">90</td> <td bgcolor="grey "align="middle ">94</td> </tr> <tr> <td>5</td> <td>20100300205</td> <td>郑军</td> <td>90</td> <td>85</td> <td>87</td> </tr> <tr> <td bgcolor="grey "align="middle ">6</td> <td bgcolor="grey "align="middle ">20100300206</td> <td bgcolor="grey "align="middle ">杨波</td> <td bgcolor="grey "align="middle ">80</td> <td bgcolor="grey "align="middle ">80</td> <td bgcolor="grey "align="middle ">80</td> </tr> </table> </body> </html>

使用这种要领需要在每一行的每一个空格设置表格的颜色,实现过程相比拟较繁琐。

2、具体实现细节:

(1)<thead>标签:显示表格的表头内容

<thead> <tr> <th align="middle" >序号</th> <th align="middle ">学号</th> <th align="middle ">姓名</th> <th align="middle ">平时成效</th> <th align="middle ">期末成效</td> <th align="middle ">学期总成效</th> </tr> </thead>

(2)<tbody> 标签表格主体内容

<tbody> <tr> <td align="middle ">1</td> <td align="middle ">20100300201</td> <td align="middle ">张小丽</td> <td align="middle ">95</td> <td align="middle ">95</td> <td align="middle ">95</td> </tr> <tr> <td align="middle ">2</td> <td align="middle ">20100300202</td> <td align="middle ">李宁</td> <td align="middle ">90</td> <td align="middle ">88</td> <td align="middle ">89</td> </tr> <tr> <td align="middle ">3</td> <td align="middle ">20100300203</td> <td align="middle ">刘梅</td> <td align="middle ">98</td> <td align="middle ">92</td> <td align="middle ">95</td> </tr> <tr> <td align="middle ">4</td> <td align="middle ">20100300204</td> <td align="middle ">王刚</td> <td align="middle ">98</td> <td align="middle ">90</td> <td align="middle ">94</td> </tr> <tr> <td align="middle ">5</td> <td align="middle ">20100300205</td> <td align="middle ">郑军</td> <td align="middle ">90</td> <td align="middle ">85</td> <td align="middle ">87</td> </tr> <tr> <td align="middle ">6</td> <td align="middle ">20100300206</td> <td align="middle ">杨波</td> <td align="middle ">80</td> <td align="middle ">80</td> <td align="middle ">80</td> </tr>

</tbody>

(3)函数部分:

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/31095.html