详解html中的元老级元素：“table”
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:0; margin:0; border-collapse:collapse; border-spacing:0;} /*控制cellpadding*/ //直接设置td、th的padding，相当于设置了cellpadding table td, table th {padding:0;}
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的宽度是百分比，那么此时也是固定的宽度
版权声明：本文为superGG1990原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。