一、表格
1、概念
(1)表格一共有三个标签:table、tr、td。
- table表示表格
- tr表示一行
- td表示列(单元格)
2、表格语法
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
3、属性
(1)<table>
中的属性
① 表格的边框:border
- border的值表示边框的宽度(粗细),默认值为0。
Demo:写一个三行两个的表格
<table border="1">
<!--第一行-->
<tr>
<td>第一行第一列</td>
<td>第一行第一列</td>
</tr>
<!--第二行-->
<tr>
<td>第二行第一列</td>
<td>第二行第一列</td>
</tr>
<!--第三行-->
<tr>
<td>第三行第一列</td>
<td>第三行第一列</td>
</tr>
</table>
得到结果
② 设置表格中单元格与单元格的间隙:cellspacing
设置整个表格的单元格,属性仍旧放在<table>
中,默认值为2。
<table border="1" cellspacing="0">
<!--第一行-->
<tr>
<td>第一行第一列</td>
<td>第一行第一列</td>
</tr>
<!--第三行-->
<tr>
<td>第二行第一列</td>
<td>第二行第一列</td>
</tr>
<!--第三行-->
<tr>
<td>第三行第一列</td>
<td>第三行第一列</td>
</tr>
</table>
加了cellspacing之后,就会得到如下的结果,会发现单元格之间的间隙变小了,这样看起来会更舒适。
③ 设置整个表格的高度和宽度:width、height。
- 如果设置整个表格的宽高度,则放在
<table>
中; - 如果要设置某一行或某一列的高度或者宽度,则放在相应
<tr>
或者<td>
中。 - 整个表格的宽度可以使用百分百,整个表格的高度不能使用百分百。
④ 设置表格相对于网页水平居中:align = “center”。
- 如果要作用于整个表格,则放在
<table>
中; - 如果要设置某一行或某个单元格文字也居中,则放在相应
<tr>
或者<td>
中。
Demo:写一个九宫格,要求表格居中,文字居中,宽高度适中,表格间隙为0
<table border="1" width="300" height="300" cellspacing="0" align = "center">
<!--第一行-->
<tr align = "center">
<td>打篮球</td>
<td>打篮球</td>
<td>打篮球</td>
</tr>
<!--第二行-->
<tr align = "center">
<td>打篮球</td>
<td>打篮球</td>
<td>打篮球</td>
</tr>
<!--第三行-->
<tr align = "center">
<td>打篮球</td>
<td>打篮球</td>
<td>打篮球</td>
</table>
得到结果如下
⑤ 设置表格的背景颜色:bground。
- 如果要设置整个表格,则放在
<table>
中; - 如果要设置某一行或某个单元格,则放在相应
<tr>
或者<td>
中。 - 当背景颜色存在冲突的时候,谁的范围小,则执行谁的。
⑥ 设置边框的颜色:bordercolor
⑦ 设置表格的表头:thead
<table border="1" cellspacing="0" align="center" width="500" height="80">
<!--设置标题-->
<thead>
<th>标题一</th>
<th>标题二</th>
<th>标题三</th>
</thead>
<tr align="center">
<td>张三</td>
<td>李四</td>
<td>王二</td>
</tr>
<tr align="center">
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
</table>
得到结果:
⑦合并单元格:colspan(列)和rowspan(行)
<table border="1" cellspacing="0" align="center" width="500" height="80">
<thead>
<th>标题一</th>
<th colspan="2">标题二</th> <!--合并二、三列标题-->
</thead>
<tr align="center">
<td rowspan="2">张三</td> <!--合并二、三列数据-->
<td>李四</td>
<td>王二</td>
</tr>
<tr align="center">
<td>222</td>
<td>333</td>
</tr>
</table>
得到结果:
(2)<tr>
中的属性
- height:设置整行的高度,
<tr>
中不能设置宽度。 - align:设置整行中单元格中的内容水平居中。
- bgcolor:设置整行中的单元格的背景颜色
(3)<td>
中的属性
- height:设置单元格的高度。
- width:设置单元格的宽度。
- bgcolor:设置该单元格的背景颜色。
- background:设置单元格的背景图片。
- align:设置该单元格的内容所处的位置(left,right,center)。
- bordercolor:设置单元格的边框颜色。
二、表单
1、概念
表单:用户能够在网页上面的操作选项,一般用于注册、登录、完善信息、评论(恢复)提交等
2、语法
(1)输入框:
<input type = "text">
(2)密码
<input type = "password">
(3)按钮
<body>
<form action="" method="">
<input type = "submit">,点击提交之后,整个页面会刷新;
<input type = "button" value = "提交">,点击之后页面不会刷新,button必须使用value,在按钮上显示的文字;
<button>提交</button>,点击之后整个页面会刷新;
<input type = "reset">,清空表单的所有内容。
</form>
</body>
注意:<form></from>
的作用是与后端交互。
<body>
<form action="" method="">
用户名:<input type="text" maxlength="5"/><br />
密码:<input type="password" /><br />
<input type = "submit"><br />
<input type = "button" value="提交2"><br />
<button>提交3</button><br />
<input type = "reset"><br />
</form>
</body>
得到结果如下
(4)单选框:只能选择一个,想要只选择一个,就必须使用属性name
<input type = "radio">
例如:
<body>
<form action="" method="">
性别:<input type = "radio" value="男" name="sex">男
<input type = "radio" value="女" name="sex">女
<input type = "radio" value="保密" name="sex">保密
</form>
</body>
得到结果:
(5)复选框
<input type = "checkbox">
例如:
<body>
<form action="" method="">
爱好:<input type = "checkbox">吃
<input type = "checkbox">睡
<input type = "checkbox">玩
</form>
</body>
得到结果:
(6)下拉框
<select>
<option></option>
</select>
例如:
<body>
<form action="" method="">
城市:<select>
<option>成都</option>
<option>重庆</option>
<option>西安</option>
<option>南京</option>
</select>
</form>
</body>
得到结果:
(7)文本域
<textarea cols = "列数" rows = "行数"></textarea>
文本域可以设置行和列,例如:
<body>
<form action="" method="">
简介:<textarea cols="10" rows="5"></textarea>
</form>
</body>
得到结果:
得到的右侧的输入框可以调节大小。