【表格设置】HTML中合并单元格，对列组合应用样式，适应各浏览器的内容换行...

最新推荐文章于 2023-08-21 10:26:40 发布

weixin_30381793

最新推荐文章于 2023-08-21 10:26:40 发布

阅读量516

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Tanghongchang/p/7325849.html

版权

1、常用表格标签

普通

<table>

| <tr>

| | <th></th>

| | <td></td>

| </tr>

</table>

常用

标签	描述
<table>	定义表格
<th>	定义表格的表头
<tr>	定义表格的行
<td>	定义表格单元
<caption>	定义表格标题
<colgroup>	定义表格列的组
<col>	定义用于表格列的属性
<thead>	定义表格的页眉
<tbody>	定义表格的主体
<tfoot>	定义表格的页脚

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr :元素定义表格行，

th :元素定义表头,大多数浏览器会把表头显示为粗体居中的文本，

td: 元素定义表格单元。

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

caption:定义表格的标题。标签必须直接放置到 <table> 标签之后。只能对每个表格定义一个标题。

所有主流浏览器都支持 <caption> 标签。默认居中可通过 "text-align" 和 "caption-side" 能用来设置标题的对齐方式和显示位置。

colgroup：对表格中的列进行组合，可以向整个列应用样式。只能在 <table> 元素之内， <caption> 元素之后，任意元素之前使用。

所有主流浏览器都支持 <colgroup> 标签。如果想对 <colgroup> 中的某列定义不同的属性，请在 <colgroup> 标签内使用 <col> 标签。

<colgroup span="2" style="background-color:red"> </colgroup> --两列变为红色

span 规定列组应该横跨的列数。

col：标签为表格中一个或多个列定义属性值。<col> 没有结束标签。只能在 table 或 colgroup 元素中使用 <col> 标签。

<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>

thead：标签用于组合 HTML 表格的表头内容。作为 <table> 元素的子元素，出现在 <caption>、<colgroup> 元素之后，<tbody>、 <tfoot> 和 <tr> 元素之前。

元素内部必须包含一个或者多个 <tr> 标签。

tbody：用来规定表格的主体内容

tfoot：用来规定表格的页脚部分

三者结合起来使用通过使用这些元素，使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。

当包含多个页面的长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

2、属性

属性	值	描述
align	left center right	不赞成使用。请使用样式代替。规定表格相对周围元素的对齐方式。
bgcolor	rgb(x,x,x) #xxxxxx colorname	不赞成使用。请使用样式代替。规定表格的背景颜色。
border	pixels	规定表格边框的宽度。
cellpadding	pixels %	规定单元边沿与其内容之间的空白。
cellspacing	pixels %	规定单元格之间的空白。
frame	void above below hsides lhs rhs vsides box border	规定外侧边框的哪个部分是可见的。
rules	none groups rows cols all	规定内侧边框的哪个部分是可见的。
summary	text	规定表格的摘要。
width	% pixels	规定表格的宽度。

3、边框

border属性规定表格边框的宽度。

<table border="1"> </table> 边框为1px

border-collapse： 属性设置表格的边框是否被合并为一个单一的边框

如果没有指定 !DOCTYPE border-collapse 属性在 IE8 及更早 IE 版本中是不起作用的。

collapse	如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性
separate	默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性
inherit	规定应该从父元素继承 border-collapse 属性的值

制作一个各边都为1px的边框

1. <table border="1"> </table> |

table{border-collapse:collapse} | -- --所有边框都为1px 的表格

2、 table 的CSS为 { border-collapse:collapse; border:none; }

td 的CSS为 { border:solid #000 1px; }

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

1、table中的width和height设置及其作用：

table 中设置的 height 其实是设置一个最小值，

当表格中的内容或者行高总值超过这个设置值时，会自动延长表格的height值，

当表格中的内容或者行高没有达到这个值时，会自动扩大到这个值。

table 中设置的 width 值一般为表格宽度的最大值，不能改变，即使内部的内容宽度超过也不能改变。

（这个内部内容如果是图片的话是可以改变表格宽度的。）

2、tr标签中width和height设置及其作用：

tr 标签里面的 width 设置不起任何作用。

tr 中的 height 设置和几个tr之间的设置有关。

当几个 tr 都设置了 height 的具体数值时，各个 t r的 height 按照设置的值的比例来分配总的height值，

当几个 tr 都没有设置 height 具体值时，平均分配总的height值。

当 tr 设置了具体的数值，有的没有设置具体的数值为默认时，先保证各个tr的基本需要，剩下的再满足设置了具体值的tr，之后再全部给没有设置具体值的tr。

宽度不够 tr 总的设置值的情况，要满足tr的基本需要，这里会自动延长表格的height的。然后再考虑设置了height的tr，最后考虑没有设置height的tr。

3、td标签中width和height设置及其作用：

td 的 width 是和所处的一列每个 td 的 width 都相关的，取其中最大的 width 作为这一列中每个 td 的 width，

各个 td 之间的宽度分配按照第二条中各 tr 的 height 分配规律，

各td的width不是平均分配，而是根据各自的实际内容按比例分配。

td 的 height要看这个td所在的行的最大高度来确定这一行的每个td的height，然后各个行的高度情况和tr中的height分配原则是一样的。

4、td的height和tr的height之间的关系。

首先肯定是根据内容的需要，在这个基础上，再根据设置的值来确定，哪个设置的值大就按照哪个，

如果一个设置了值一个没有设置值，那么按照设置值的算。

5、表格内容自动换行

一汉字换行

table-layout:fixed //固定表格大小（不会被撑大）

word-break:break-all; //字符串自动换行

table-layout

所有主流浏览器都支持table-layout属性。

值	描述
automatic	默认。列宽度由单元格内容设定。
fixed	表的宽度和列的宽度固定，不随单元格中内容而改变一. 设置了各个列的宽，没有设表的宽：表的宽度等于各个列的宽度的和二. 设置了表的宽度，没有设各个列的宽度：各个列的宽度平均分配三. 要是都没设置宽度：表的宽度为100％，各个列的宽度平均分配
inherit	规定应该从父元素继承 table-layout 属性的值

值

描述

automatic

默认。列宽度由单元格内容设定。

fixed

表的宽度和列的宽度固定，不随单元格中内容而改变

一. 设置了各个列的宽，没有设表的宽：表的宽度等于各个列的宽度的和

二. 设置了表的宽度，没有设各个列的宽度：各个列的宽度平均分配

三. 要是都没设置宽度：表的宽度为100％，各个列的宽度平均分配

inherit

规定应该从父元素继承 table-layout 属性的值

注意： IE7和更早的版本不支持"inherit"的值。IE8需要定义！DOCTYPE。IE9支持"inherit"。

要想固定table的总的宽度和每列的宽度：

<table id="Table1" style="table-layout:fixed" border="1" >

word-break

指定非CJK脚本的断行规则 (CJK脚本是中国，日本和韩国（"中日韩"）脚本)。

值	描述
normal	使用浏览器默认的换行规则。允许在词间换行
break-all	允许在单词内换行。不管在什么位置，超过列宽时就回行允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all	只能在半角空格或连字符处换行。不允许 Chinese, Japanese, 和 Korean 回行

值

描述

normal

使用浏览器默认的换行规则。允许在词间换行

break-all

允许在单词内换行。不管在什么位置，超过列宽时就回行

允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本

keep-all

只能在半角空格或连字符处换行。

不允许 Chinese, Japanese, 和 Korean 回行

注意：
1、(IE浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行

abcdefghigklmnopqrstuvwxyz 1234567890

</td>

</tr>

</table>

2、（Firefox浏览器）不能解决连续的英文字符和阿拉伯数字的断行, ,我们只有让超出边界的字符隐藏或者,给容器添加滚动条
(Firefox浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行，

使用overflow:hidden;隐藏超出内容，这里overflow:auto;无法起作用

abcdefghigklmnopqrstuvwxyz1234567890

</td>

</tr>

</table>