html的第二天

注册表实例

 <h4>青春不常在，抓紧谈恋爱</h4>
    <form action="xxx.html">
    <table width="600" border="0" cellpadding="0" cellspacing="0" \>
        <!--第一行-->
        <tr>
            <td>姓名：</td>
            <td><input type="text" /></td>
        </tr>
        <!--第二行-->
        <tr>
            <td>性别:</td>
            <td>
                <input type="radio" name="sex" id="nan" /><label for="nan"><img src="images/man.jpg" /> 男</label>
                <input type="radio" name="sex" id="nv" /><label for="nv"><img src="images/women.jpg" /> 女</label>

            </td>
        </tr>
        <!--第三行-->
        <tr>
            <td>出生日期：</td>
            <td>
                <select>
                    <option>请选择年份</option>
                    <option>1999</option>
                    <option>2000</option>
                </select>
                <select>
                    <option>请选择月份</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                </select>
                <select>
                    <option>请选择日期</option>
                    <option>1</option>
                    <option>2</option>
                </select>
            </td>
        </tr>
        <!--第四行-->
        <tr>
            <td>家庭地址</td>
            <td><input type="text" value="北京" /></td>
        </tr>
        <!--第五行-->
        <tr>
            <td>婚姻状态：</td>
            <td><input type="radio" name="marry" />已婚 <input type="radio" name="marry" checked="checked" />未婚 <input type="radio" name="marry" />离异</td>
        </tr>
        <!--第六行-->
        <tr>
            <td>学历:</td>
            <td>
                <select>
                    <option>幼儿园</option>
                    <option>大学</option>
                    <option>博士</option>
                </select>
            </td>
        </tr>
        <!--第七行-->
        <tr>
            <td>喜欢的类型</td>
            <td>
                <input type="checkbox" name="type" />妩媚的
                <input type="checkbox" name="type" />可爱的
            </td>
        </tr>
        <!--第八行-->
        <tr>
            <td>个人简介</td>
            <td><textarea>个人简介：</textarea></td>
        </tr>
        <!--第九行-->
        <tr>
            <td></td>
            <td><input type="submit" value="免费注册" /></td>
        </tr>
        <!--第十行-->
        <tr>
            <td></td>
            <td><input type="checkbox" checked="checked" />我已同意注册条款</td>
        </tr>
        <tr>
            <td></td>
            <td><a href="#">已注册，立即登陆</a></td>
        </tr>
        <tr>
            <td></td>
            <td>
                <h5>我承诺</h5>
                <ul>
                    <li>啦啦啦</li>
                    <li>ninini</li>
                </ul>
            </td>
        </tr>
    </table>
    </form>
</body>

下面是运行截图

这里运用了两列的表格

表格标签

<table width="600" border="0" cellpadding="0" cellspacing="0" \>
<!--这个符号是注释--!>
<!--第一行--!>
<tr>
<td></td>
<td></td>
</tr>
<!--第二行--!>
<tr>
<td></td>
<td></td>
</tr>

这里表格标签table的属性，一般实际开发种，不建议使用这些标签，一般般使用css就行。

下拉表单

<form>
        籍贯：
        <select>
            <option>北京</option>
            <option selected="selected">河南</option>
        </select>
        <textarea rows="3" cols="10"  >lalalalaalla;lalalala</textarea>
    </form>

这里select标签是下拉框，textarea是文本域。
下面是运行截图：

表格案例

<table align="center" cellpadding="0" cellspacing="0" border="1"  width="500">
        <thead>
            <tr>
                <th>排名</th>
                <th>关键词</th>
                <th>趋势</th>
                <th>进入搜索</th>
                <th>最近七日</th>
                <th>相关链接</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="up.jpg" /></td>
                <td>123</td>
                <td>456</td>
                <td><a href="#">贴吧</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>鬼</td>
                <td><img src="down.jpg" /></td>
                <td>123</td>
                <td>456</td>
                <td><a href="#">贴吧</a></td>
            </tr>
        </tbody>
    </table>

thead是表头，tbody是表格主体。thead里面是tr,tr里面是th，实际效果是加粗居中；而tbody里面是多个tr,tr里面是td。