【HTML】表格标签(table,tr,td)

news/2024/10/18 0:23:13/
* 表格的主要作用是什么?表格主要作用是布局可以先将表格画出来,然后往表格中放入数据现代的网页布局采用table比较少,采用div布局比较多* 表格相关语法:
1. 表格是table标签
2. border是table标签的一个属性,border是属性名,1px是属性值border="1px",表示表格边框的宽度是1像素px可以省略,默认就是像素border='1px'border=1pxborder=1
3. width是表格宽度的一个属性width="50px"width="50p%"页面百分比
4. height是表示表格的高度的一个属性height="300px"
5. align是表格的对齐方式,td和tr标签中也可以设置这个属性align="center"表示表格居中align="left"表示表格居左align="right"表示表格居右
<!--
关于HTML的实现标签,实现表格
1.表格的主要作用是什么?表格主要作用是布局可以先将表格画出来,然后往表格中放入数据现代的网页布局采用table比较少,采用div布局比较多
-->
<html>
<head><meta charset="UTF-8"><title>表格</title>
</head>
<body>
<!--center标签表示居中-->
<center>员工列表</center><!--hr表示横线标签 color设置横线颜色,width设置横线宽度-->
<hr color="red" width="60%"><!--
1.表格是table标签
2.border是table标签的一个属性,border是属性名,1px是属性值border="1px",表示表格边框的宽度是1像素px可以省略,默认就是像素border='1px'border=1pxborder=1
3.width是表格宽度的一个属性width="50px"width="50p%"页面百分比
4.height是表示表格的高度的一个属性height="300px"
5.align是表格的对齐方式,td和tr标签中也可以设置这个属性align="center"表示表格居中align="left"表示表格居左align="right"表示表格居右
--><table border="1px" width="50%" height="300px" align="center"><!--tr标签标示一行--><tr align="center"><!--td标签标示一个单元格--><td align="center"></td><td></td><td>HTML</td></tr><tr><td></td><td></td><td>HTML</td></tr><tr><td></td><td></td><td>HTML</td></tr></table>
</body>
</html>

实例:员工表格

<html>
<head><meta charset="UTF-8"><title>表格</title>
</head>
<body><table border="1" width="30%" align="center"><tr align="center"><td>员工编号</td><td>员工姓名</td><td>员工薪水</td></tr><tr align="center"><td>7689</td><td>张三</td><td>8000</td></tr><tr align="center"><td>7690</td><td>李四</td><td>10000</td></tr></table>
</body>
</html>

在这里插入图片描述
单元格的合并:
在这里插入图片描述

<html>
<head><meta charset="UTF-8"><title>表格</title>
</head>
<body>
<!--
合并单元格:
行合并:rowspan,rowspan="2"合并两个单元格
列合并:colspan,colspan="2"合并两个单元格
--><table border="1" width="30%" align="center"><tr align="center"><td>1</td><td>2</td><td rowspan="2">3</td></tr><tr align="center"><td>4</td><td>5</td><!--删除表格6--></tr><tr align="center"><td>7</td><td>8</td><td>9</td></tr></table>
</body>
</html>

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


<html>
<head><meta charset="UTF-8"><title>表格</title>
</head>
<body>
<!--
合并单元格:
行合并:rowspan,rowspan="2"合并两个单元格
列合并:colspan,colspan="2"合并两个单元格
--><table border="1" width="30%" align="center"><tr align="center"><td>1</td><td>2</td><td rowspan="2">3</td></tr><tr align="center"><td>4</td><td>5</td><!--删除表格6--></tr><tr align="center"><td>7</td><td colspan="2">8</td><!--删除表格9--></tr></table>
</body>
</html>

在这里插入图片描述


http://www.ppmy.cn/news/533606.html

相关文章

TR-069 Device:2.11 Root Object definition, tr-181-2-11-0.xml

https://cwmp-data-models.broadband-forum.org/tr-181-2-11-0.html#R.TR-098 目录 License Summary Table of Contents Data Types References License Copyright (c) 2010-2017, Broadband Forum Redistribution and use in source and binary forms, with or withou…

Table动态添加数据实现tr滚动

<!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>滚动表格实例</title> <!--css样式是锁定表头不动的--> <style type"text/css"> .table { width: 100%; left: 30%; border-collapse: coll…

表格标签 table标签 tr标签 单元格间距 单元格居中加粗 表单居中

table标签 table标签是表格标签 用这个可以创建一个表格 在标签中可以设置表格的相关属性 tr标签和td标签 一个<tr></tr>标签代表一行 一个<td></td>代表一个单元格&#xff08;一行中的一个元素&#xff09; width hight是css样式 控制表的高和宽 bor…

TR外汇黑平台资金盘深度揭秘,谨防上当受骗,迟早会跑路

本人是有着13年外汇经验的外汇人&#xff0c;行业的大小事情&#xff0c;各级的产业链也基本都接触过&#xff0c;算是一个很资深的行业人士了&#xff0c;这么多年可以说是从刀光剑影中走过来&#xff0c;想想也很不容易了。本人vx&#xff1a;yunshao886 本篇所讲内容&#…

table样式测试总结tr td宽度分析

题外话&#xff1a;一直以来习惯布局用ul,li样式调整比较方便&#xff0c;不会互相影响出现一些问题&#xff0c;but~现在公司涉及很多表格打印&#xff0c;都是用table写的&#xff0c;好多宽度高度合并啊&#xff0c;组合啊~~~&#xff0c;单元格之间互相影响&#xff0c;有的…

SAP ABAP SE09 TR请求传输技巧

SAP ABAP请求号传输技巧 大部分的项目&#xff0c;都是使用的如下client架构&#xff08;编号不一定相同&#xff09;&#xff1a; 100&#xff1a;配置环境&#xff0c;配置需要SCC1接收到300才可以生效。 200&#xff1a;开发环境 300&#xff1a;第一测试环境&#xff0c;在…

table和tr设置样式

table和tr设置样式&#xff0c;和平常的style和class有些许差别。 1、table 样式设置方法有: (1)<table width400 height300 bgcolorgreen border0 cellspacing1></table> (2) <table stylewidth:400px;height:300px;background-color:green;border:0;cellsp…

jQuery为table表格动态添加或删除tr

HTML页面元素如下&#xff1a; <!-- 订单明细dialog --> <div id"contractDetailDiv" title"销售订单明细" style"display:none;"><table class"exhibit_table" id"contractDetailTab" border"1"…