table表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--table表格
<table>
<tr>行
<td>单元格 一行中包含着几个单元格 <td>中可以放别的标签 <th>表头标签自动加粗居中对齐
</td>
</tr>
</table>
-->
<h1 style="text-align: center;">创建三行三列的表格</h1>
<table width="500" height="300" border="3" cellspacing="10" cellpadding="0" align="center">
<caption>黑怕</caption> <!--表格标题，在表格上面-->
<!--border=o无边框
cellspacing控制单元格与单元格边框之间的距离
cellpadding控制单元格内容和单元格边框之间的距离
align水平对齐（righ left center）-->
<thead><!--表头划分表格-->
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<thead><!--表内容划分表格-->
<tr>
<td>姜云升</td>
<td>男</td>
<td>24</td>
</tr>
<tr>
<td>于贞</td>
<td>女</td>
<td>24</td>
</tr>
</thead>
</table>
<table width="500" height="300" border="3" cellspacing="10" cellpadding="0" align="center">
<caption>黑怕</caption> <!--表格标题，在表格上面-->
<!--border=o无边框
cellspacing控制单元格与单元格边框之间的距离
cellpadding控制单元格内容和单元格边框之间的距离
align水平对齐（righ left center）-->
<thead><!--表头划分表格-->
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<thead><!--表内容划分表格-->
<tr>
<td>姜云升</td>
<td>男</td>
<td rowspan="2">24</td><!--rowspan跨行合并-->
</tr>
<tr>
<td>于贞</td>
<td>女</td>
<!--<td>24</td> 从上往下合并单元格，合并完之后，下面的单元格要删除-->
</tr>
</thead>
</table>
<table width="500" height="300" border="1" cellspacing="0" cellpadding="0" align="center">
<caption>黑怕</caption> <!--表格标题，在表格上面-->
<!--border=o无边框
cellspacing控制单元格与单元格边框之间的距离
cellpadding控制单元格内容和单元格边框之间的距离
align水平对齐（righ left center）-->
<thead><!--表头划分表格-->
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<thead><!--表内容划分表格-->
<tr>
<td>姜云升</td>
<td>男</td>
<td>24</td>
</tr>
<tr>
<td>于贞</td>
<td colspan="2">女</td><!--colspan跨列合并-->
<!--<td>24</td>从左往右合并单元格，合并完之后，右边的单元格要删除-->
</tr>
</thead>
</table>
<table width="500" height="300" border="1" cellspacing="0" align="center">
<caption>黑怕名单</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>姜云升</td>
<td>男</td>
<td rowspan="3">22</td>
</tr>
<tr>
<td>于贞</td>
<td>女</td>
</tr>
<tr>
<td>沙一汀</td>
<td>男</td>
</tr>
<tr>
<td colspan="3">懒惰</td>
</tr>
</thead>
</table><hr />
<table border="0" width="300" height="300" cellspacing="0" align="center">
<tr>
<td colspan="2" style="background-color: teal;"></td>
<td rowspan="2" style="background-color: wheat;"></td>
</tr>
<tr>
<td rowspan="2" style="background-color: turquoise;"></td>
<td style="background-color: yellow;"></td>
</tr>
<tr>
<td colspan="2" style="background-color: yellowgreen;"></td>
</tr>
</table><br />
<table border="1" width="300" height="300" cellspacing="0" align="center">
<tr>
<td colspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table><br />
</body>
</html>
表单
input
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="" method="POST" name="">
<!-- action=“url地址” method=“提交方式” name=“表单名称”
提交按钮生效 -->
<!-- input控件 -->
文本：<input type="text" value="用户名" maxlength="6"/><br />
<!-- maxlength="6"最多输入6个字 -->
密码：<input type="password" /><br />
单选框性别：<input type="radio" name="xingbie" checked="checked"/>女<input type="radio" name="xingbie"/>男<br />
<!-- 用name定义一个名字，相同名字的单选框只能从中选其一 checked="checked"默认选女-->
复选框爱好：<input type="checkbox" name="aihao"/>足球<input type="checkbox" name="aihao" />排球<input type="checkbox" name="aihao" />篮球<br />
普通按钮：<input type="button" value="搜索普通按钮"/><br />
<!-- value="??"输入的内容等于按钮显示的内容 -->
提交按钮：<input type="submit" value="提交表单"/><br />
<!-- 默认按钮内容为提交 可用value更改 -->
重置按钮:<input type="reset" value="重置表单" /><br />
图像形式的提交按钮:<input type="image" src="4.jpg" /><br />
文件域:<input type="file" /><br />
<dl>
<dt>type</dt>
<dd>text 输入文本</dd>
<dd>password 密码输入框</dd>
<dd>radio 单选框</dd>
<dd>checkbox 复选框</dd>
<dd>button 普通按钮</dd>
<dd>submit 提交按钮</dd>
<dd>reset 重置按钮</dd>
<dd>image 图像形式的提交按钮</dd>
<dd>file 文件域</dd>
</dl>
label标签
<!-- label标签 -->
<label>输入账号：<input type="text"></label> <br />
<!-- 1.用label标签把内容框起来，点输入账号的时候也能将光标标在输入框内 -->
<label for="tow">输入账号：<input type="text"><input type="text" id="tow"></label><br />
<!-- 2.多个表单用for id定位 -->
留言板：<br />
<textarea>请输入留言</textarea><br />
<!-- textarea文本域 -->
下拉菜单
<!-- 下拉菜单 -->
籍贯：
<select>
<option>北京</option>
<option>上海</option>
<option>重庆</option>
<option selected="selected">福建</option>
<!-- selected="selected"默认选项 -->
</select>
<select>
<option>福州</option>
<option selected="selected">厦门</option>
<option>泉州</option>
<option>漳州</option>
</select>
</form>
<!-- <form></form>表单域，包括整个表单内容 -->
</body>
</html><!--<input />单标签 ctrl+ / 注释快捷键-->
1、
file:///D:/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/day2/table%E8%A1%A8%E6%A0%BC.html
2、
file:///D:/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/day2/%E8%A1%A8%E5%8D%95.html
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
