Css基本样式————表格

标签：css基本样式————表格

a.Css表格属性可以帮助我们极大地改善表格的外观

b.表格边框

<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>小王</td>
        <td>20</td>
        <td>男</td>
    </tr>
    <tr>
        <td>小王</td>
        <td>20</td>
        <td>男</td>
    </tr>
    <tr>
        <td>小王</td>
        <td>20</td>
        <td>男</td>
    </tr>
</table>

这样可以生成一个没有边框效果的表格

此时可以给表格添加一个边框

<table border = "1">

但是这种写法并不能应用于所有的table当中

因此可以选择使用Css样式作为一种更好的方式

<table id="tb">
#tb{
    border: 1px solid blue;
}

这时可以看到表格最外层的蓝色的外边框

可以设置表格内部：

#tb,tr,th,td{
    border: 1px solid blue;
}

这里用到了分组选择器。即一个id选择器和3个元素选择器组合在一起，之间用逗号隔开

c.折叠边框

在上面的表格中显示的是双边框

这样显然是不合理的

可以把双边框合成一条线

#tb,tr,th,td{
    border: 1px solid blue;
    border-collapse: collapse;
}

d.表格宽高

#tb{
    width: 400px;
    height: 400px;
    border-collapse: collapse;
}
#tb,tr,th,td{
    border: 1px solid blue;
}

e.表格文本对齐

#tb{
    width: 400px;
    height: 400px;
    border-collapse: collapse;
}
#tb,tr,th,td{
    border: 1px solid blue;
    text-align:center;
}

f.表格内边距

g.表格颜色

#tb{
    width: 400px;
    height: 400px;
    border-collapse: collapse;
}
#tb,tr,th,td{
    border: 1px solid blue;
    text-align:center;
    background-color: aqua;
}

Css基本样式————表格

标签：css基本样式————表格

原文地址：http://11317783.blog.51cto.com/11307783/1771981