HTML表格标签及布局

最新推荐文章于 2022-09-16 22:17:42 发布

D-onnie

最新推荐文章于 2022-09-16 22:17:42 发布

阅读量466

点赞数

分类专栏： HTML表格标签及布局文章标签： html web 前端

本文链接：https://blog.csdn.net/qq_43473027/article/details/115824172

版权

HTML表格标签及布局专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML表格标签

<table></table>表格标签：

类似于excel中，将内容以划分为表格的方式展示。单独使用此标签没有实质性的效果，需要配合下方的行标签和单元格标签一起使用。

border属性：

设置表格的边框大小，如果针对于这个属性进行设置只会影响表格四周边框的大小，并不会影响到表格的单元格边框粗细。

bordercolor属性：

设置表格的边框颜色。（不是所有的浏览器都可以正常展示）

cellspacing属性：

内框宽度值，用于设置表格内部每个单元格之间的间距。值为数字其单位为像素。

cellpadding属性：

表格与内容的内边框距离，默认情况下单元格的内容会紧贴着单元格的边框，可以使用cellpadding来设置单元格与单元格中的内容之间的距离。值为数字，单位为像素。

bgcolor属性：

设置整个表格的背景颜色，取值为颜色值。

background属性：

设置整个表格的背景图像，取值为图像文件的绝对目录或者相对目录。

表格行标签

<tr></tr>表格行标签：

需要放在表格标签中使用才有效果，用于划分出单独一行存放单元格。

height属性：

控制行的高度，值为一个数字，单位为像素。

bordercolor属性：

控制行的边框颜色，值为颜色取值。（不是所有浏览器都可以正常展示）

bgcolor属性：

设置当前行的背景颜色，取值为颜色值。

background属性：

设置当前行所采用的背景图片，值为图片文件所在的绝对或者相对路径。
left：靠左对其（默认）
right：靠右对齐
middle：居中对齐

align属性：

设置当前行内容的水平对齐方式，不受表格的整体对齐方式影响，却可以被单元格中所定义的对齐方式覆盖。

top：靠上对其
middle：居中对齐（默认）
bottom：靠下对其

valign属性：

设置当前行内容的垂直对齐方式，不受表格整体对齐方式影响，却可以被单元格中所定义的对齐方式覆盖。

注意：

<table></table>表格行标签，需要放在表格标签中使用才有效果，用于划分出单独一行存放单元格。

表格单元格标签

<td></td>表格单元格标签：

放在单元格行标签内，用于展示一个单一的 单元格。单元格内可以包含任何你需要包含的内容。

列标题单元格标签默认情况下，单元格的宽度和高度会随着内容的大小自动调整，但是我们也可通过width属性和height属性进行干预。但是如果我们设置了表格的高和宽，这将会覆盖tr和table中已经定义的样式。

width属性：

设置单元格的宽度，值位数字，单位为像素。

height属性：

设置单元格的高度，职位数字，单位为像素。

bgcolor属性：

设置单元格的背景颜色，值为颜色取值。

background属性：

设置单元格的背景图片，值为图片文件的绝对路径或者相对路径。

align：

设置单元格内容的水平对齐方式。

valign：

设置单元格内容的垂直对齐方式。

<th></th>列标题单元格标签：

与单元格标签类似，只是会针对于单元格内的内容进行加测和居中显示，更加美观，所以适合作为列标题使用。

表格相关的标签组合使用

注意摆放位置和包含顺序

<body>
	<form action="#">
		<table width="500px" height="550px" bgcolor="white" border="0">
			<tr>
				<td>
					<h1 align="center">申请表</h1>
					<hr size="5px" color="black">
				</td>
			</tr>
			<tr>
				<td>
					姓名：
					<input type="text">
				</td>
			</tr>
			<tr>
				<td>
					感兴趣的职位：
					<label><input type="radio" checked name="work">WEB设计人员</label>
					<label><input type="radio" name="work">WEB管理人员</label>
					<label><input type="radio" name="work">WEb开发人员</label>
				</td>
			</tr>
			<tr>
				<td>
					其他要求：
					<textarea rows="5" cols="30" placeholder="工作地点,薪资要求等."></textarea>
				</td>
			</tr>
			<tr>
				<td>
					<label><input type="checkbox" checked/>发送确认信息</label>
				</td>
			</tr>
			<tr>
				<td>
					经验：
					<select name="" id="">
						<option value="">无经验</option>
						<option selected>1年</option>
						<option value="">2年</option>
						<option value="">5年</option>
					</select>
				</td>
			</tr>
			<tr>
				<td align="center">
					<button>确定</button><button>重置</button>
				</td>
			</tr>
		</table>
	</form>
</body>

效果：
在这里插入图片描述
利用表格布局示例：

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

		<h1>欢迎注册QQ</h1>
		<marquee>请在下方填写信息</marquee>
		<hr color="black" size="5px">
		<!-- 
		表单提交有两种形式：
		1.get提交：参数直接在地址栏中传输
		2.post提交：参数以一种隐秘的方式传输
		 -->
		<form action="p1.html" method="get" target="_blank">
			<table>
				<tr>
					<td>用户名：</td>
					<td><input type="text" name="userName" placeholder="请输入用户名"></td>
				</tr>
				<tr>
					<td>密码：</td>
					<td><input type="password" name="userPwd" placeholder="请输入密码" /></td>
				</tr>
				<tr>
					<td>确认密码：</td>
					<td><input type="password" name="confirmPwd" placeholder="请再次输入" /></td>
				</tr>
				<tr>
					<td>出生日期：</td>
					<td><input type="datetime-local" name="userBirthDay" placeholder="请选择出生日期" /></td>
				</tr>
				<tr>
					<td>性别：</td>
					<td>
						<input type="radio" name="sex" value="man" />男
						<input type="radio" name="sex" value="woman" />女
					</td>
				</tr>
				<tr>
					<td>手机号：</td>
					<td><input type="text" placeholder="请输入你的电话号" maxlength="11" /></td>
				</tr>
				<tr>
					<td>出生地：</td>
					<td>
						<select name="bornProvince">
							<option>--请选择--</option>
							<option>黑龙江</option>
							<option>河南</option>
							<option>河北</option>
							<option>湖北</option>
							<option>湖南</option>
						</select>
						<select name="bornCity">
							<option>--请选择--</option>
							<option value="1">哈尔滨</option>
							<option vlaue="2">大庆</option>
							<option value="3">牡丹江</option>
							<option>齐齐哈尔</option>
							<option>佳木斯</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>爱好：</td>
					<td>
						<input type="checkbox" name="hobby" value="smoking">足球
						<input type="checkbox" name="hobby" value="drinking">篮球
						<input type="checkbox" name="hobby" value="malatang">游戏
						<input type="checkbox" name="hobby" value="dubo">剪辑
						<input type="checkbox" name="hobby" value="xxxxx">乒乓
					</td>
				</tr>
				<tr>
					<td>自我介绍：</td>
					<td><textarea rows="4" cols="32" name="resum" placeholder="请输入你的自我介绍">这里是默认的文字</textarea></td>
				</tr>
				<tr>
					<td colspan="2">
						<button type="submit">注册</button>
						<button type="reset">重置</button>
					</td>

				</tr>
			</table>
		</form>
	</body>

其中<marquee>请在下方填写信息</marquee>为滚动标签

效果:
在这里插入图片描述

D-onnie

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML表格标签及布局

HTML表格标签<table></table>表格标签：类似于excel中，将内容以划分为表格的方式展示。单独使用此标签没有实质性的效果，需要配合下方的行标签和单元格标签一起使用。border属性：设置表格的边框大小，如果针对于这个属性进行设置只会影响表格四周边框的大小，并不会影响到表格的单元格边框粗细。bordercolor属性：设置表格的边框颜色。（不是所有的浏览器都可以正常展示）cellspacing属性：内框宽度值，用于设置表格内部每个单元格之
复制链接

扫一扫