制作表格/表单并用CSS美化
- 制作表格
- 用到
background-img设置表头背景图片（导航栏也可以这么用） - 用到
设置单双行不同颜色的方法 - 用到合并列
colspan=number,合并行用rowspan=number - 用到
设置表格范围宽度方法
- 用到
<html>
<head>
<!--Ctrl+S保存后就可以刷新浏览器预览-->
<meta http-equiv="Content-type" content="text/html; charset=utf-8 " />
<title>表格</title>
<style type="text/css">
body{
font-size: 12px;
}
table{
margin: auto;
border: 1px solid #3a3a3a;
color: #000000;
}
td{
height: 20px;
border: 1px solid #3a3a3a;
}
th{
background-image: url(image/屏幕截图.jpg);/*用图片来当表头的背景*/
background-repeat: repeat-x;
height: 25px;/*设置的高度和图片的高度一致，可以让图片刚好在一行显示，没有间隙*/
color: #ffffff;
border: 1px solid #5f5f5f;
padding: 0.2px;
}
/*单双行不同颜色*/
.row{
background-color: #d7d7d7;
color: #000000;
}
</style>
</head>
<body>
<!--设置表格范围边框-->
<table width="800" border="0" align="center" cellpadding="0" cellsapcing="0">
<tr>
<!--合并单元格-->
<!--合并列用colspan-->
<!--合并行用rowspan-->
<th colspan="5">表头合并</th>
</tr>
<tr class="row">
<td>行1列1</td>
<td>行1列2</td>
<td>行1列3</td>
<td>行1列4</td>
<td>行1列5</td>
</tr>
<tr>
<td>行2列1</td>
<td>行2列2</td>
<td>行2列3</td>
<td>行2列4</td>
<td>行2列5</td>
</tr>
<tr class="row">
<td>行3列1</td>
<td>行3列2</td>
<td>行3列3</td>
<td>行3列4</td>
<td>行3列5</td>
</tr>
<tr>
<td>行4列1</td>
<td>行4列2</td>
<td>行4列3</td>
<td>行4列4</td>
<td>行4列5</td>
</tr>
<tr class="row">
<td>行5列1</td>
<td>行5列2</td>
<td>行5列3</td>
<td>行5列4</td>
<td>行5列5</td>
</tr>
<tr>
<td>行6列1</td>
<td>行6列2</td>
<td>行6列3</td>
<td>行6列4</td>
<td>行6列5</td>
</tr>
<tr class="row">
<td>行7列1</td>
<td>行7列2</td>
<td>行7列3</td>
<td>行7列4</td>
<td>行7列5</td>
</tr>
<tr>
<td>行8列1</td>
<td>行8列2</td>
<td>行8列3</td>
<td>行8列4</td>
<td>行8列5</td>
</tr>
</table>
</body>
</html>
- 制作表单
- 用到
form放置表单元素，比如文本字段，复选框，单选框，按钮等 - 用到
input标签和texttype输入文本框 - 用到
input标签和passwordtype输入密码 - 用到
input标签和radiotype成为单选框，单选框互斥需要名字一致 - 用到
input标签和checkboxtype复选框 - 用到
select标签和它的子标签option做选择器 - 用到
input标签和submittype做提交按钮 - 用到
input标签和reset做复位按钮 - 用到
textarea标签做文本输出显示
- 用到
<html>
<head>
<!--Ctrl+S保存后就可以刷新浏览器预览-->
<meta http-equiv="Content-type" content="text/html; charset=utf-8 " />
<title>表单</title>
<style type="text/css">
</style>
</head>
<body>
<div id="logo">此处显示 ID "logo"的内容</div>
<div>此处显示ID "title"的内容</div>
<div id="main">
<ul>
<!--form用于放置表单元素，比如文本字段，复选框，单选框，按钮等-->
<form action="" method="get">
<li>
<!--label标签文本-->
<label>输入账号：</label>
<!--input输入文本框，类型text-->
<input name="username" type="text" class="txt" />
</li>
<li>
<label>输入密码：</label>
<!--input输入文本框，类型password-->
<input name="pass word" type="password" class="txt" />
</li>
<li>
<label>确认密码：</label>
<input name="pass word" type="password" class="txt" />
</li>
<li>
<!--把两个radio类型做成单选按钮-->
<!--两个单选按钮name必须一样，才能做成互斥-->
<!--checked表示默认-->
<label>单选项：</label>
<input name="rdoSex" type="radio" value="0" checked />
<img src="man.jpg" width="22" height="21" />
<input type="radio" name="rdoSex" value="1">
<img src="woman.jpg" width="23" height="20" />
</li>
<li>
<!--checkbox做复选框-->
<!--input后面的值内容是显示文本-->
<label>复选项：</label>
<input type="checkbox" value="sport" name="cbxHobby" />sport
<input type="checkbox" value="chat" name="cbxHobby" />chat
<input type="checkbox" value="game" name="cbxHobby" />game
</li>
<li>
<label>日期：</label>
<!--select选择和它的子标签option-->
<!--多个选择器组合为日期-->
<select name="year">
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
</select>年
<select name="month">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>月
<input type="text" name="day" class="day"/>日
</li>
<li>
<!--添加按钮-->
<input type="submit" name="button" id="buton" value="提交"/>
<input type="submit" value="同意条款并提交"/>
<input type="reset" value="重来"/>
</li>
<li class="fwxy">
<!--添加文本显示-->
<textarea name="textarea" cols="70" rows="3">...显示输出文本信息...显示输出文本信息...显示输出文本信息...显示输出文本信息...显示输出文本信息...显示输出文本信息...显示输出文本信息...显示输出文本信息...显示输出文本信息...显示输出文本信息...显示输出文本信息...显示输出文本信息...显示输出文本信息...显示输出文本信息...显示输出文本信息...显示输出文本信息...</textarea>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</form>
</ul>
</div>
<div id="about">此处显示ID "about"的内容</div>
</body>
</html>
- 常见的表单html标签
-
表单标签
<form></form> -
输入标签
<input/>常用格式为<input type="" value="" name="" class=""/>,常用属性如下：text:文本框checkbox：复选框，同一组的checkbox的name应该相同，方便js后台查数据；不同的checkbox组名字不同file:文件选择框hidden:隐藏域，<input type="hidden" value="1"/>image:图片框password:密码框radio:单选按钮框，注意一组radio名字要一样，才能单选button:按钮框：<input type="button" value="value值会显示在按钮上">，value值会显示在按钮上reset:重置按钮框，按下后会清空表单内全部数据submit:提交按钮框，和button不一样的是，它会提交表单数据到指定位置
-
下拉列表标签
<select></select>及其子标签<option></option> -
文本域标签
textarea,它的格式<textarea cols="" rows=""></textarea>可以定义显示长宽 -
任何一个表单元素标签其实都能脱离表单form标签使用，这一点和table标签不一样
