第二章 HTML 表格与表单

表格

1. 就近原则，在父元素和子元素都设置颜色，看元素理那个最近
2. align 在table 表示在整个屏幕的位置 在tr 或者td 表示内容的位置 valign 表示垂直内容的位置
3. cellspacing 单元格之间的距离 cellpadding

<table bgcolor="#00FFFF" align="center" border="1" cellspacing="1px" cellpadding="" width="50%" height="500px">
<tr valign="top" bgcolor="red">
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
</tr>
<tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
</tr>
<tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
</tr>
<tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
</tr>
<tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
</tr>
</table>    

效果图片.png

---

1. table 嵌套
2. 单元格的和并 colspan rowspan 合并的同时删除不需要的单元格

        <table border="" cellspacing="" cellpadding="" width="50%" align="center" height="500px">
            <tr>
                <td colspan="3">1</td>
            </tr>
            <tr>
                <td rowspan="3">1</td>
                <td>1</td>
                <td rowspan="3">1</td>
            </tr>
            <tr>
                <td>1</td>
            </tr>
            <tr>
                <td>1</td>
            </tr>
            <tr>
                <td colspan="3">1</td>
            </tr>
        </table>

效果图片.png

2.表单

1. input 标签 属性
   type：输入类型
   name：名称
   value：预设值
   size：输入框大小
   maxlength：最大输入值
2. type: text password file ...很多类型
3. textarea
   rows cols 行和宽的长度

        你的性别：
        <input type="radio" name="sex" value="male" checked="checked"/>男
        <input type="radio" name="sex" id="" value="female" />女<br />
        你喜欢的运动：
        <input type="checkbox" name="like" id="like" value="篮球"  checked="checked"/>篮球
        <input type="checkbox" name="like" id="like" value="篮球" />足球
        <input type="checkbox" name="like" id="like" value="篮球" />羽毛球
        <input type="checkbox" name="like" id="like" value="篮球" />冰棒球
        <br />
        您的出生日期：
        <select name="">
            <optgroup label="上半年">
                <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
                
            </optgroup>
            <optgroup label="下半年">
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            </optgroup>
        </select>月
        <br />
        <input type="submit" />
        <input type="button" name="" id="" value="自定义功能" />
        <input type="reset" name="" id=""  />

table实现登录页面

1. form表单
2. table 规划好布局，合并单元格
3. 按钮样式

<form id="form1" name="form1" action="#" method="post">
            <table  cellspacing="" cellpadding="">
                <tr>
                    <td>用户名：</td>
                    <td><input type="text" name="username" id="username" value="" /></td>
                    <td>[*请输入正确的用户名，不得出现特殊字符]</td>
                </tr>
                <tr>
                    <td>密码：</td>
                    <td><input type="password" name="password" id="password" value="" /></td>
                    <td>[*请输入不少于6位的密码]</td>
                </tr>
                <tr align="center">
                    <td colspan="3">
                        <input type="submit" value="登录"  style="width: 100px;height: 35px; background: #00FFFF;"/>
                    </td>
                </tr>
            </table>
            
        </form>

效果.png 删除边框.png