2022.3.22 web课笔记
web课程表格学习笔记
我们可以使用表格整齐的显示到用户页面。结构化。
整齐，规范，条理性。
初始表格
<table border="1px">
<tr>
<td>1,1</td>
<td>1,2</td>
<td>1,3</td>
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
<td>2,3</td>
</tr>
</table>
table 属性border="1px"为表格的边框。
改变表格属性介绍
table 的width=“500” 属性：定义表格的大小。
align=“center” 属性 ：定义表格的位置，现在是中心位置。
cellpadding="20"属性：单元格内文字与边框的距离。
cellspacing=“20” 属性 ：单元格之间距离变大。
表格的合并操作
表格的跨行跨列。
缩写语法：table>tr3>td2
colspan=column(列)+span（跨度）
rowspan=row（行）+span（跨度）
跨列
colspan属性：向右合并
<td colspan="2">学生成绩</td>
<table border="1px" width="300">
<tr>
<td colspan="2">学生成绩</td>
</tr>
<tr>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>95</td>
</tr>
</table>
实验一
文本素材
人人网，中国 最真实、最有效的社会平台，加入人人网，找回老朋友，结交新朋友。
电子邮箱:
设置密码:
真实姓名:
性别: 男 女
生日: 年 月 日
为什么要填写我的生日?
我现在: （非常重要）
看不清换一张？
验证：
提交
要求：
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="image/renren_titile.gif" width="500px">
<p>人人网，中国 <strong>最真实、最有效</strong>的社会平台，加入人人网，找回老朋友，结交新朋友。</p>
<p>电子邮箱:<input type="text" name=""/></p>
<p>设置密码:<input type="text" name=""/></p>
<p>真实姓名:<input type="text" name=""/></p>
<p>性别:<input type="radio" name="sex">女<input type="radio" name="sex">男</p>
<form action="#" method="post">
<p>生日:
<select name="selectList">
<option>1991</option>
<option>1992</option>
</select>年
<select name="selectList">
<option>11</option>
<option>12</option>
</select>月
<select name="selectList">
<option>30</option>
<option>31</option>
</select>日</p>
</form>
<p>为什么要填写我的生日?</p>
<p>我现在:
<select name="selectList">
<option>请选择身份</option>
<option>医生</option>
<option>老师</option>
</select>
（非常重要）
</p>
<p><img src="image/renren_code.gif"><a href="#">看不清换一张？</a></p>
<p>验证码：<input type="text" name=""></p>
<a href="#">
<img src="image/renren.gif">
</a>
</body>
</html>