详解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:; 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;

关于html中table表格tr,td的高度和宽度:

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那么是根据内容自动撑开的；