您的位置：首页 > Web前端 > CSS

CSS学习<6>

2015-11-26 18:05 531 查看
一、CSS表格

CSS表格属性可以极大的改变表格外观。

1.1、表格边框

表格边框border属性可以设置边框距离和边框颜色。

border:1px solid red;

如下代码：

<!DOCTYPE html>

<html>

<head>

<style type = "text/css">

table,th,td{

border : 1px solid red;

}

</style>

</head>

<body>

<table>

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Bill</td>

<td>Gates</td>

</tr>

<tr>

<td>Steven</td>

<td>Jobs</td>

</tr>

</table>

</body>

</html>

结果如图：



上例中的表格显示双条边框，这是由table、th、td都具有独立的边框所至。

如果要显示单线条边框，这可以使用border-collapse属性。其实就是border-collapse的值为collapse（合并）则变为单条边框。

1.2、合并边框

合并边框属性border-collapse对应的属性值为collapse、separate。此属性只用于table标签,使用后整个table表格都响应改变。

如部分代码：

<style type = "text/css">

table {

border-collapse : collapse;

}

table,th,td {

border : 1px solid red;

}

</style>

结果如下图：



1.3、表格宽度和高度

表格宽度width和高度height适合所有表格标签。注意是针对的表格而非边框。

1.4、表格文本对齐

text-align属性设置文本水平对齐方式：左对齐、右对齐、居中。

vertical-align属性设置垂直对齐方式：顶部对齐、底部对齐、居中。

1.5、更多table属性

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航