2. it技术
  3. 表格练习

表格练习

it2023-11-28  74

表格1-花名册：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <!-- 表格标签，table（表）、tr（表格中的行）、td（普通表格）和th（表头），写在表头中的内容会自动居中和加粗 --> <!-- border="1"表格有边界；border="0"表格无边界。 --> <!-- 在table中可设置某些属性，如cellpadding可设置内容距离边框的距离即内边距，cellspacing可设置外边距，width可设置表格的宽度，height用来设置表格的高度 --> <!-- 在行属性中可以设置表格高度height，在列属性中可设置表格宽度width，即行高列宽 --> <body> <table border="1" cellpadding="20" cellspacing="0" width="400" height="205"> <tr > <th>姓名</th> <th>年龄</th> <th>性别</th> <th>出生日期</th> </tr> <tr> <td>张三</td> <td>16</td> <td>女</td> <td>2020-12-25</td> </tr> <tr> <td>张三</td> <td>16</td> <td>女</td> <td>2020-12-25</td> </tr> </table> </body> </html>

运行结果：

表格2-简历：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <!-- bgcolor可设置背景颜色，颜色也可通过屏幕取色器吸取 --> <!-- colspan单元格跨行列合并，在同行之间进行，如colspan="4"，将同一个表格行中的多余单元格删除 sawspan行合并，在同一列之间进行，如sawspan="4" 需要将不同单元格中的对应单元格删除 --> <body> <table border="1"> <tr> <th bgcolor="aquamarine">姓名</th> <th width="100"></th> <th bgcolor="aquamarine"> 性别 </th> <th></th> <th rowspan="5" width="150" height="200"> </th> </tr> <tr> <td bgcolor="aquamarine"> 出生年月 </td> <td></td> <td bgcolor="aquamarine"> 籍贯 </td> <td></td> </tr> <tr> <td bgcolor="aquamarine"> 政治面貌 </td> <td></td> <td bgcolor="aquamarine">民族</td> <td></td> </tr> <tr> <td bgcolor="aquamarine"> 健康状况 </td> <td></td> <td bgcolor="aquamarine">婚姻状况</td> <td></td> </tr> <tr> <td bgcolor="aquamarine"> 联系电话 </td> <td></td> <td bgcolor="aquamarine">电子邮件</td> <td>www.baidu.com</td> </tr> <tr> <td bgcolor="aquamarine">求职意向</td> <td colspan="4" height="40"></td> </tr> <tr> <td bgcolor="aquamarine">工作经历</td> <td colspan="4" height="200"></td> </tr> <tr> <td bgcolor="aquamarine">教育经历</td> <td colspan="4" height="40"></td> </tr> <tr> <td bgcolor="aquamarine">英语水平</td> <td colspan="4" height="40"></td> </tr> <tr> <td bgcolor="aquamarine">计算机水平</td> <td colspan="4" height="40"></td> </tr> <tr> <td bgcolor="aquamarine">自我评价</td> <td colspan="4" height="40"></td> </tr> </table> </body> </html>

运行结果：

表格3-财务报表：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <!-- align设置水平位置，left(向左对齐，默认)，center（居中）和right（向右对齐） --> <!-- vaign设置垂直位置，top（向上对齐），middle（中间对齐）和bottom（向下对齐） --> <body align="center"> <b>财务报表</b> <table align="center" border="1" cellpadding="10" cellspacing="0"> <tr > <td>季度</td> <td colspan="2" align="center">收入（元）</td> <td colspan="2" align="center">支出（元）</td> </tr> <tr> <td></td> <td>建筑</td> <td>房地产</td> <td>销售服务</td> <td>办公</td> </tr> <tr> <td>第一季度</td> <td>306000</td> <td>282000</td> <td>90000</td> <td>10000</td> </tr> <tr> <td>第二季度</td> <td>450000</td> <td>364000</td> <td>54000</td> <td>20000</td> </tr> </table> </body> </html>

运行结果：

表格4-财务报表：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body align="center"> <table border="1" cellpadding="10" cellspacing="0"> <tr> <td colspan="8">财务报表</td> </tr> <tr> <td colspan="2">品牌</td> <td colspan="3">春装</td> <td colspan="3">夏装</td> </tr> <tr> <td colspan="2"></td> <td>男装</td> <td>女装</td> <td>童装</td> <td>男装</td> <td>女装</td> <td>童装</td> </tr> <tr> <td rowspan="2">JC</td> <td>牛仔系列</td> <td>116</td> <td>98</td> <td>68</td> <td>88</td> <td>86</td> <td>46</td> </tr> <tr> <td>休闲系列</td> <td>120</td> <td>100</td> <td>80</td> <td>98</td> <td>88</td> <td>50</td> </tr> </table> </body> </html>

运行结果：

表格5-课程表：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <!-- 若需要生成的表格行和列比较多则可用 table>行数tr*>列数td* 接下来按Tab键 --> <body align="center"> <h4>课程表</h4> <table align="center" border="1" cellpadding="10" cellspacing="5"> <tr> <td>项目</td> <td colspan="5">上课</td> <td colspan="2">休息</td> </tr> <tr bgcolor="bisque"> <td>星期</td> <td>星期一</td> <td>星期二</td> <td>星期三</td> <td>星期四</td> <td>星期五</td> <td>星期六</td> <td>星期日</td> </tr> <tr> <td rowspan="4">上午</td> <td>语文</td> <td>数学</td> <td>英语</td> <td>英语</td> <td>物理</td> <td>计算机</td> <td rowspan="4">休息</td> </tr> <tr> <td>数学</td> <td>数学</td> <td>地理</td> <td>化学</td> <td>历史</td> <td>计算机</td> </tr> <tr> <td>语文</td> <td>数学</td> <td>历史</td> <td>计算机</td> <td>物理</td> <td>化学</td> </tr> <tr> <td>数学</td> <td>数学</td> <td>地理</td> <td>化学</td> <td>历史</td> <td>计算机</td> </tr> <tr> <td rowspan="2">下午</td> <td>数学</td> <td>数学</td> <td>地理</td> <td>化学</td> <td>历史</td> <td>计算机</td> <td rowspan="2">休息</td> </tr> <tr> <td>数学</td> <td>数学</td> <td>地理</td> <td>化学</td> <td>历史</td> <td>计算机</td> </tr> </table> </body> </html>

运行结果：

表格6-水果展示：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <!-- 用<hr />设置的下划线默认颜色为灰色，用color=""可设置下划线颜色如<hr color="red"/> --> <body> <h4 align="center">水果展示</h4> <hr color="red" /> <table cellpadding="30" cellspacing="0" border="0" align="center"> <tr> <td> <img src="img/banana.jpg" /> </td> <td> 名称：香蕉<br /> 原价：<del>￥19.80</del><br /> 现价：￥9.8<br /> 产地：海南<br /> </td> <td> <img src="img/pineapple.jpg" /> </td> <td> 名称：菠萝<br /> 原价：<del>￥19.80</del><br /> 现价：￥9.8<br /> 产地：广西<br /> </td> <td> <img src="img/banana.jpg" /> </td> <td> 名称：菠萝<br /> 原价：<del>￥19.80</del><br /> 现价：￥9.8<br /> 产地：广西<br /> </td> </tr> <tr> <td> 名称：桃子<br /> 原价：<del>￥19.80</del><br /> 现价：￥9.8<br /> 产地：陕西<br /> </td> <td> <img src="img/peach.jpg" /> </td> <td> 名称：梨<br /> 原价：<del>￥19.80</del><br /> 现价：￥9.8<br /> 产地：陕西<br /> </td> <td> <img src="img/pear.jpg" /> </td> <td> 名称：葡萄<br /> 原价：<del>￥19.80</del><br /> 现价：￥9.8<br /> 产地：陕西<br /> </td> <td> <img src="img/grape.jpg" /> </td> </tr> </table> <hr color="red"/> <p align="center" > <font color="darkgray"> 公司地址：陕西省西安市<br /> 电话：029-98765432 </font> </p> </body> </html>

运行结果：

最新回复(0)