HTML标签之table
对于table来说,在一些小的模块中进行表格布局是非常好用的。我们可以这样来理解table,主要分成table部分和td部分。
table部分:
主要是来控制外边框的(就是最外面一层边框,不包括里面部分),它拥有的属性为:margin属性,border属性,cellspacing属性,规定单元格之间的空白cellpadding属性,规定单元边沿与其内容之间的空白。
tr部分:
主要来分割有几行,一般只需要用来设定heigth。
td部分:
用来控制每个单元格的属性,可是分别控制每个单元格的上下左右边框,其中也包含padding属性。
th部分:
用法和td相同,只是用来区分表头的。
注意:
用百分比和用像素点是相同的。在table中,width指的是整个表格的宽度,而td的width值得指内部不包括内容content的宽度,这个同盒子模型。
以下用实例来说明table的一些常用布局手法:
<table bordercolor="red" border="1" class="table_3" cellpadding="10"><tr><td>11111111111111111111111</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr><tr><td>7</td><td>8</td><td>9</td></tr><tr><td>10</td><td>11</td><td>12</td></tr></table>
<table bordercolor="red" border="1" class="table_3" cellpadding="10"><tr><td>11111111111111111111111</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr><tr><td>7</td><td>8</td><td>9</td></tr><tr><td>10</td><td>11</td><td>12</td></tr></table>
注释:
border 设置所有边框的属性值 border=1 数值越小边框越细
bordercolor =”red” 指的是边框颜色为10
cellpadding :规定单元边沿与其内容之间的空白.,数值越大表格越大. (表格填充,用于隔开单元格与单元格的空间)
(图1)
cellspacing=8 单元格与单元格之间的空隙距离.把表格想象成用铁丝做的一个框,cellspacing的属性值就相当于是用8格像素的厚度做的表格.(如图1)
th:定义表头,可以用来合并单元格 比如把第二行,第二三列合并.
<table bordercolor="red" border="1" cellpadding="1" cellspacing="0"> <tr> <td>11111111111111111111111</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <span style="color: #ff0000;"><th colspan="2">合并单元格</th></span> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <td>10</td> <td>11</td> <td>12</td> </tr>
如上所示:假设rowspan=2 合并两行的同时,不删除<td>10</td> 那最后一列就由3列变为4列
<table bordercolor="red" border="1" cellpadding="1" cellspacing="0"><tr><td>11111111111111111111111</td><td>2</td><td>3</td></tr><tr><td>4</td><span style="color: #ff0000;"><th colspan="2">合并单元格</th></span></tr><tr><td>7</td><td>8</td><td>9</td></tr><tr><td>10</td><td>11</td><td>12</td></tr>
colspan 是列合并 colspan=”2″ 就是合并两列
rowspan是行合并
<tr><td>11111111111111111111111</td><td>2</td><td>3</td></tr><tr><td>4</td><th colspan="2">合并单元格</th></tr><tr><<th rowspan="2">合并列</th><td>8</td><td>9</td></tr><tr><td>11</td><td>12</td></tr>
<tr> <td>11111111111111111111111</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <th colspan="2">合并单元格</th> </tr> <tr> <<th rowspan="2">合并列</th> <td>8</td> <td>9</td> </tr> <tr> <td>11</td> <td>12</td> </tr>
合并行之后,把<td>10</td> 删掉的情况
本文出自 “xinsz08の平行时空” 博客,请务必保留此出处http://xinsz08.blog.51cto.com/10565212/1946636
HTML标签之table相关推荐
- Html前端基础(select下拉选标签、table表格标签)
文章目录 一.select 下拉选标签 二.table表格标签 三.练习代码 继续前两篇的Html前端基础的内容,本文主要关于 <select>下拉选标签和 <table>表格 ...
- html的表格分组标签简述优点,表格标签(table)深入了解
表格标签(table)深入了解 互联网 发布时间:2008-10-17 18:47:11 作者:佚名 我要评论 表格(table)是一直以来长期被大家使用的标签,直到现在还是在用,不过呢因 ...
- 用标准dl,dt,dd标签抛弃table列表
过去有很多网页设计师喜欢将他们的网页效果图用table布局实现成网页,但是这样做会遇到一个比较麻烦的问题就是,后期调试和维护会相当的困难. 现在,越来越多的前端开发er们开始使用xHTML+CSS替代 ...
- html标签table的使用,HTML标签之table
对于table来说,在一些小的模块中进行表格布局是非常好用的.我们可以这样来理解table,主要分成table部分和td部分. table部分: 主要是来控制外边框的(就是最外面一层边框,不包括里面部 ...
- 前端:HTML/05/lt;meta标记,XHTML简介及其编写规范,表格标签(lt;table)及其相关标签(lt;tr,lt;td或lt;th)
<meta>标记 <meta>的主要作用,是提供网页的元信息,如:指定网页的搜索关键字 两个属性:http-equlv和name; 1,http-equiv属性:模拟http协 ...
- 定义表格标签(table)
前言:定义表格标签是一个标签,是以html的形式写出来的,不需要设置样式也可以写出表格的样式,如果想要更好的样式,也可以用css来设置. 目录 一.定义表格标签的基本属性及属性值 1.tr 代表行 2 ...
- HTML中表格标签<table><tr><tb><th>中单元格的合并问题
前情知晓 层级关系如下: <table><tr><td> </td><th> </th></tr></tabl ...
- html表格标签<table>
文章目录 一.使用到的标签用法介绍 1. 整体表格结构说明 2. 针对table的属性说明 二.表格制作简单代码实现 三.输出结果示例 四.其他table属性标签 1.标签介绍 2.制作简单个人简历 ...
- html页面的th标签合并,Table tr th td html表格标签
Table tr th td html表格标签教程-- html table tr td�?strong>html table tr th表格布局标签教程�?/p> 学习DIV CSS回头 ...
- 合并单元格两行_28 HTML5标签学习——table单元格的合并
成长是一辈子的事儿!大家好!我是时问新.分享前端.Python等技术,以及个人成长路上的那些事儿. 表格是可以进行单元格的合并的. 比如下图所示: 单元格A跨了两列,单元格E跨了两行.这就是单元格的合 ...
最新文章
- mvn 默认scope_maven scope 的作用
- android 投影仪,不要购买投影仪, 安卓手机投屏很简单, 每个手机都可以
- windows安装Python模块:requests
- SQL Server 自定义快捷键
- 2018.11.09 codeforces487E. Tourists(tarjan+树链剖分)
- GridView的全选与反选
- 深度学习与机器学习到底什么关系?
- Binary XML file line #2: You must supply a layout_height attribute inflate
- Interview Common Sample Codes
- 02、MySQL—数据库基本操作
- 词汇的理解 —— 英译汉
- java假死_分析java进程假死状况
- 欧美准入标准亚马逊现在正在严查UL认证UL1598认证标准
- 大学到底教会了我们什么?
- [小知识] WPS恢复本地历史数据
- 【js】异步方法同步化
- 【python】验证“哥德巴赫猜想” (20 分)(简单方法,秒懂!)
- 运营商大数据的发展现状和趋势
- 复制文件或文件夹时出错---未指定的错误
- CMMI3级认证和CMMI5认证有什么区别?
热门文章
- 可调速自动播放ppt
- moco挡板制作及运行成功<搬代码>
- 欧拉编程c语言作业数值分析,数值分析作业 欧拉 龙格库塔
- 分数乘法计算机题,分数乘法练习题
- JAVA环境配置及如何解决win10重启后环境配置失效的问题
- 东方财富上半年净利同比大增30倍
- java计算机毕业设计中小企业设备管理系统源码+数据库+系统+lw文档
- 【有序充电】基于粒子群算法实现电动汽车充电动态优化策略附matlab代码
- 新店开张,没有流量怎么办?
- bootstrap上传之后的处理_bootstrap-fileinput 进阶 -- 实现上传失败清除之前的预览图且可以继续上传...