html中table标签及属性
table表格
- HTML表格由table标签以及多个tr、th和td标签组成
- table表示表格,整个表格要包含在
<table></table>
标签中 - tr表示表格中的行,是单元格的容器,一行可以包括多个单元格
- th表示表格中的单元格,我理解为列,th放在tr内表示这一行为标题行,其中的字体会默认粗体居中显示
- td表示表格中的单元格,我理解为列,td也要放在tr内,可以理解为内容行
- tfoot表示表格最后一行
<table>
是<tr的上层标签<tr>
必须在一个<table></table>
里面,它不能单独使用,相当于<table的属性标签.<table>
标示一个表格,<tr>
标示这个表格中间的一个行,<td>
、<th>
标示行中的一个列,需要嵌套在<tr></tr>
或<tfoot><tfoot>
中间。
简单练习:
效果图:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><table border="1" style="border-collapse: collapse;text-align: center;"><tr><th>姓名</th><th>学号</th><th>性别</th></tr><tr><td>lily</td><td>418</td><td>女</td></tr><tr><td>rose</td><td>36</td><td>男</td></tr><tfoot><td>tom</td><td>479</td><td>男</td></tfoot></table>
</body>
</html>
table标签属性
下列标签属性一般不建议使用,而是通过样式属性来实现
1.border标签属性:设定围绕表格的边框的宽度。实际上border标签属性不仅设置围绕表格边框的宽度,还为每个单元格添加宽度为1px的边框;
实际开发中不建议使用border标签属性实现边框效果,建议通过为table、th和td设定border样式属性实现。
2.width标签属性:设定表格的宽度,该标签属性属性值如下:
不建议通过width标签属性直接设置表格宽度,建议向table标签添加width样式属性进行设置。3.align标签属性:指定表格相对于周围标签的对齐方式
不建议通过align标签属性设置表格相对于周围标签的对齐方式,建议向table标签添加样式属性进行设置:4.cellspacing 标签属性:设定单元格之间的间距(单位:px)。
不建议通过cellspacing标签属性设置单元格之间的间距,建议向table标签添加border-spacing样式属性进行设置
- 5.cellpadding标签属性:设定单元边沿与单元内容之间的间距(单位:px)
不建议通过cellpadding标签属性设置单元边沿与单元内容之间的间距,建议向td或th标签添加padding样式属性来实现
- 6.不建议通过bgcolor标签属性设置表格背景颜色,建议向table标签添加background-color样式属性实现这一效果
- 7.border-collapse样式属性:设置表格的边框是否被合并为一个单一的边框,属性值如下:
table标签练习
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><table border="1" cellpadding="5" style="border-collapse: collapse;text-align: center;"><tbody><tr id="HeadTD"><td class="sort">姓名</td><td class="sort">学号</td><td class="sort">语文</td><td class="sort">数学</td><td class="sort">英语</td><td class="sort">总分</td><td class="sort">平均分</td></tr></tbody><tbody id="ContTD"><tr><td>张三</td><td>220305</td><td>11</td><td>22</td><td>33</td><td>22</td><td>44</td></tr><tr><td>李四</td><td>220302</td><td>33</td><td>44</td><td>66</td><td>99</td><td>33</td></tr><tr><td>黄五</td><td>220307</td><td>22</td><td>55</td><td>22</td><td>55</td><td>66</td></tr><tr><td>赵六</td><td>220303</td><td>44</td><td>22</td><td>33</td><td>66</td><td>88</td></tr></tbody></table>
</body>
<script>window.onload = function () {var HeadTD = document.getElementById("HeadTD");var ContTD = document.getElementById("ContTD");var HeadList = HeadTD.getElementsByTagName("td");var ContTrList = ContTD.getElementsByTagName("tr");var sortArray = new Array();var newNode;for (var i = 0; i < HeadList.length; i++) {HeadList[i].index = i;HeadList[i].onclick = function () {console.log(this);if (this.className) {newNode = "";for (var j = 0; j < ContTrList.length; j++) {sortArray[j] = new Array();sortArray[j][0] = ContTrList[j].getElementsByTagName("td")[this.index].innerText;sortArray[j][1] = j;}if (!isNaN(sortArray[0][0])) {sortArray.sort(sortNumber);} else {sortArray.sort();}for (var x = 0; x < ContTrList.length; x++) {newNode += "<tr>" + ContTrList[sortArray[x][1]].innerHTML + "</tr>";}ContTD.innerHTML = newNode;}}}}function sortNumber(b, a) {if (a > b) {return 1} else if (a < b) {return -1} else {return 0}}
</script></html>
html中table标签及属性相关推荐
- HTML中Table标签的属性及应用
我们如何使用table表格: 定义表格:<table></table> 创建表头:<th></th> 创建表行:<tr></tr> ...
- html当中的属性cellspacing,html中table标签之cellspacing属性的作用
html中table标签之cellspacing属性的作用 发布时间:2020-12-05 10:11:23 来源:亿速云 阅读:60 作者:小新 这篇文章给大家分享的是有关html中table标签之 ...
- html cellpadding属性,HTML table标签 cellpadding 属性
HTML 定义和用法 HTML5 不支持 cellpadding 属性规定单元边沿与单元内容之间的空间,以像素计. 注意:请勿将该属性与 cellspacing 属性相混淆,cellspacing 属 ...
- css中table标签详解(一)
css中table标签详解(一) 什么是table标签,以及table标签的组成? 不叨叨,直接上代码 <table><tr><td></td>< ...
- Web学习第三天——HTML中input标签常用属性、框架集、内嵌框架
第三天HTML中input标签常用属性.框架集.内嵌框架 一.input标签常用属性 表单数据提交特点: (一).文本框(text) (二).密码框(password) (三).单选按钮(radio) ...
- html中table标签、tr标签、th标签、td标签的基础知识
html中table标签.tr标签.th标签.td标签的基础知识 表格的结构 表格的基本标签 表格标签的基本属性 table标签的基本属性 tr标签的基本属性 th和td标签的基本属性 表格高级样式设 ...
- Spring中bean标签的属性和值:
Spring中bean标签的属性和值: <bean name="user" class="com.pojo.User" init-method=" ...
- html中a标签的属性
html中a标签的属性 常用的有: href.rel.target. a标签没有像button的click事件,只能通过html的全局鼠标属性onclick 因此在vue中不能直接对a标签使用语法糖@ ...
- vue3-video-play视频组件的使用(一)——基本使用 HTML5中Video标签的属性、方法和事件汇总
vue3-video-play视频组件的使用(一)--基本使用 & HTML5中Video标签的属性.方法和事件汇总 npm地址:https://www.npmjs.com/package/v ...
最新文章
- 轻量级git服务器 Gogs git 服务器搭建
- 多线程join(加入)
- thinkphp-查询数据-基本查询
- C#中的浅拷贝和深拷贝
- 百度云获取外链直接下载突破限速
- github流程图_「强烈推荐」开源的在线流程图工具--draw.io
- iOS之深入解析Runtime的objc_msgSend“慢速查找”底层原理
- 截图后粘贴或拖拽上传
- 视频转换工具(命令行)
- ACL 2021 | 丁香园知识增强预训练模型
- 深度学习中的BN和dropout方法及训练和测试时的差异
- centos7.4批量自动化安装(pxe、cobbler、制作自动化iso镜像);pxe安装;cobbler安装;
- html子布局不超出父布局,flex布局子元素超出父元素
- 基于SSM学生学籍管理系统
- 大一新生计算机掌握情况word,2021年大一计算机学习心得word版
- 帝国cms后台admin帐号密码忘记的处理方法
- word文档加密保护不能编辑问题
- Tomcat:Tomcat网站上的core和deployer的区别
- Twitter CEO自曝成长经历:生活充满了偶然
- python软件下载对电脑配置要求-Python实现的读取电脑硬件信息功能示例
热门文章
- 「博客之星」投票中:送你喜爱的博主C位出道
- 【校招VIP】“推推”产品项目课程:产品的规划和商业化分析
- LINUX集群技术构建ANSYS分布式高性能计算平台
- PGN(Pointer-Generator Networks)
- python+Qt做一个身高识别辅助器,告别动脑思考的烦恼
- Microsoft Edge浏览器隐藏发现(Bing)按钮
- origin图上显示数据标签_半分钟教程:Origin 中如何设置非等距 X 轴刻度
- java程序实现wifi连接打印_Android下通过wifi调用打印机打印,Java代码片段分享,
- Network | 高颜值动态网络可视化工具(二)
- CDH部署Hive、Spark、oozie、hue、sqoop等