html标签table的使用,HTML标签之table
对于table来说,在一些小的模块中进行表格布局是非常好用的。我们可以这样来理解table,主要分成table部分和td部分。
table部分:
主要是来控制外边框的(就是最外面一层边框,不包括里面部分),它拥有的属性为:margin属性,border属性,cellspacing属性,规定单元格之间的空白cellpadding属性,规定单元边沿与其内容之间的空白。
tr部分:
主要来分割有几行,一般只需要用来设定heigth。
td部分:
用来控制每个单元格的属性,可是分别控制每个单元格的上下左右边框,其中也包含padding属性。
th部分:
用法和td相同,只是用来区分表头的。
注意:
用百分比和用像素点是相同的。在table中,width指的是整个表格的宽度,而td的width值得指内部不包括内容content的宽度,这个同盒子模型。
以下用实例来说明table的一些常用布局手法:
11111111111111111111111 | 2 | 3 |
4 | 5 | 6 |
7 | 8 | 9 |
10 | 11 | 12 |
11111111111111111111111 | 2 | 3 |
4 | 5 | 6 |
7 | 8 | 9 |
10 | 11 | 12 |
注释:
border 设置所有边框的属性值 border=1 数值越小边框越细
bordercolor =”red” 指的是边框颜色为10
cellpadding :规定单元边沿与其内容之间的空白.,数值越大表格越大. (表格填充,用于隔开单元格与单元格的空间)
(图1)
cellspacing=8 单元格与单元格之间的空隙距离.把表格想象成用铁丝做的一个框,cellspacing的属性值就相当于是用8格像素的厚度做的表格.(如图1)
th:定义表头,可以用来合并单元格 比如把第二行,第二三列合并.
11111111111111111111111 | 2 | 3 |
4 |
合并单元格 7 8 9 10 11 12
如上所示:假设rowspan=2 合并两行的同时,不删除
10 那最后一列就由3列变为4列
11111111111111111111111 | 2 | 3 |
4 |
合并单元格789101112
colspan 是列合并 colspan=”2″ 就是合并两列
rowspan是行合并
11111111111111111111111234合并单元格<合并列891112 11111111111111111111111 2 3 4 合并单元格 <合并列 8 9 11 12
合并行之后,把
10 删掉的情况
标签:表格,标签,单元格,合并,边框,HTML,table,属性
来源: https://blog.51cto.com/xinsz08/2698476
html标签table的使用,HTML标签之table相关推荐
- 根据div 标签 查看数组@class=modulwrap 下面的/table/tbody/tr/td
<div class="modulwrap"><div class="request_title"><span class=&qu ...
- 表格table中的td标签中的内容太多,影响整体外观,不美观。将一部分内容隐藏起来,用省略号代替
表格table中的td标签中的内容太多,影响整体外观,不美观.将一部分内容隐藏起来,用省略号代替. 招式:1.在table标签中加上style="table-layout: fixed;&q ...
- HTML中table表格的常用标签及属性
table表格的常用标签及属性 <table border="1" cellspacing="0" cellpadding="5"&g ...
- <table> | HTML表格标签的定义与用法
定义与用法 <table> 标签定义 HTML 表格 一个 HTML 表格包括 <table> 元素,一个或多个 <tr>.<th> 以及 <td ...
- html表格中如何设置thtd的边框颜色,表格Table 的Th Td 标签设置背景颜色后边框消失如何解决?...
表格Table的Th Td标签在设置背景颜色后,设置的边框消失了,出现此情况主要是因为 [background]属性 与 [position:relative;]同时使用的缘故. 解决方法:对Th T ...
- table标签修改tr标签的行距,tbale标签的td标签间距
修改tr标签的行距,tbale标签的td标签间距 看如下Css文件的代码,其都没有table的tr行距产生效果 tr{margin-top: 10px;padding: 10px; } td{marg ...
- 用js怎么取table中的tr标签--这是一个陷阱
这个功能看起来很简单,但是其中却隐藏了一个陷阱. 我们通常在用html语言写表格的时候,直接<table>标签中接着写<tr>标签. 因此,我们在用js的children函数时 ...
- html中空标签的有什么,HTML常用标签,什么是空标签和可替换标签
空标签 可替换标签 含义:指标签会被替代,例如img标签会被下载的图片替代. 典型的可替换元素有 . . 和 表单元素,如. . 某些元素只在一些特殊情况下表现为可替换元素,例如 和 . 常用的HTM ...
- struts2控制标签(一)选择标签,iterator标签,append标签
选择标签就不用说了 iterator迭代器标签主要是对集合进行迭代操作,集合可以是List,Map,Set和数组等 id:指定集合元素的ID value: 指定迭代输出的集合,该集合可以试OGNL表达 ...
- html标签体,HTMLCSS基础-html标签的实体
HTML&CSS基础-html标签的实体 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 尹正杰的网页 我的博客地址:https://www.cnblog ...
最新文章
- 康奈尔大学王飞博士:AI处理医疗数据面临的8大挑战
- vsftp mysql_vsftp mysql安装配置
- android调用web service(cxf)实例
- 2016年第七届蓝桥杯 - 省赛 - C/C++大学A组 - A. 网友年龄
- java数据段 静态区_linux进程的堆栈空间_代码段(指令,只读)、数据段(静态变量,全局变量)、堆栈段(局部变量)、栈【转】...
- 每日一笑 | 3 X 4 = ?
- 上传源文件至虚拟服务器,C# 通过WebService上传视频文件到服务器虚拟机下源码...
- Namenode双机热备之Pacemaker
- JavaScript-DOM(2)
- Android性能优化:使用Lint优化代码、去除多余资源
- linux定时备份前一天,linux定时备份
- stc单片机定时器实现歌声_单片机中各种周期的关系与定时器原理
- linux应用程序故障排查,为Linux应用程序排查故障的另类方法
- 刷新网页定位到特定位置
- 微信公众号运营推广方案分享
- A银行B分行零售营销人员激励机制研究
- windows 下的CACTI的安装方法
- Haar-like特征计算和积分图详解
- 使PC端网页宽度自适应手机屏幕大小
- 计算机专业的笔记本电脑配置要求,笔记本电脑硬件配置全解析,看完让你轻松选择笔记本...
热门文章
- 用html编辑csdn的方法
- linux / pkg-config 原理及用法
- 堆内存和数据结构堆之间的关系是什么?
- 数据结构与算法 / LRU 缓存淘汰算法
- c# html 后台拼_c#编写html后台
- flask jinja2 mysql_flask/jinja2 SSTI注入学习
- python建立数据库并序列化_Python之数据序列化(json、pickle、shelve)
- 自动化测试 div sendkeys无效_【自动化测试】【JestSelenium】(04)—— Selenium WebDriver...
- linux top命令VIRT,RES,SHR,DATA的含义
- Http 状态码详解