漂亮的html表格源码

最新推荐文章于 2024-09-26 20:38:32 发布

shareinfo2018

最新推荐文章于 2024-09-26 20:38:32 发布

阅读量1.8w

点赞数 7

分类专栏： web

本文链接：https://blog.csdn.net/chenyefei/article/details/51511205

版权

web 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格测试</title>
<style type="text/css">
table{ border-collapse:collapse;border:solid 1px #ccc;width:600px;}
td{ border:solid 1px #ccc; font-size:12px; height:30px; padding-left:10px;}
input{ font-size:12px; width:500px; height:23px; border:none;}
textarea{ width:98%; height:200px; border:none;}
.main{ margin:0 auto; width:600px;}
.d{background-color:#066; color:#fff; border:none; width:200px; height:30px; cursor:pointer;}
.over{background-color:#f60; color:#fff; border:none; width:200px; height:30px; cursor:pointer;}
</style>
</head>

<body>
<div class="main">
	<div>
    	<h1 align="center">填写表单</h1>
    </div>
    <div>
        <table>
          <tr>
            <td width="70">姓名：</td>
            <td><input type="text"></td>
          </tr>
          <tr>
            <td height="62">年龄：</td>
            <td><input type="text"></td>
          </tr>
          <tr>
            <td height="20" colspan="2">个人简历：</td>
          </tr>
          <tr>
            <td colspan="2" style="height:80px">
            <textarea name="" cols="" rows=""></textarea>
            </td>
          </tr>
          <tr>
            <td colspan="2">工作经验：</td>
          </tr>
          <tr>
            <td>单位：</td>
            <td><input type="text"></td>
          </tr>
          <tr>
            <td colspan="2" align="center">
                <input type="button" value="提交" class="d" οnmοuseοver="this.className='over'" οnmοuseοut="this.className='d'" />
            </td>
          </tr>
        </table>
	</div>
</div>
</body>
</html>

效果：