[HTML表格]3.表格嵌套

html-css08

[HTML表格]3.表格嵌套,第1张

1)width--表格的宽度(px %)

若不设置,则取决内容的宽度。

2)align--表格的水平对齐方式(left center right)

3)border--表格边框的宽度(px)

4)bgcolor--表格的背景颜色(rgb(x,x,x) #xxxxxx colorname)

5)cellspacing--单元格之间的空白(px %)

6)cellpadding--单元格和内容之间的空白(px %)

7)frame--外侧边框

(void-不显示 above-显示上部 below-显示下部 hsides-显示上下 vsides-显示左右 lhs-显示左边 rhs-显示右边 box-显示四边 border-显示四边)

注意：box和border无区别,只是彼此的别名。

8)rules--内侧边框

(none-无线条 groups-位于行组和列组之间 rows-位于行 cols-位于列 all-位于行和列)

注意：groups与none显示一致

1)<tr>与<td>与<th>的属性

align-水平对齐(left center right justify char)

注意：

justify指两端对齐

char指按照字符对齐,需要指定char="字符内容"

valign-垂直对齐(top middle bottom baseline)

注意：

baseline指在四线格写小写x时底部的线

bgcolor-背景颜色(rgb(x,x,x) #xxxxxx colorname)

2)<td>与<th>补充属性

width-单元格的宽度(px %)

height-单元格的高度(px %)

3)<thead><tbody><tfoot>的属性

align-水平对齐(left center right justify char)

valign-垂直对齐(top middle bottom baseline)

1)跨列属性colspan

只需要在对应的td标签中添加colspan属性,并删除当前行中多余的列。

2)跨行属性rowspan

只需要在对应的td标签中添加rowspan属性,并删除相对应行中多余的列。

1)嵌入的表格必须是完整的表格结构

2)嵌入的表格要放到<td>标签中,因为<td>是表格的最小单位。

一、基础铺垫：

① table元素的部分属性(针对于本话题)：1

2

bgcolor="#ffffff" bordercolordark="" bordercolorlight="" >

border 表格内单元格边框的宽度 [STF][^hello]

[^hello]:注：DTD指示此属性允许在哪种DTD中使用。S=Strict, T=Transitional, F=Frameset.cellspacing 单元格与单元格之间的 间距 [STF]

cellpadding 单元格的内边距 [STF]

width 表格的宽度 [STF]

bordercolor、bgcolor [TF]但如大家熟知，给border定义为border=”1”，表现缺不符预期，是比一像素粗的边框。

综上这些在元素内用属性定义表现的方式，已被逐渐不推荐——弃用。真正的表现性的东西，应该由css来完成。

但目前可行的，相对科学的、实惠的实现方式究竟如何呢？

② table方面css部分属性(针对于本话题)：table{border-collapse:collapseborder-spacing:0}

td{padding:0} 相当于cellpadding

border-collapse 定义相邻单元格边框是否合并

border-spacing 定义单元格与单元格之间的 间距相当于cellspacing(除ie6/7外浏览器识别，ie6/7用expression弥补，

见下，管它性能不性能的呢，谁让他用破ie呢)

二、方案(从上到下推荐度逐渐降低)：

① css法(table元素上的一些标签属性不用写)1

2table{border-collapse:collapseborder-spacing:0jerry:expression(cellSpacing='0')}

td{border:1px solid

② 表格背景和单元格背景色差配合法(table元素上的一些标签属性不用写)1

2table{ background:#000border-collapse:separateborder-spacing:1pxjerry:expression(cellSpacing='1')}

td{background:#fff}

③ css边框拼补法(table元素上的一些标签属性不用写)1

2

3

4

5table{

border-collapse:collapseborder-spacing:0jerry:expression(cellSpacing='0')

border-right:1px solid #000border-bottom:1px solid #000

}

td{border-left:1px solid #000border-top:1px solid #000}

④ css和标签属性结合法1

2table{border-collapse:collapseborder-spacing:0jerry:expression(cellSpacing='0')}

⑤ 标签法(原理同②)1

2

3

4

5

6

7

8

9

或

三：注意点

经测试对于单元格边距，单元格间距，单元格边框这三项，如果在元素标签的属性 和 css中的属性 同时定义的情况下：(此结果在各浏览器下和各ie版本下以及各ie版本的各种兼容模式下都适合)css中的优先级比标签属性的高的是：单元格边距、单元格间距 这两项。也就是说比如以下这种情况下，1

2

3table{border-spacing:0jerry:expression(cellSpacing='0')}

table td{padding:0}

实际表现以css定义为准。

css的定义与标签属性的定义累加(如果有相邻合并，则只累加不相邻的单元格边框)的是：单元格边框宽度。也就是说比如以下这种情况下，1

2table td{border:3px solid #000}

则实际表现结果的单元格边框宽度为8px。注意如果有相邻合并定义，则只累加不相邻的单元格边框。

附html代码，可以用不同浏览器，及IE的各个版本去测试，及其各种兼容模式，全部没问题

<!DOCTYPE html>

<html>

<head>

<title>HTML表格的嵌套</title>

<meta charset="UTF-8" />

</head>

<body>

<table border="1" style="width: 300px">

<tr>

<td>1</td>

<td colspan="2">2</td>

<td>3</td>

</tr>

<tr>

<td colspan="2">1</td>

<td colspan="2">2</td>

</tr>

<tr>

<td colspan="2">1</td>

<td colspan="2">2</td>

</tr>

</table>

</body>

</html>

合并单元格就可以实现效果了