25 ,CSS 构造表格

1. 表格的基础构造

2. 边距和边线应用

3. 隐藏和删除应用

4. 简单表格

table {

width:auto;

border-collapse:collapse;

margin-left:20px;

border:1px solid black;

}

td,th {

width:50px;

border:1px solid black;

padding:5px;

background:gold;

text-align:center;

vertical-align:middle;

text-indent:5px;

}

123456 789101112 12 89101112

2. 行组和列组

table.example1 thead {

background:orange;

color:black;

}

table.example1 tbody {

background:gold;

color:black;

}

table.example1 tfoot {

background:firebrick;

color:white;

}

*.col1 {

background:wheat;

}

*.col2 {

background:gold;

}

*.col3 {

background:orange;

}

*.col4 {

background:tomato;

}

*.col5 {

background:firebrick;

}

*.col6 {

background:black;

color:white;

}

123456 789101112 131415161718 12 89101112

. 3. 表格选择符

1 2 3 4 5 6 789101112 131415161718

. 4. 分隔的边框

table {

border-collapse:separate;

}

td,th {

width:50px;

padding:5px;

text-align:center;

vertical-align:middle;

background:gold;

text-indent:5px;

}

.boxed-table {

border:1px solid black;

}

.boxed-cells td {

border:1px solid black;

}

.boxed-cells td.x {

border:none;

}

封装的表格

12-3 78

class=“x”>11

封装的单元格

12-3 78

class=“x”>11

封装的单元格和表格

12-3 78

class=“x”>11

5. 重复的边框

table {

border-collapse:collapse;

}

td,th {

width:50px;

padding:5px;

text-align:center;

vertical-align:middle;

background:gold;

text-indent:5px;

}

.boxed-table {

border:1px solid black;

}

.boxed-cells td {

border:1px solid black;

}

.boxed-cells td.x {

border:none;

}

封装的表格

12-3 78

class=“x”>11

封装的单元格

12-3 78

class=“x”>11

封装的单元格和表格

12-3 78

class=“x”>11

. 6. 隐藏和删除单元格、行、列

table {

border-collapse:separate;

}

td,th {

width:50px;

padding:5px;

text-align:center;

vertical-align:middle;

background:gold;

text-indent:5px;

border:1px solid black;

}

.hidden {

visibility:hidden;

}

.delete {

display:none;

}

1234 5 6 7 8

. 7. 垂直对齐数据

.x {

vertical-align:middle;

}

1表格的基础构造1

1	2	3	4	5
1	2	3	4	5

　　1表格的基础构造2

1	2	3	4	5	6
7	8	9	10	11	12

1	2
	8	9	10	11	12

　　2表格的行组和列组

1	2	3	4	5	6
7	8	9	10	11	12
13	14	15	16	17	18

1	2
	8	9	10	11	12

　　3表格选择符

1	2	3	4	5	6
7	8	9	10	11	12
13	14	15	16	17	18

　　4表格分隔的边框

封装的表格

1	2-3
	7	8			11

封装的单元格

1	2-3
	7	8			11

封装的单元格和表格

1	2-3
	7	8			11

　　5表格重复的边框

封装的表格

1	2-3
	7	8			11

封装的单元格

1	2-3
	7	8			11

封装的单元格和表格

1	2-3
	7	8			11

　　6隐藏和删除单元格、行、列

1	2	3	4
5	6	7	8

　　7表格 垂直对齐数据

1	2	3	4
5	6	7	8