table标签历史悠久,在互联网出现的早期,web网页的排版主要是靠table表格,对web网页做出了不可磨灭的贡献,直到后来层叠样式表:CSS的发展完善,再配合空元素DIV,才有了今天绚丽多彩的网页样式,利用table标签排版网页就成了老掉牙的陈旧技术,很多前端初学者甚至对table这个标签很不屑,认为用了table好像自己就跟很low的技术沾上了边,所以除了一些需要用大量表格展示数据的网页,几乎看不到table的身影,table标签至此彻底的衰落了。

  其实table标签虽然在网页排版方面的功能我们不需要了,但是在表格展示的时候,table无疑还是最好用的标签,由于table标签的样式设置和普通的标签不太一样,并且由于初学者的轻视,造成了一些人在开始学习html的时候并没有深入学习,导致在有需要使用的时候对table的各种属性设置糊里糊涂,比如我,在吃过亏以后详细测试整理了关于table的用法。

  

一般使用table都要和其他表格标签成套使用,包含的标签有:
  <table>成套的标签--展示数据
  <tr>行
  <td>列
  <th>表头<thead>中的列
 
表格分为三部分:
    表头--thead
    表身--tbody 在表格里必须要有,可以有多个(“body“只能有一个)
    表尾--tfoot
 
可以不用写表头、身、尾,直接用<tr>和<td>,否则三部分都必须要写,而且有顺序,依次是:thead、tfoot、tbody,并且<thead> 内部必须拥有 <tr> 标签。
 
  <table>标签有用的属性
属性
描述
align
left/center/right
规定表格相对周围元素的对其方式;不赞成使用,使用样式替代
bg-color
reb(x,x,x)/#xxx/colorname
规定表格的背景颜色;不赞成使用,使用样式替代
border
数字(无单位)
规定表格边框的宽度,值为0则无边框
cellpadding
数字(无单位)
规定单元的边框和内容之间的空白(相当于padding)
cellspacing
数字(无单位)
规定单元格之间的空白(相当于margin)
表格的特性:自动垂直水平对齐表格内的元素(块、行内、其他)

<td>标签中有用的属性:rowspan:n(跨行合并)、conspan:n(跨列合并)

table属性cellspacing、cellpadding的css替代写法
/*控制cellspacing*/ //border-spacing:相当于cellspacing(margin)
table{border:; margin:; border-collapse:collapse; border-spacing:;}
/*控制cellpadding*/ //直接设置td、th的padding,相当于设置了cellpadding
table td, table th {padding:;}
border-collapse : separate | collapse
separate :  默认值。边框独立(标准HTML)
collapse :  相邻边被合并
table的 cellspacing: 本质是style属性中的 border-spacing
  1.border-spacing 只能用在table (或者display table 的元素上,会作用于 子元素上)
  2.border-spacing 只有在 border-collapse 不是  collapse  (是separate)的时候有效(是collapse的时候边框已经合并自然就不存在两个边框的距离了)
  3. 可以分别设置垂直和水平的值    如果定义两个 length 参数,那么第一个设置水平间距,而第二个设置垂直间距。
  -webkit-border-vertical-spacing: 10px;
  -webkit-border-horizontal-spacing:120px;
 
 
1、table中的width和height设置及其作用:
    table设置height其实是设置个最小值,也就是当表格中的内容或者行高总值超过这个设置值时,会自动延长表格的height值,当表格中的内容或者行高没有达到这个值时,会自动扩大到这个值。当table不设置height时,且tr、td都未设置height时,由内容自动撑开高度,并且高度的值以最高的行为准。
    table设置width值一般为表格宽度的最大值,不能改变,即使内部的内容宽度超过也不能改变。(相当于正常元素的width)(这个内部内容如果是图片的话是可以改变表格宽度的。)
2、tr标签中width和height设置及其作用:
    tr标签里面的width(tr的width其实等于table的width)设置不起任何作用,table设置了width以后,tr的width跟随table的width值,tr再设置width无效。
    所以在tr中只有讨论height设置的可能了,tr中的height设置和几个tr之间的设置有关。
    table设置了height值时:
    1、当几个tr都设置了height的具体数值时且总和未超过table的height值,各个tr的height按照设置的值的比例来分配table的height值(因为总和未达到table的height值时会自动延伸),当各tr的height值总和超过table的height 值时,按照tr设置的实际数值计算。
    2、当几个tr都没有设置height具体值时,平均分配总的height值。
    3、当有的tr设置height值,有的tr没有height时,有值的按照设置值,没有值的平均分配剩余的height(总和小于table的height时),或者根据内容撑开高度(总和大于table的height时)
    
3、td标签中width和height设置及其作用:
    td标签里面的width和height都是起作用的。
    width:
    1、某一个td的width是和同列每个td的width都相关的,某列的宽度是取同列中最大的td的width作为这一列中每个td的width。
    2、同行中各个td之间的宽度分配按照第二条中各 tr的height分配规律,有一点不同的是全部是默认的情况下,各td的width不是平均分配,而是根据各自的实际内容按比例分配。
    height:
    td的height和tr的height之间的关系,哪个大按照哪个为准。
    其他参考tr的height规则。
 
如何实现table的td宽度可以可以随页面宽度变化的?
    table设置一个百分比宽度,保证table的width是可变的,如果不设置width那么是根据内容自动撑开的;
    如果table有父级元素要给table的父级设置百分比宽度保证父级是可变的,不然如果父级宽度固定那么即使table的宽度是百分比,那么此时也是固定的宽度

详解html中的元老级元素:“table”的更多相关文章

  1. 详解HTML中的表单元素

    代码详讲: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  2. (转载)详解Javascript中prototype属性(推荐)

    在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...

  3. jQuery:详解jQuery中的事件(二)

    上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...

  4. 【转】详解JavaScript中的this

    ref:http://blog.jobbole.com/39305/ 来源:foocoder 详解JavaScript中的this JavaScript中的this总是让人迷惑,应该是js众所周知的坑 ...

  5. 举例详解Python中的split()函数的使用方法

    这篇文章主要介绍了举例详解Python中的split()函数的使用方法,split()函数的使用是Python学习当中的基础知识,通常用于将字符串切片并转换为列表,需要的朋友可以参考下   函数:sp ...

  6. 详解 javascript中offsetleft属性的用法(转)

    详解 javascript中offsetleft属性的用法 转载  2015-11-11   投稿:mrr    我要评论 本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ...

  7. 详解javascript中的this对象

    详解javascript中的this对象 前言 Javascript是一门基于对象的动态语言,也就是说,所有东西都是对象,一个很典型的例子就是函数也被视为普通的对象.Javascript可以通过一定的 ...

  8. 详解Spring中Bean的作用域与生命周期

    摘要:在利用Spring进行IOC配置时,关于bean的配置和使用一直都是比较重要的一部分,同时如何合理的使用和创建bean对象,也是小伙伴们在学习和使用Spring时需要注意的部分,所以这一篇文章我 ...

  9. 图文详解Unity3D中Material的Tiling和Offset是怎么回事

    图文详解Unity3D中Material的Tiling和Offset是怎么回事 Tiling和Offset概述 Tiling表示UV坐标的缩放倍数,Offset表示UV坐标的起始位置. 这样说当然是隔 ...

随机推荐

  1. Static / Const 的概念

    C/C++/Java Static / Const 的概念 这里以C为准,其他语言类似. Static变量是指分配不变(只可分配一次,以后再分配就无效了.)的变量 -- 它的存活寿命或伸展域可以贯穿程 ...

  2. 0_Simple__simplePitchLinearTexture

    对比设备线性二维数组和 CUDA 二维数组在纹理引用中的效率 ▶ 源代码.分别绑定相同大小的设备线性二维数组和 CUDA 二维数组为纹理引用,做简单的平移操作,重复若干次计算带宽和访问速度. #inc ...

  3. api 1.1构架篇

    首先让其自动加载??? 在YiiBase.php里面 改写autoload方法:     /**     * Class autoload loader.     * This method is p ...

  4. scala.XML处理

    XML scala提供了对xml字面量的内建支持,我们可以很容易的在程序代码中生成xml片段, scala类库也包含了对xml常用处理的支持 有时候scala会错误识别出xml字面量 如x < ...

  5. c++builder XE7 C++11 C++0x 新语法

    Non-static data member initializers 非静态成员变量初始化变得简单,这个XE7 64位编译成功,32位还是不支持 As a simple example, struc ...

  6. Mysql 主键常用修改

    修改表的定增长初始值: ALTER TABLE 表名 AUTO_INCREMENT=值;

  7. python list()总结

      # 1 列表的创建,用方括号表示[ ] name=['xiaolei','xiaoman','lixia','xiaolei'] # 2 列表的查询,通过索引值差值,第一位索引为0 #倒数第一个 ...

  8. tensorflow笔记之反向传播时用到的几种方法

    1. 梯度下降, tf.train.GradientDescentOptimizer(0.05),梯度下降的问题在与不一定能获得全局最优解,并且因为要在所有数据上最小化损失,所以损失函数是在所有训练数 ...

  9. SecureCRT结合xmanager远程启动图形化界面程序

    我们很多操作都是可以通过命令行的形式来完成,但是由于不支持图形模式,在一些需要图形界面的时候就很麻烦.本次设置可以在secureCRT中直接使用netca\dbca命令,通过xmanager的pass ...

  10. Scala语言学习笔记(4)

    高阶函数 // 高阶函数 map val salaries = Seq(20000, 70000, 40000) val doubleSalary = (x: Int) => x * 2 val ...