CSS构造表格

时间：2016-08-02 13:16:17 阅读：254 评论：0 收藏：0 [点我收藏+]

标签：

表格的基础构造
边距和边线应用
隐藏和删除应用
简单表格
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;
}
?
<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>
?
行组和列组
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>
?
表格选择符
<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>
?
分隔的边框
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;
}
?
<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>
?
?
重复的边框
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;
}
?
<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>
?
?
隐藏和删除单元格、行、列
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;
}
?
<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>
?
垂直对齐数据
.x {
????vertical-align:middle;
}
?
8.鼠标悬浮时表格颜色替换
table th:hover{
????background:green;
}
?
table td:hover{
????background:blue;
}

CSS构造表格

标签：

原文地址：http://www.cnblogs.com/lifi/p/5728709.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行