淘先锋技术网

首页 1 2 3 4 5 6 7

在CSS中,我们可以使用内部样式来设置表格的样式。


<style type="text/css">
    table {
        border-collapse: collapse;
        width: 100%;
    }
    th, td {
        text-align: left;
        padding: 8px;
        border-bottom: 1px solid #ddd;
    }
    th {
        background-color: #f2f2f2;
    }
</style>

css的内部样式设置表格样式

在上面的代码中,我们使用了table选择器来设置整个表格的样式,包括设置表格边框的合并(即border-collapse)和宽度(即width)。接下来,我们使用thtd选择器来设置表头和表格内容的样式。具体来说,我们设置了文本对齐方式(即text-align),单元格内边距(即padding),以及单元格底部的边框(即border-bottom)。在th选择器中,我们还设置了背景颜色(即background-color),以便让表头区分出来。

使用上述CSS代码,我们可以轻松地设置表格的样式,如下所示:


<table>
  <tr>
    <th>姓名</th>
    <th>性别</th> 
    <th>年龄</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>男</td> 
    <td>18</td>
  </tr>
  <tr>
    <td>小红</td>
    <td>女</td> 
    <td>20</td>
  </tr>
</table>

上述代码将产生如下表格:

姓名 性别 年龄
小明 18
小红 20