学习html总结（二）

table表格

 

1.表格的结构

 

用tr表示行，td表示列；th表示表头，字体加粗居中；caption表示标题

        <table border="2" cellspacing="1" cellpadding="10" bordercolor="blue"  style="border-collapse: collapse;">
            <caption>表格的标题</caption>
            <tr>
                <td rowspan="2">1-1</td>
                <td>1-2</td>
                <td>1-3</td>
            </tr>
            <tr>
                <td>2-2</td>
                <td>2-3</td>
            </tr>
            <tr>
                <td colspan="2">3-1</td>
                <td>3-2</td>
            </tr>
            <tr>
                <th>表头1</th>
                <th>表头2</th>
                <th>表头3</th>
            </tr>
        </table>

 

2.表格的各种属性

 

a.border=1 表示边框，1是宽度 当border属性增大时，只有外围边框增大；

 

b.cellspacing：单元格之间的间隔；

c.cellpadding：单元格中的文字与边框的距离

 

d.style=“border-collapse：collapse；”，合并边框

 

e.width、height表示宽度和高度

 

f.bgcolor：背景颜色 可以用style=“background-color：”代替；bordercolor：边框颜色 background：背景图片

 

g.colspan=“2”表示该内容跨两列，rowspan=“2”表示该内容跨两行

 

h.align：表格在页面中的位置 left center right

3.tr和td的相关属性

a.width、height 单元格的宽和高 bgcolor单元格的背景颜色

 

b.align：left center right 单元格中的文字，水平对齐方式

 

c.valign：top center bottom 单元格中的文字，垂直对齐方式

 

d.nowrap=“nowrap”单元格中的文字不换行

 

注意：当表格属性与行列属性冲突时，行列属性为准。（作用范围越小，优先级越高）

 

4.表格的结构化 caption thead tbody tfoot

 

无论各部分写在表格的什么位置 caption会在表格外最上方， thead会在表格内最上方，tfoot会在最下方

 

form表单

 

<fieldset>
          <legend>用户注册</legend>
        <form action="" method="get" autocomplete="on">
            <table>
                <tr>
                    <td>用户名：</td>
                    <td><input type="text" name="username" id="username" value="111" /></td>
                </tr>
                <tr>
                    <td>密码：</td>
                    <td><input type="password" name="mima"  placeholder="请输入密码" autofocus="autofocus"/></td>
                    <!--placeholder：提示属性-->
                </tr>
                <tr>
                    <td>性别：</td>
                    <td>
                        <input type="radio" name="sex" value="男" />男
                        <input type="radio" name="sex" value="女" />女
                    </td>
                </tr>
                <tr>
                    <td>
                        喜欢的城市：
                    </td>
                    <td>
                        <select name="city">
                            <optgroup label="山东">
                              <option selected="selected">烟台</option>
                              <option>青岛</option>
                              <option>济南</option>
                              <option>济宁</option>
                            </optgroup>
                            <optgroup label="北京">
                              <option>海淀</option>
                              <option>朝阳</option>
                            </optgroup>
                        </select>
                    </td>
                </tr>
                
                <tr>
                    <td>爱好：</td>
                    <td>
                        <input type="checkbox" name="hobby" value="玩" checked="checked"/>玩
                        <input type="checkbox" name="hobby" value="吃"/>吃
                    </td>
                </tr>
                
                <tr>
                    <td>头像：</td>
                    <td><input type="file" name="head"/></td>
                </tr>
                <tr>
                    <td>
                        <input type="image" src="img/捕获.PNG" value="提交" />
                    </td>
                    <td>
                        <input type="reset" value="重置" />
                        <input type="button" value="点我" />
                    </td>
                </tr>
                <tr>
                    <td>服务条款：</td>
                </tr>
                <tr>
                    <td colspan="2">
                        <textarea readonly="readonly" style="width: 200px; height: 120px;">这是服务条款；这是服务条款；
                            这是服务条款；这是服务条款；这是服务条款；这是服务条款。</textarea>
                    </td>
                </tr>
            </table>
        </form>
      </fieldset>