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>