table表格学习归纳

最新推荐文章于 2024-07-16 20:50:21 发布

会伏地的向日葵

最新推荐文章于 2024-07-16 20:50:21 发布

阅读量226

点赞数 1

分类专栏： web前端文章标签： html css sublime text

本文链接：https://blog.csdn.net/newlife1441/article/details/117292294

版权

web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、常用标签：

thead-定义表格头部
tbody-定义表格主体
tr-行
td-行内元素（列）
tfoot-定义表格底部
th-头部加粗
二·、常用属性：
border-边框 height,width高和宽单位：px 对齐方式:align
背景：
bgcolor-背景颜色
background-背景图片（优先显示）
cellpadding-表格边距
cellspacing-表格间距

三、合并单元格：

colspan --------- 水平方向合并的是列

<th colspan="2">用户注册</th>

rowspan ------ 垂直方向合并的是行

<td rowspan="4">......</td>

四、表格的嵌套：

<table width="xxx" border="1">
 <tr>
   <td>&nbsp;</td> 
   <td> 
      <table width="100" border="1" align="center"> 
 <tr>
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
 </tr> 
      </table> 
   </td> 
 </tr> 
</table>

五、表单与表格的结合：

下面是一个典型的表单与表格的结合：

代码如下:

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用户注册</title>
</head>
<body>
<strong>
	<table  align="center" >
	<form action="" method="post">
		<tr align="center" bgcolor="#C0C0C0">
			<th colspan="2">用户注册</th>
		</tr>
		<tr bgcolor="#DDDDDD">
			<th width="90" align="right">用户名</th>
			<td width="170"><input type="text" name="UserName" style="width:100px"></td>
		</tr>//style="width:100px"作用：设置文本框的长度大小
		<tr bgcolor="#DDDDDD">
			<th width="90" align="right">密码</th>
			<td width="170"><input type="password" name="UserPassword" style="width:100px" required="UserPassword" ></td>
		</tr>
		<tr bgcolor="#DDDDDD">
			<th width="90" align="right">性别</th>
			<td width="170"><input type="radio" value="男" name="gender" checked="">男
			<input type="radio" value="女" name="gender">女</td>
		</tr>
		<tr bgcolor="#DDDDDD">
			<th width="90" align="right">爱好</th>
			<td width="170"><input type="checkbox" value="写作" name=" like">写作
			<input type="checkbox" value="写作" name=" like">听音乐
			<input type="checkbox" value="写作" name=" like">体育</td>
		</tr>
		<tr bgcolor="#DDDDDD">
		<th width="90" align="right">省份</th>
		<td><select style="width:70px">
			<option value="北京省" name="province">北京省</option>
			<option value="上海省" name="province">上海省</option>
			<option value="陕西省" name="province" selected="">陕西省</option>
			<option value="四川省" name="province">四川省</option>
			<option value="重庆省" name="province">重庆省</option>
			<option value="河北省" name="province">河北省</option>
		</select></td>
		</tr>
		<tr bgcolor="#DDDDDD">
			<th width="90" align="right">自我介绍</th>
			<td width="170"><textarea name="intro" cols="25" rows="5" >这个家伙什么也没留
下</textarea> </td>
		</tr>
		<tr align="center" bgcolor="#C0C0C0">
			<td colspan="2">
			<input type="submit" name="send" value="提交">
			<input type="reset" name="reset" value="重置"> </td>
		</tr>
		</form>
	</table>
	</strong>
</body>
</html>

致谢：此文为本人的学习笔记，仅供参考，感谢大家的浏览！

会伏地的向日葵

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
table表格学习归纳

一、常用标签：thead-定义表格头部tbody-定义表格主体tr-行td-行内元素（列）tfoot-定义表格底部th-头部加粗二·、常用属性：border-边框 height,width高和宽单位：px 对齐方式:align背景：bgcolor-背景颜色background-背景图片（优先显示）cellpadding-表格边距cellspacing-表格间距三、合并单元格：colspan --------- 水平方向合并的是列<th colsp.
复制链接

扫一扫