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

最新推荐文章于 2025-07-12 10:58:27 发布

原创最新推荐文章于 2025-07-12 10:58:27 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#table #网页 #css

【B/S学习】同时被 2 个专栏收录

53 篇文章

订阅专栏

ASP.NET

15 篇文章

订阅专栏

本文介绍如何使用HTML的table标签创建表格，并通过CSS进行样式设置，包括居中显示、边框模型、表头背景色等，同时讲解了如何外部链接CSS文件以提高样式复用性和代码整洁度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

总结

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