ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

HTML(四)表格

2021-09-30 13:02:18  阅读:159  来源: 互联网

标签:表格 标签 合并 caption HTML table 属性


表格

  • 表格:table、caption、tr、th、 td、border、width等
  • 作用:用于表格、行、列、宽度、边框的制作
  • 示例:制作商品库存表
    在这里插入图片描述
  • table 表格标签
  • caption 大标题,要写在table标签下面
  • tr 代表行
  • th 加粗居中的单元格
  • td 为普通单元格
  • border属性 边框
  • width属性 宽度
  • 例子:
<html>
	<head>
		<title>first.html</title>
	</head>
	<body>
		<table border="1px" width="600px">
			<caption>用户信息表</caption>
			<tr>
				<th>姓名</th>
				<th>密码</th>
				<th>邮箱</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>123</td>
				<td>123</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>345</td>
				<td>456</td>
			</tr>
		</table>
		
	</body>
</html>

在这里插入图片描述

合并表格

  • 合并行列:colspan、rowspan
  • 作用:用于将表格内的某些行、列进行合并
  • 合并原则:从第一行、第一列开始合并,除第一个外,其余合并行(列)需要删除
  • 例题:合并表格标题等位置
    在这里插入图片描述
  • 代码:
<html>
	<head>
		<title>first.html</title>
	</head>
	<body>
		<table border="1" width="600px">
			<caption>商品库存表</caption>
			<tr>
				<th>商品类别</th>
				<th>商品名称</th>
				<th>单位</th>
				<th>数量</th>
			</tr>
			<tr>
				<!--合并2行-->
				<td rowspan="2">家电类</td>
				<td>冰箱</td>
				<td>台</td>
				<td>520</td>
			</tr>
			<tr>
				<td>洗衣机</td>
				<td>台</td>
				<td>13</td>
			</tr>
			<tr>
				<td>辅料</td>
				<td>插线板</td>
				<td>个</td>
				<td>14</td>
			</tr>
			<tr>
				<!--合并4列-->
				<td colspan="4">备注:</td>
			</tr>
		</table>
		
	</body>
</html>

表格属性标签

  • 属性标签:caption(标题)、tbody(主体)、tfoot(页脚)、 thead(页眉)
  • 作用:用于分组设置表格的格式
    在这里插入图片描述

小贴士

  • Firefox、Chrome以及Safari 仅支持colgroup元素的span和width属性。
    在这里插入图片描述

其他标签

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

标签:表格,标签,合并,caption,HTML,table,属性
来源: https://blog.csdn.net/m0_48978908/article/details/120546335

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有