Table

table標籤就是建立一個表格，tr代表行，th代表列的表頭，td代表列

<table class="m_table">
         <tr>
              <th class="xuhao">表頭，第一列</th>
              <th>表頭，第二列</th>
              <th class="del">表頭，第三列</th>
              <th class="del">表頭，第四列</th>
         </tr
 
>
         <tr>
             <td>第一行，第一列</td>
             <td>第一行，第二列</td>
             <td>第一行，第三列</td>
             <td>第一行，第四列</td>
         </tr>
         <tr>
             <td>第二行，第一列</td>
             <td>第二行，第二列</td
 
>
             <td>第二行，第三列</td>
             <td>第二行，第四列</td>
         </tr>
</table>

在表格的設定中添加了class，這是為了在css樣式中對table進行佈局
設定表格居中顯示，並且設定邊框模型，居中顯示

.m_table {
    border-collapse:collapse;
    margin:0 auto;
    width:450px;
    text-align:center;
}

設定表頭背景色

 .m_table
 
 th {
        background-color:#F7F3F7;
 }

設定每行每列的距離以及邊框線

.m_table th,.m_table td {
        border:1px solid #CECFCE;
        padding:5px;
        height:25px;
}

設定class為xuhao的列的寬度為60px
設定class為del的列的寬度為50px
這是結合實際，為他們分配合適的寬度

 .m_table .xuhao {
        width:60px;
  }
 .m_table .del {
        width:50px;
 }

網頁與css樣式的結合使用

其實在一個網頁中也是可以直接在title標籤後邊寫css樣式，但是為了更好的複用，以及是程式更加清晰，所以可以單獨建立css樣式
1、在專案先右擊新增新項，選擇樣式表即可

2、接著在相應的網頁中，將樣式表拖過來即可

3、這樣在css中寫的樣式，就可適應到網頁中了

總結

關於前端，做得美觀真是需要很多很多的知識與技巧，不是一蹴而就的，需要我們在實踐中逐漸掌握。