【.NET】table标签+网页与css样式的结合使用

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中写的样式，就可适应到网页中了

总结

关于前端，做得美观真是需要很多很多的知识与技巧，不是一蹴而就的，需要我们在实践中逐渐掌握。