标题图
Day2:
html和css
表格是一种常用的标签,表格结构,做到能够合并单元格.
表格的属性:
| 属性名 | 说明 |
|---|---|
border |
设置表格的边框 |
cellspacing |
设置单元格与单元格边框之间的空白间距 |
cellpadding |
设置单元格内容与单元格边框之间的空白间距 |
align |
设置表格在网页中的水平对齐方式 |
width |
设置表格的宽度 |
height |
设置表格的高度 |
如何创建表格:
<table>
<tr>
<td></td>
</tr>
</table>
表格用table,tr代表表格中的一行,必须在table标签中,td用于表示表格中的单元格,<tr></tr>表格中的一行.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
</head>
<body>
<table width="500" border="1" align="center" cellspacing="0" cellpadding="0">
<caption>个人信息表</caption> 表格标题
<tr>
<th>姓名</th>
<th>性别</th>
<th>电话</th>
</tr>
<tr>
<td>dashu</td>
<td>男</td>
<td>123</td>
</tr>
<tr>
<td>dashucoding</td>
<td>男</td>
<td>123456</td>
</tr>
</table>
</body>
</html>
<thead></thead>用于定义表格的头部
<tbody></tbody>用于定义表格的主体
表格:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
<style>
/*选择器 { 属性: 值; } */
th {
color: blue;
}
td {
font-size: 14px;
}
tr {
height: 30px;
}
</style>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="550" align="center">
<caption> <h3></h3> </caption>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>1</td>
</tr>
</tbody>
</table>
</body>
</html>
合并单元格:
跨行合并:rowspan
跨列合并:colspan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<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>
<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>
</body>
</html>
在表格中由行中的单元格组成,没有列元素.表达式由表单控件,提示信息,表单域组成.
input输入控件:</input/>但标签
// 表单
性别,生日,年月日,所在地区,婚姻状况,学历,月薪,手机号,昵称,喜欢类型,掌握介绍等.
| 属性 | 属性值 | 说明 |
|---|---|---|
type |
text |
单行文本输入框 |
type |
password |
密码输入框 |
type |
radio |
单选按钮 |
type |
checkbox |
复选框 |
type |
button |
普通按钮 |
type |
submit |
提交按钮 |
type |
reset |
重载按钮 |
type |
image |
图形形式的提交按钮 |
type |
file |
文件域 |
name |
用户自定义 | 控件名称 |
size |
正整数 |
input控件在页面中显示的宽度 |
value |
用户自定义 | 控件的默认文本值 |
checked |
checked |
定义选择控制价默认被选择的项 |
| 'maxlength` | 正整数 | 控件允许输入的最多字符数 |
label标签为input标签元素定义的标注.
<label for="id"> id </label>
<input type="radio" name="sex" id="me" value="id">
textarea控件-文本域
<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>
<textarea name="textarea" id="" cols="30" rows="10">
</textarea>
下拉菜单
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
<select></select>至少应包含一对<option></option>
在option中定义selected="selected"时,代表已经为选中项
创建表格
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
表格的标题： caption
表单域
form标签被用于定义表单域
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
达叔小生：往后余生，唯独有你
You and me, we are family !
90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通
简书博客： 达叔小生
https://www.jianshu.com/u/c785ece603d1
结语
- 下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
- 小礼物走一走 or 点赞
网友评论