25 ,CSS 构造表格

1. 表格的基础构造

2. 边距和边线应用

3. 隐藏和删除应用

1.  简单表格

table {

auto;

border-collapse:collapse;

margin-left:20px;

border:1px solid black;

}

td,th {

50px;

border:1px solid black;

padding:5px;

background:gold;

text-align:center;

vertical-align:middle;

text-indent:5px;

}

<table>

<tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th></tr>

<tr><th>7</th><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>

</table>

<table>

<tr><th rowspan="2">1</th><th colspan="2">2</th></tr>

<tr><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>

</table>

 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;

}

<table class="example1">

<thead>

<tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th></tr>

</thead>

<tbody>

<tr><th>7</th><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>

</tbody>

<tfoot>

<tr><th>13</th><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td></tr>

</tfoot>

</table>

<table>

<colgroup>

<col class="col1" />

<col class="col2" />

<col class="col3" />

<col class="col4" />

<col class="col5" />

<col class="col6" />

</colgroup>

<tr><th rowspan="2">1</th><th colspan="2">2</th></tr>

<tr><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>

</table>

. 3.  表格选择符

<table class="example1">

<thead>

<tr>

<th class="t1">1</th>

<th class="t2">2</th>

<th>3</th>

<th>4</th>

<th>5</th>

<th>6</th>

</tr>

</thead>

<tbody>

<tr><th>7</th><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>

</tbody>

<tfoot>

<tr><th>13</th><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td></tr>

</tfoot>

</table>

. 4.  分隔的边框

table {

border-collapse:separate;

}

td,th {

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;

}

<h2>封装的表格</h2>

<table class="boxed-table" cellspacing="5">

<tr><td rowspan="2">1</td><td colspan="2">2-3</tr>

<tr><td>7</td><td>8</td><td> </td><td> </td><td

class="x">11</td></tr>

</table>

<h2>封装的单元格</h2>

<table class="boxed-cells" cellspacing="5">

<tr><td rowspan="2">1</td><td colspan="2">2-3</tr>

<tr><td>7</td><td>8</td><td> </td><td> </td><td

class="x">11</td></tr>

</table>

<h2>封装的单元格和表格</h2>

<table class="boxed-table boxed-cells" cellspacing="5">

<tr><td rowspan="2">1</td><td colspan="2">2-3</tr>

<tr><td>7</td><td>8</td><td> </td><td> </td><td

class="x">11</td></tr>

</table>

 5.  重复的边框

table {

border-collapse:collapse;

}

td,th {

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;

}

<h2>封装的表格</h2>

<table class="boxed-table" cellspacing="0">

<tr><td rowspan="2">1</td><td colspan="2">2-3</tr>

<tr><td>7</td><td>8</td><td> </td><td> </td><td

class="x">11</td></tr>

</table>

<h2>封装的单元格</h2>

<table class="boxed-cells" cellspacing="0">

<tr><td rowspan="2">1</td><td colspan="2">2-3</tr>

<tr><td>7</td><td>8</td><td> </td><td> </td><td

class="x">11</td></tr>

</table>

<h2>封装的单元格和表格</h2>

<table class="boxed-table boxed-cells" cellspacing="0">

<tr><td rowspan="2">1</td><td colspan="2">2-3</tr>

<tr><td>7</td><td>8</td><td> </td><td> </td><td

class="x">11</td></tr>

</table>

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

table {

border-collapse:separate;

}

td,th {

50px;

padding:5px;

text-align:center;

vertical-align:middle;

background:gold;

text-indent:5px;

border:1px solid black;

}

.hidden {

visibility:hidden;

}

.delete {

display:none;

}

<table>

<colgroup>

<col class="hidden delete" />

</colgroup>

<tr><td class="delete">1</td><td>2</td><td>3</td><td>4</td></tr>

<tr>

<td class="hidden">5</td>

<td class="hidden">6</td>

<td>7</td>

<td>8</td>

</tr>

</table>

. 7.  垂直对齐数据

.x {

vertical-align:middle;

}

 1表格的基础构造1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	table{
		border:1px solid black;
	/*	border-collapse  有 设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开 
		separate： 边框独立 
        collapse： 相邻边被合并   */
		 auto;
		border-collapse: collapse;
	}
	th,td{
		background: gold;
		width：50px；
		border: 1px solid black;
		padding: 5px;
	}
</style>
</head>

<body>
<table>
<tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th></tr>
<tr><th>1</th><td>2</td><td>3</td><td>4</td><td>5</td></tr>
</table>
</body>
</html>

　　1表格的基础构造2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	table {
auto;
border-collapse:collapse;
margin-left:20px;
border:1px solid black;
}
td,th {
50px;
border:1px solid black;
padding:5px;
background:gold;
text-align:center;
vertical-align:middle;
text-indent:5px;
}
</style>
</head>

<body>
<table>
<tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th></tr>
<tr><th>7</th><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
</table>
<table>
<tr><th rowspan="2">1</th><th colspan="2">2</th></tr>
<tr><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
</table>

</body>
</html>

　　2表格的行组和列组

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	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;
}
</style>
</head>

<body>
<table class="example1">
<thead>
<tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th></tr>
</thead>
<tbody>
<tr><th>7</th><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
</tbody>
<tfoot>
<tr><th>13</th><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td></tr>
</tfoot>
</table>
<table>
<colgroup>
<col class="col1" />
<col class="col2" />
<col class="col3" />
<col class="col4" />
<col class="col5" />
<col class="col6" />
</colgroup>
<tr><th rowspan="2">1</th><th colspan="2">2</th></tr>
<tr><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
</table>

</body>
</html>

　　3表格选择符

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	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;
}
</style>
</head>

<body>
<table class="example1">
<thead>
<tr>
<th class="t1">1</th>
<th class="t2">2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
</tr>
</thead>
<tbody>
<tr><th>7</th><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
</tbody>
<tfoot>
<tr><th>13</th><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td></tr>
</tfoot>
</table>

</body>
</html>

　　4表格分隔的边框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	table {
border-collapse:separate;
}
td,th {
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;
}
</style>
</head>

<body>
<h2>封装的表格</h2>
<table class="boxed-table" cellspacing="5">
<tr><td rowspan="2">1</td><td colspan="2">2-3</tr>
<tr><td>7</td><td>8</td><td> </td><td> </td><td
class="x">11</td></tr>
</table>
<h2>封装的单元格</h2>
<table class="boxed-cells" cellspacing="5">
<tr><td rowspan="2">1</td><td colspan="2">2-3</tr>
<tr><td>7</td><td>8</td><td> </td><td> </td><td
class="x">11</td></tr>
</table>
<h2>封装的单元格和表格</h2>
<table class="boxed-table boxed-cells" cellspacing="5">
<tr><td rowspan="2">1</td><td colspan="2">2-3</tr>
<tr><td>7</td><td>8</td><td> </td><td> </td><td
class="x">11</td></tr>
</table>

</body>
</html>

　　5表格重复的边框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	table {
border-collapse:collapse;
}
td,th {
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;
}
</style>
</head>

<body>
<h2>封装的表格</h2>
<table class="boxed-table" cellspacing="0">
<tr><td rowspan="2">1</td><td colspan="2">2-3</tr>
<tr><td>7</td><td>8</td><td> </td><td> </td><td
class="x">11</td></tr>
</table>
<h2>封装的单元格</h2>
<table class="boxed-cells" cellspacing="0">
<tr><td rowspan="2">1</td><td colspan="2">2-3</tr>
<tr><td>7</td><td>8</td><td> </td><td> </td><td
class="x">11</td></tr>
</table>
<h2>封装的单元格和表格</h2>
<table class="boxed-table boxed-cells" cellspacing="0">
<tr><td rowspan="2">1</td><td colspan="2">2-3</tr>
<tr><td>7</td><td>8</td><td> </td><td> </td><td
class="x">11</td></tr>
</table>

</body>
</html>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	table {
border-collapse:separate;
}
td,th {
50px;
padding:5px;
text-align:center;
vertical-align:middle;
background:gold;
text-indent:5px;
border:1px solid black;
}
.hidden {
visibility:hidden;
}
.delete {
display:none;
}
</style>
</head>

<body>
<table>
<colgroup>
<col class="hidden delete" />
</colgroup>
<tr><td class="delete">1</td><td>2</td><td>3</td><td>4</td></tr>
<tr>
<td class="hidden">5</td>
<td class="hidden">6</td>
<td>7</td>
<td>8</td>
</tr>
</table>

</body>
</html>

　　7表格 垂直对齐数据

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	.x {
vertical-align:middle;
}
</style>
</head>

<body>
<table>
<colgroup>
<col id="x" />
</colgroup>
<tr><td class="delete">1</td><td>2</td><td>3</td><td>4</td></tr>
<tr>
<td class="hidden">5</td>
<td class="hidden">6</td>
<td>7</td>
<td>8</td>
</tr>
</table>

</body>
</html>