表格和表单的使用

表单<form></form>

效果图：

---

<form action="" method="get">        <b>账号：<input type="text" name="username" placeholder="不超过八个字符"><br><br>        密码：<input type="password" name="password" placeholder="6-16个字符"><br><br>        邮箱：<input type="email" name="email" id="" placeholder="[e-mail]"><br><br>        年龄：<input type="text" name="age"><br><br>        生日：<input type="date" name="born"><br><br>        课程：<select name="kechen" id="">            <option value="python">python</option>            <option value="html" selected="selected">html</option>            <option value="java">java</option>            <option value="go">go</option>              </select><br><br>        爱好：<input type="checkbox" name="game">打游戏            <input type="checkbox" name="video">看视频            <input type="checkbox" name="code">撸代码<br><br>        性别：<input type="radio" name="sex">男            <input type="radio" name="sex">女            <input type="radio" name="sex">保密<br><br>        简介：<textarea name="jianjie" id="" cols="30" rows="10"></textarea><br>            <input type="submit"></b>    </form>

---

表格<table></table>

效果图

---

CSS代码：

<style>        #one{            background-color: cornflowerblue;            height: 20px;        }        #ziliao{            background-color: rgb(200, 236, 248);        }        #photo{            width: 100px;            height: auto;        }        #pingjia{            width: 100px;            height: auto;            text-align: left;        }        table,table tr th,table,tr,td{            border: 1px solid;        }        table{          width: auto;text-align: center; border-collapse: collapse;        }    </style>

---

<table>        <tr id="one" >            <th colspan="5"></th>        </tr>        <tr id="ziliao">            <th colspan="5">-----基本资料-----</th>        </tr>        <tr>            <td>姓名：</td>            <td>马小姐</td>            <td>性别：</td>            <td>女</td>            <td rowspan="7" id="photo"></td>        </tr>        <tr>            <td>学历：</td>            <td>中专</td>            <td>身高：</td>            <td>CM</td>        </tr>        <tr>            <td>籍贯：</td>            <td>广东</td>            <td>出身年月：</td>            <td>1991-12-01</td>        </tr>        <tr>            <td>毕业院校：</td>            <td colspan="3">汕头中专</td>        </tr>        <tr>            <td>主修专业：</td>            <td colspan="3">管理学==>会计学</td>        </tr>        <tr>            <td>工作经验：</td>            <td>未知</td>            <td>目前年薪：</td>            <td>保密/年</td>        </tr>        <tr>            <td>有效证件：</td>            <td>身份证</td>            <td>证件号码：</td>            <td>******************</td>        </tr>        <tr id="one" >            <th colspan="5"></th>        </tr>        <tr id="ziliao">            <th colspan="5">-----求职意向-----</th>        </tr>        <tr>            <td>寻求职位：</td>            <td colspan="4">出纳员：会计文员</td>        </tr>        <tr>            <td>寻职地区：</td>            <td>罗湖区 福田区</td>            <td>工资待遇：</td>            <td colspan="2">面议</td>        </tr>        <tr>            <td>自我评价：</td>            <td colspan="4" id="pingjia"><p>巴拉巴拉巴巴巴拉巴拉巴巴拉巴拉拉巴巴巴拉巴拉巴巴拉巴拉拉巴巴巴拉巴拉巴巴拉巴拉拉巴巴巴拉巴拉巴巴拉巴拉巴拉巴拉巴拉巴巴巴拉巴拉巴巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉</p></td>        <tr id="one" >            <th colspan="5"></th>        </tr>            <tr id="ziliao">            <th colspan="5">-----教育培训-----</th>        </tr>        <tr>            <td>起止时间</td>            <td>就读院校名称</td>            <td>主修专业</td>            <td colspan="2">学历</td>        </tr>        <tr>            <td>2009.09-2012.07</td>            <td>汕头中专</td>            <td>会计电算化</td>            <td colspan="2">中专</td>        </tr>        <tr id="one" >            <th colspan="5"></th>        </tr>        <tr id="ziliao">            <th colspan="5">-----工作经验-----</th>        </tr>        <tr>            <td>就职公司：</td>            <td>深圳市有限公司</td>            <td>公司行业：</td>            <td colspan="2">其他</td>        </tr>        <tr>            <td>就职时间：</td>            <td>2011年12月到如今</td>            <td>就职部门：</td>            <td colspan="2">财务部</td>        </tr>        <tr>            <td>公司性质：</td>            <td>其他</td>            <td>就职职位：</td>            <td colspan="2">出纳员</td>        </tr>        <tr>            <td>工作描述：</td>            <td colspan="4" id="pingjia"><p>吧啦吧啦拉巴巴巴拉巴拉巴巴拉巴拉拉巴巴巴拉巴拉巴巴拉巴拉拉巴巴巴拉巴拉巴巴拉巴拉拉巴巴巴拉巴拉巴巴拉巴拉拉巴巴巴拉巴拉巴巴拉巴拉吧啦吧啦吧啦</p></td>        </tr>    </tr>    <tr id="one" >        <th colspan="5"></th>    </tr>    <tr id="ziliao">        <th colspan="5">-----联系方式-----</th>    </tr>    <tr>        <td>联系电话：</td>        <td colspan="4">13456789012</td>    </tr>    <tr>        <td>联络手机：</td>        <td colspan="4">13456789012</td>    </tr>    <tr>        <td>电子邮件：</td>        <td colspan="4">[e-mail]</td>    </tr>    </table>