HTML学习笔记--表格

 HTML——table

通过对网络交友平台的模仿练习,熟悉和掌握表格中标签的用法以及特性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>千里姻缘一线牵</title>
    <style>
        tr{
            height: 40px;
        }
        td{
            width: 80px;
        }
    </style>
</head>
<body>
<table border="0px"width="600px"cellpadding="0" cellspacing="0" align="center">
    <caption><h3 style="font-family: 宋体"><stong>青春不常在,抓紧谈恋爱</stong></h3></caption>
<tr style="height: 40px">
<td>性别</td>
<td>
    <input type="radio" name="sex" id=""><img src="sjjy/man.jpg" alt="">男&nbsp<input type="radio" name="sex" id=""><img src="sjjy/women.jpg" alt="">女
</td>
</tr>
<tr>
    <td>生日</td>
    <td>
        <select name="请选择年" id="">
        <option value="1">1990</option>
        <option value="2">1991</option>
        <option value="3">1992</option>
        <option value="4">1993</option>
        <option value="5" selected>1994</option>
        </select>
        <select name="请选择月" id="">
            <option value="1" selected>1</option>
            <option value="2">3</option>
            <option value="3">6</option>
            <option value="4">9</option>
            <option value="5">12</option>
        </select>
        <select name="请选择日" id="">
            <option value="1">1</option>
            <option value="2">5</option>
            <option value="3">10</option>
            <option value="4">18</option>
            <option value="5" selected>26</option>
        </select>
    </td>
</tr>
    <tr>
        <td>所在地区</td>
        <td><input type="text" value="河南"></td>
    </tr>
    <tr>
        <td>婚姻状态</td>
        <td><input type="radio"name="hy">未婚<input type="radio"name="hy">离婚
            <input type="radio"name="hy">丧偶</td>
    </tr>
    <tr>
        <td>学历</td>
        <td><input type="text"value=""></td>
    </tr>
    <tr>
        <td>昵称</td>
        <td><input type="text"value=""></td>
    </tr>
    <tr>
        <td>月薪</td>
        <td><input type="text"value=""></td>
    </tr>
    <tr>
        <td>手机号</td>
        <td><input type="text"value=""></td>
    </tr>
    <tr>
        <td>喜欢的类型</td>
        <td>
            <input type="radio">妩媚
            <input type="radio">柔美
            <input type="radio">可爱
            <input type="radio">小鲜肉
            <input type="radio">型男
            <input type="radio">气质
        </td>
    </tr>
    <tr>
        <td>自我介绍</td>
        <td><textarea name="" id="" cols="50" rows="10"></textarea>
        </td>
    </tr>
    <tr>
        <td></td>
        <td><input type="image"src="sjjy/btn.png"></td>
    </tr>
    <tr>
        <td></td>
        <td>
            <input type="checkbox" checked="checked">
            <a href="#" target="_blank">我同意注册条款和会员加入标准</a>
        </td>
    </tr>
    <tr>
        <td></td>
        <td><a href="#" target="_blank">我是会员,立即登录</a></td>
    </tr>
    <tr>
        <td></td>
        <td style="width: 80px"><b>我承诺</b></td>
    </tr>
    <tr style="height: 120px">
        <td></td>
        <td>
            <ul>
                <li>年满18岁、单身</li>
                <li>抱着严肃的态度</li>
                <li>真诚寻找另一半</li>
            </ul>
        </td>

    </tr>
</table>
</body>
</html>

 

 

猜你喜欢

转载自blog.csdn.net/young_foryou/article/details/84574527