表格的基本设置
2018-06-25 本文已影响0人
Khada
- 使用table标签创建一个表格。
tr表示表格中的一行。
tr中可以编写一个或多个th或td。
th表示表头。
td表示表格中的一个单元格。
caption表示表格的标题。
thead表示表格的头部。
tbody表示表格的主体。
tfoot表示表格的底部。
合并单元格
- 合并单元格指将两个或两个以上的单元格合并为一个单元格。
合并单元格可以通过在th或td中设置属性来完成。
横向合并----colspan
纵向合并----rowspan
表格的样式
- text-align：设置文本的水平对齐。
vertical-align：设置文本的垂直对齐。
border-spacing：边框间距
border-collapse：合并边框
--separate：不合并边框
1
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border="1" width="40%" align="center">
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td rowspan="2">A4</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
</tr>
<tr>
<td>B2</td>
<td>B3</td>
<td colspan="2">B4</td>
</tr>
</table>
</body>
</html>
2
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格添加样式</title>
<style type="text/css">
table{
width: 300px;
margin: 0 auto;
border-collapse: collapse;
}
th,td{
border: 1px solid black;
}
tbody > tr:nth-child(even){
background-color: red;
}
tr:hover{
background-color: yellow;
}
</style>
</head>
<body>
<table border="1" width="40%" align="center">
<tr>
<th>A1</th>
<th>A2</th>
<th>A3</th>
<!--<th rowspan="2">A4</th>-->
<th>A3</th>
</tr>
<tr>
<td>2</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
<tr>
<td>3</td>
<td>B3</td>
<!--<td colspan="2">B4</td>-->
<td>B3</td>
<td>B3</td>
</tr>
<tr>
<td>4</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
<tr>
<td>5</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
<tr>
<td>6</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
<tr>
<td>7</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
</table>
</body>
</html>
表单项
input、select、option、textarea
input是我们使用的最多的表单项，它可以根据不同的type属性呈现不同的状态。
type属性可选值：
--text：文本框
--password：密码框
--submit：提交按钮
--radio：单选按钮
--checkbox：多选框
--reset：重置按钮
select用于创建一个下拉列表。
option表示下拉列表中的列表项。
optgroup用于为列表项分组
textarea用来创建一个文本域，可以属性：
--cols：文本域的列数
--rows：文本域的行数
fieldset、legend、label
fieldset用来为表单项进行分组。
legend用来指定每组的名字。
label标签用来为表单项定义描述文字。
<body>
<form action="模拟后台服务器.html">
<fieldset>
<legend>用户信息</legend>
<label for="um">用户名</label>
<input id="um"type="text" name="username" value=" "><br><br>
<label for="pwd">密码</label>
<input id="pwd"type="password" name="password"><br><br>
</fieldset><br>
<fieldset>
<legend>用户爱好</legend>
性别<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<input type="radio" name="gender" value="nomale">东方不败<br><br>
爱好 <input type="checkbox" name="hobby" value="sleep">睡觉
<input type="checkbox" name="hobby" value="eat">吃饭
<input type="checkbox" name="hobby" value="study">学习
<input type="checkbox" name="hobby" value="play">打豆豆<br><br>
</fieldset><br>
<fieldset>
你喜欢的明星
<select name="star">
<!--multiple 可多选的下拉列表-->
<optgroup label="动物界明星">
<option value="XZPQ" selected="selected">小猪佩奇</option>
<option value="DJ">迪迦</option>
<option value="XE">熊二</option>
</optgroup>
<optgroup label="女明星">
<option value="XE" selected="selected">李冰冰</option>
<option value="XE">范冰冰</option>
<option value="XE">高圆圆</option>
</optgroup>
</select><br><br>
自我介绍<textarea name="info"></textarea><br><br>
</fieldset><br><br>
<input type="submit" value="查找">
<input type="reset">
<input type="button" value="按钮">
</form>
</body>
