5、web前端基础—表格、表格样式、表单
21、表格
设置表格样式
1、自带的属性
border="1" width="300px" height="300px" align="center"
表格在日常生活中使用的非常的多，比如excel就是专门用来创建表格的工具，
表格就是用来表示一些格式化的数据的，比如：课程表、银行对账单，学员信息表
在网页中也可以来创建出不同的表格。
1、在HTML中，使用table标签来创建一个表格
2、在table标签中使用tr来表示表格中的一行，有几行就有几个tr
3、 在tr中需要使用td来创建一个单元格，有几个单元格就有几个td
4、border="1" width="40%" align="center"
5、rowspan用来设置纵向的合并单元格
6、colspan横向的合并单元格
<body>
<!--table 创建了一个表格 -->
<table border="10" width="400px" height="300px" >
<!-- tr 创建了一行 -->
<tr>
<!-- th表示表头的一个单元格 -->
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>住址</th>
<th>武力值</th>
<th>备注</th>
</tr>
<tr>
<!-- td表示一个单元格 -->
<td>1</td>
<td>唐僧</td>
<td>男</td>
<td>东土</td>
<td>0</td>
<td rowspan="6"></td> //纵向合并6个单元格
</tr>
<tr>
<td>2</td>
<td>孙悟空</td>
<td>男</td>
<td>花果山</td>
<td>99</td>
</tr>
<tr>
<td>3</td>
<td>猪八戒</td>
<td>男</td>
<td>高老庄</td>
<td>88</td>
</tr>
<tr>
<td>4</td>
<td>沙悟净</td>
<td>男</td>
<td>流沙河</td>
<td>66</td>
</tr>
<tr>
<td>5</td>
<td>红孩儿</td>
<td>男</td>
<td>火焰山</td>
<td>77</td>
</tr>
<tr>
<td>合计</td>
<td colspan="4"></td> //横向合并4个单元格
</tr>
</table>
</body>22、css设置表格样式
表格html部分
<body>
<!--table是一个块元素-->
<table>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>住址</th>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐僧</td>
<td>男</td>
<td>女儿国</td>
</tr>
</table>
</body>css设置上面表格的样式
需求一、设置表格的宽度，表格居中中，边框
table {
width: 400px;
margin: 0 auto;
border: 1px solid red;
}需求二： 设置表格的边框，要单线边框
table {
// 双线间距设为0，两条线合并为一条线
border-spacing:0 ;
}缺点：两条线合并为一条线变粗，影响观感
解决方案：
table {
// 双线间距设为0，两条线合并为一条线
border-spacing:0 ;
//双线合并为单线, 如果设置了边框合并，则border-spacing自动失效
border-collapse: collapse;
}需求三：设置背景色样式
table {
//需求三：设置背景色样式
background-color: #bfa;
}需求四：设置隔行变色
tr:nth-child(2n) {
background-color: orange;
}需求五： 鼠标移入到tr以后，改变颜色
tr:hover {
background-color: gray;
}需求六：调整td文字在表格中的位置 vertical-align、text-align
th,td {
border: 1px solid blue;
height: 60px;
text-align: center;
vertical-align: middle;
}如果表格中没有写tbody，浏览器会自动在表格中添加tbody
并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素
通过table > tr 无法选中行 需要通过tbody > tr
23、表单
1.创建一个表单
action：指向表单数据提交的服务器地址
属性：
action属性（必须要写）
指向的是一个服务器的地址，当我们提交表单时将会提交到action属性对应的地址
<form action="地址">
</from>2.input来创建一个文本框
type属性是text
name属性：提交内容的名字
如果希望表单项中的数据会提交到服务器中，必须指定一个name属性
value属性值：作为文本框的默认值显示，提交给服务器的值
//username:'李四'
用户名：<input type="text" value="李四" name="username" /><br /><br />运行结果：
3.input创建一个密码框
type属性值是password
name属性：提交密码的名字
value属性：提交给服务器
//password:abc123
密码：<input type="password" value="abc123" name="password" /><br /><br />运行结果：
4.input创建一个单选按钮
type属性：radio
name属性进行分组，属性相同是一组按钮，如果不设置，则都可以选择
value属性必须设置，这样被选中的表单项的value属性值将会最终提交给服务器
checked属性 默认选中
//sex:gril
男 <input type="radio" name="sex" value="boy" checked/>
女 <input type="radio" name="sex" value="gril" /><br /><br />运行结果：
5.input创建一个多选框
type属性:checkbox
checked="checked"属性 默认选中
//hobby:['run','dance','swim']
兴趣爱好：跑步：<input type="checkbox" value="run" name="hobby" />
跳舞：<input type="checkbox" value="dance" name="hobby" />
游泳：<input type="checkbox" value="swim" name="hobby" />
篮球：<input type="checkbox" value="ball" name="hobby" /> <br /><br />运行结果：
6.select来创建一个下拉列表
name属性设置给select，
value属性设置给option
selected，将选项设置为默认选中
在下拉列表中使用option标签来创建一个一个列表项
//year：2001
//month：12
出生年月： 年：<select name="year" id="">
<option value="2000">2000</option>
<option value="2001" selected>2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
</select>
月：<select name="month" id="">
<option value="12" selected>12</option>
<option value="11">11</option>
<option value="10">10</option>
<option value="9">9</option></select
><br />
<br />运行结果：
7.textarea创建一个文本域
//name="info"
个人简介：<textarea name="introduce" cols="20" rows="20" value="我是一个好人"></textarea><br><br>运行结果：
8.input创建一个提交按钮，点击后表单就会提交
type属性值： button submit reset
value属性：指定按钮上的文字
两种书写方式，一般用第二种
type:
button 普通按钮，没有默认行为
submit 提交按钮 默认提交数据给服务器
reset 重置按钮 输入的数据还原成默认值
<input type="button" value="普通按钮">
<input type="submit" value="提交按钮">
<input type="reset" value="重置按钮"><br><br>button
type:
button 普通按钮，没有默认行为
submit 提交按钮 默认提交数据给服务器
reset 重置按钮 输入的数据还原成默认值
<button type="button">普通按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>运行结果：
input属性补充
input：行内块元素
1.outline: none; 去除聚焦时默认的外边框线 css里的
2: readonly 设置为只读，不能修改
3: disabled 设置为禁用
4: autofocus 自动获取焦点
5: placeholder 提示内容
6: maxlength="" 最长字符
<form action="./target.html"> 用户名：<input type="text" placeholder="请输入姓名" maxlength="6"/><br><br> 密码：<input type="password" placeholder="请输入密码" /><br><br> 提交：<input type="submit" class="btn"/> </form>运行结果：
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
52
0- 0
已为社区贡献1条内容
所有评论(0)