table的各种属性的杂谈

来源：互联网发布：九帅网络机柜编辑：程序博客网时间：2024/06/06 02:55

<!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>

阅读全文

0 0