您的位置：首页 > 其它

table的各种属性的杂谈

2017-05-19 15:12 183 查看

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">

// table 的属性

//(1) 设置表格布局算法：table-layout:automatic 默认。列宽度由单元格内容设定。

// fixed
列宽由表格宽度和列宽度设定。--->由第一行的列宽决定

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

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

//注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

//固定表格布局：

// 固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。

// 在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。

// 通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格。

//自动表格布局：

// 在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。

// 此算法有时会较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容。

// Object.style.tableLayout=automatic|fixed

// table、th 以及 td 元素都有独立的边框

//(2)折叠边框：

// border-collapse 属性设置是否将表格边框折叠为单一边框：

// separate
默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。

// collapse
如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

// inherit
规定应该从父元素继承 border-collapse 属性的值。

//注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

//

//(3)表格宽度和高度:

//通过 width 和 height 属性定义表格的宽度和高度。

//(4)表格文本对齐

//text-align 和 vertical-align 属性设置表格中文本的对齐方式。

//(5)表格内边距

//如需控制表格中内容与边框的距离，请为 td 和 th 元素设置 padding 属性：

//(6)border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。

//该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔。除非 border-collapse 被设置为 separate，否则将忽略这个属性。尽管这个属性只应用于表，不过它可以由表中的所有元素继承。

//(7) empty-cells 属性设置是否显示表格中的空单元格（仅用于“分离边框”模式）border-collapse:separate

// hide
不在空单元格周围绘制边框。

// show
在空单元格周围绘制边框。默认。

// inherit
规定应该从父元素继承 empty-cells 属性的值。

//(7)caption-side 属性设置表格标题的位置。

// top
默认值。把表格标题定位在表格之上。

// bottom
把表格标题定位在表格之下。

// inherit
规定应该从父元素继承 caption-side 属性的值。

// <table class="one">

// <caption>This is a caption</caption>

// <tr>

// <td>100000</td>

// <td>10000000000000000</td>

// <td>00000000000000111111</td>

// <td>00000000111></td>

// </tr>

// </table>

(8)td内的字体大小修改方法:

例如:

<td color="">

<font size="5";color="red";></font>当前列

</td>

(9)th标签文字居中

<th width="46%" style="text-align:center;">XXX</th>

(10)table标签的 cellspacing,cellpadding属性

cellspacing单元格间距-不同单元格之间的距离-----其属性值理论上这个属性只支持数值--例:cellspacing="2";

cellspacing---可用border-spacing代替

cellpadding--单元格填充---指的是单元格边框与内容之间的距离

(11)

<h4>背景颜色：</h4>
<table border="1" bgcolor="red">
<td bgcolor="red">First</td>

<h4>背景图像：</h4>
<table border="1" background="/i/eg_bg_07.gif">
<td background="/i/eg_bg_07.gif">Second</td>

<h4>这个表格有一个标题，以及粗边框：</h4>
<table border="6">
<caption>我的标题</caption>

(12)<td> 标签的 colspan 属性以及rowspan属性

<td colspan="2">January</td>所以浏览器都支持 colspan 属性。没有浏览器支持 colspan="0"

注释：colspan="0" 指示浏览器横跨到列组的最后一列。

<td rowspan="2">January</td>指:合并的行数

(13)

HTML 表格有两类单元格：
表头单元 - 包含头部信息（由 th 元素创建）
标准单元 - 包含数据（由 td 元素创建）
td 元素中的文本一

(14)td标签的相关的属性:

align:
left 规定单元格内容的水平对齐方式。
right
center
justify
char

scope:
col 定义将表头数据与单元数据相关联的方法。
colgroup
row
rowgroup
valign:
top 规定单元格内容的垂直排列方式。
middle
bottom
baseline

</script>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航