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;

   }

    

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

    

5. 行组和列组
   

   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>

    

6. 表格选择符
   

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

    

7. 分隔的边框
   

   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>&nbsp;</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>&nbsp;</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>&nbsp;</td><td class="x">11</td></tr>

   </table>

    

    

8. 重复的边框
   

   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>&nbsp;</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>&nbsp;</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>&nbsp;</td><td class="x">11</td></tr>

   </table>

    

    

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

   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>
   

    

10. 垂直对齐数据
    

    .x {

        vertical-align:middle;

    }

     

    8.鼠标悬浮时表格颜色替换
    

    table th:hover{

        background:green;

    }

     

    table td:hover{

        background:blue;

    }