您现在的位置是：网站首页> 编程资料编程资料
HTML表格_动力节点Java学院整理HTML图片img标签_动力节点Java学院整理HTML中锚点的使用_动力节点Java学院整理HTML中div和span比较_动力节点Java学院整理 什么是HTML_动力节点Java学院整理 HTML数据提交post_动力节点Java学院整理HTML超链接a标签_动力节点Java学院整理HTML常用格式标签_动力节点Java学院整理HTML简介_动力节点Java学院整理HTML基本结构_动力节点Java学院整理 HTML框架_动力节点Java学院整理
2021-08-29
1634人已围观
简介 在html中绘制表格使用table标签，tr表示行，td表示列,下面通过代码实例给大家介绍HTML表格的相关知识，感兴趣的朋友一起看看吧
在html中绘制表格使用table标签
- tr表示行
- td表示列
- th表示表头，表头通常用于列名字。
下面是一个列子。
Table in html 水平表头
| Name | Age | Gender |
|---|---|---|
| zdd | 30 | male |
垂直表头
| Name | autumn |
|---|---|
| Age | 30 |
| Gender | famale |
效果图
水平表头
Name | Age | Gender |
zdd | 30 | male |
垂直表头
Name | autumn |
Age | 30 |
Gender | famale |
无边框表格
如果在定义表格时，没有指定border属性，那么表格就没有边框
| zdd | 30 |
| ddz | 27 |
效果图
zdd | 30 |
ddz | 27 |
空单元格
如果没有为单元格指定内容，那么单元格将是空的，且没有边框，如下，这样很不美观。
zdd | 30 |
27 |
如果解决呢？方法是给空的单元格加上空格，由于html忽略多余的空格，所以我们不能直接加空格，而要加 nbsp表示空格。
| zdd | 30 |
| 20 |
效果图
zdd | 30 |
20 |
带标题的表格
使用caption属性，但是好像标题中不能有空格，否则显示的时候会换行！
| zdd | 30 |
| 20 |
我的表格
zdd | 30 |
20 |
跨行或者跨列的表格
用colspan跨行
| 姓名 | 电话 | |
|---|---|---|
| Bill Gates | 555 77 854 | 555 77 855 |
姓名 | 电话 | |
Bill Gates | 555 77 854 | 555 77 855 |
用rowspan跨列
| 姓名 | Bill Gates |
|---|---|
| 电话 | 555 77 854 |
| 555 77 855 |
嵌套的表格
table标签是可以嵌套的，也就是说在tr或者td标签中加入table标签即可创建表格中的表格。
相关内容
- HTML框架_动力节点Java学院整理 HTML图片img标签_动力节点Java学院整理HTML中锚点的使用_动力节点Java学院整理HTML中div和span比较_动力节点Java学院整理 什么是HTML_动力节点Java学院整理 HTML数据提交post_动力节点Java学院整理HTML超链接a标签_动力节点Java学院整理HTML常用格式标签_动力节点Java学院整理HTML简介_动力节点Java学院整理HTML表格_动力节点Java学院整理HTML基本结构_动力节点Java学院整理
- HTML大于号、小于号、空格、引号等常用的转义代码写法一览表HTML中的5种空格各表示的意义探讨HTML不同空格的特性与表现形式(推荐)浅谈HTML代码中的空格和空行浅析html 空格代码HTML/CSS中的空格处理及如何保留页面中的空格
- HTML中实现鼠标经停时整行（tr）变色html5+canvas实现的会变色且会舞动的树动画特效源码html5实现的变色弹珠跳台阶游戏源码HTML5 canvas实现渐变色圆形进度条特效源码使用javascript和HTML5 Canvas画的四渐变色播放按钮效果html5教程实现Photoshop渐变色效果html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
- 移动 web 端屏幕适配(rem)Html5移动端适配IphoneX等机型的方法rem适配移动设备的方法示例浅谈移动端适配大法详解如何使用image-set适配移动端高清屏图片详解H5 活动页之移动端 REM 布局适配方法html5实现移动端适配完美写法手机端用rem+scss做适配的详解移动端适配 使px自动转换rem
- HTML中的<meta>标签的使用详解HTML常用meta大全(推荐)移动端专用的meta标签设置大全html中meta标签及用法详解HTML标签meta总结,HTML5 head meta 属性整理dreamweaver cs5不写写代码怎么添加meta标签?HTML5各种头部meta标签的功能(推荐)HTML中meta标签及Keywords
- html2canvas 将html代码转为图片的使用方法html2canvas实现dashed虚线边框的示例html2canvas把div保存图片高清图的方法示例详解html2canvas截图不能截取圆角图片的解决方案使用html2canvas实现浏览器截图的示例代码html5使用html2canvas实现浏览器截图的示例html 基于 canvas 实现的一个截图小demo
- html文本溢出显示省略字符的两种常用解决方法HTML超出文本显示省略号...通过text-overflow实现规范HTML代码可以节省修改代码的时间html中把多余文字转化为省略号的实现方法方法
- HTML如何在两个div标签中间画一条竖线div+css布局中选择使用html标签的方法div css与xhtml css是什么意思?-CSS教程-网页制作-网页教学网关于DIV CSS和XHTML CSS的理解-CSS教程-网页制作-网页教学网
- HTML页面点击下载文件的两种实现方法HTML5 文件上传下载的实例代码HTML5 File接口在web页面上使用文件下载html中用href 实现点击链接弹出文件下载对话框HTML5拖拽文件到浏览器并实现文件上传下载功能代码
- html中meta标签及用法详解HTML常用meta大全(推荐)移动端专用的meta标签设置大全HTML中的<meta>标签的使用详解HTML标签meta总结,HTML5 head meta 属性整理dreamweaver cs5不写写代码怎么添加meta标签?HTML5各种头部meta标签的功能(推荐)HTML中meta标签及Keywords
