SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
console

            
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>学习表格标签</title>
    <style type="text/css">

    /* 给表格加上外边框 */
    .table{
         
        border-collapse:collapse;
        width:400px;
        height:200px;
        /* 让两个表格重合的地方第二个表格的bordertop框线隐藏，
        从而不会加粗显示 */
        border-top:hidden;

    }

    /* 给表格加上内边框， 且将文字剧中排列 */
    .table td,th,caption{        
        border: 1px solid #00f;
        color:#00f;
        text-align: center;
        
        ;
        }
    </style>
</head>

<body>

<!-- 让表格单元格边框之间没有空袭 -->
<table cellspacing="0" class="table">
   <!-- <caption>前端三剑客</caption> -->
   <tr>
       <th>知识点</th>
        <th>重要程度</th>
        <th>难度</th>
        <!-- 让学习周期拥有2个单元格的高度和2个单元格的宽度 -->
        <th colspan="2" rowspan="2">学习周期</th>
   </tr>
   <tr>
       <td>html</td>
        <td>5</td>
        <td>3</td>
        
   </tr>
   <tr>
       <td>css</td>
        <td>5</td>
        <td>4</td>
        <td>10</td>
   </tr>
    <tr>
       <td>js</td>
        <td>5</td>
        <td>5</td>
        <td>20</td>
   </tr>
  
</table>
<!-- 减掉cell边框的spacing,不能写在style 里面--!>
<table cellspacing="0" class="table">
   <!-- <caption>前端三剑客</caption> -->
   <tr>
       <th>知识点</th>
        <th>重要程度</th>
        <th>难度</th>
        <!-- 让学习周期拥有2个单元格的高度和2个单元格的宽度 -->
        <th colspan="2" rowspan="2">学习周期</th>
   </tr>
   <tr>
       <td>html</td>
        <td>5</td>
        <td>3</td>
        
   </tr>
   <tr>
       <td>css</td>
        <td>5</td>
        <td>4</td>
        <td>10</td>
   </tr>
    <tr>
       <td>js</td>
        <td>5</td>
        <td>5</td>
        <td>20</td>
   </tr>
  
</table>
</body>

</html>