html&css学习二
程序员文章站
2022-09-10 14:10:50
表格&b标签 表格 表格标签主要包含三个标签 1. table用于定义一个表格。 2. tr 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格。 3. td /td：用于定义表格中的单元格，必须嵌套在标签中，一对 中包含几对，就表示该行中有多少列（或多 ......
表格&b标签
表格
表格标签主要包含三个标签
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
- table用于定义一个表格。
- tr 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格。
-
td /td：用于定义表格中的单元格，必须嵌套在
标签中，一对 中包含几对 ，就表示该行中有多少列（或多少个单元格）。 表格的属性
合并单元格
跨行合并：rowspan 跨列合并：colspan
将多个内容合并的时候，就会有多余的东西，把它删除。 例如 把 3个 td 合并成一个， 那就多余了2个，需要删除。
公式： 删除的个数 = 合并的个数 - 1合并的顺序 先上 后下 先左 后右
- 先确定是跨行还是跨列合并
- 根据 先上 后下 先左 后右的原则找到目标单元格
-
删除单元格 删除的个数 = 合并的个数 - 1
案例
<body>
<!-- cellspacing 单元格和单元格之间的距离 -->
<!-- cellpadding 单元格内容距离单元边框的距离 -->
<table width="500" border="1" align="center" cellspacing="0" cellpadding="0">
<caption>个人信息表</caption> 表格标题
<tr>
<th>姓名</th>
<th>性别</th>
<th>电话</th>
</tr>
<tr>
<td>张三</td>
<td>女</td>
<td>1111111115</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>150330123456</td>
</tr>
</table>
</body>
合并单元格
<body>
<table width="400" height="100" border="1">
<tr>
<td>123</td>
<td>abc</td>
<td>abc</td>
</tr>
<tr>
<td colspan="2">123</td>
<td>测试</td>
</tr>
<tr>
<td>123</td>
<td>abc</td>
<td>abc</td>
</tr>
</table>
1. 先确认跨列合并 colspan
2. 先上后下 先左右后
3. 删除的个数
<table width="400" height="100" border="1">
<tr>
<td>123</td>
<td>abc</td>
<td rowspan="3">abc</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>123</td>
<td>abc</td>
</tr>
</table>
1. 先确认跨行合并 rowspan
2. 先上后下 先左右后
3. 删除的个数
</body>
表单标签
input控件
在上面的语法中，<input />标签为单标签，type属性为其最基本的属性 类型 ，其取值有多种，用于指定不同的控件类型
<body>
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
<caption><h4>注册会员</h4></caption>
<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="password" value="120" /></td>
</tr>
<tr>
<td>性别</td>
<td>
男<input type="radio" name="sex" checked="checked"/>
女<input type="radio" name="sex"/>
</td>
</tr>
<tr>
<td>爱好</td>
<td>
篮球<input type="checkbox" checked="checked"/>
足球<input type="checkbox" />
羽毛球<input type="checkbox" />
乒乓球<input type="checkbox" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="注册"/>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="image" src="btn.png"/>
</td>
</tr>
<tr>
<td>上传文件</td>
<td>
<input type="file" s/>
</td>
</tr>
</table>
</body>
form表单
<form action="url地址" method="提交方式" name="表单名称"> 各种表单控件 </form>
常用属性：
- action 在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
- method 用于设置表单数据的提交方式，其取值为get或post。
- name 用于指定表单的名称，以区分同一个页面中的多个表单
<body>
<form action="" method="post">
用户名: <input type="text" name="zhangsan" value="用户名"> <br /> <br />
密 码: <input type="password" name="password1"><br /> <br />
密 码: <input type="password" name="password2"><br /> <br />
<input type="submit" value="提交所填">
<input type="reset" value="重新填写">
</form>
</body> 上一篇： 设计模式之工厂模式（一）
下一篇： 双飞翼布局