您的位置:首页> 前端教程> CSS教程
文章导航

CSS 设置table表格样式

2018-10-8 14:09| 作者: admin| 查看: 4314| 评论: 0|来自: 蚂蚁部落

随着时间的前进,人可能会意识到自己在何种位置上更加恰当。

技术上也是如此,最初,table用来进行页面布局,并且应用十分普遍。

但是用table布局的劣势很大,灵活度很差,不容易改版等。

现在table已经从“神坛”,逐渐做一些平凡且自己擅长的事情。

那就是绘制表格,真正做到名副其实,下面介绍一下利用CSS设置table表格的样式。

一.设置table表格的边框:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css"> 
table{ 
  border:1px solid #ccc; 
} 
</style> 
</head> 
<body> 
<table> 
  <tr> 
    <td>蚂蚁部落一</td> 
    <td>蚂蚁部落一</td>
  </tr>
  <tr> 
    <td>蚂蚁部落二</td> 
    <td>蚂蚁部落二</td>
  </tr>  
</table> 
</body> 
</html>


代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/08/141018niiw19i81i9w7717.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

如果没有给table元素内部设置border属性值,那么表格默认无边框。

给整个表格外围添加一个边框,使用CSS的border属性。

二.设置td单元格边框:

前面代码仅设置table边框,感觉还是赤裸裸,结构不够明晰。

所以还需要给td单元格设置边框。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css"> 
table, td{ 
  border:1px solid #ccc; 
} 
</style> 
</head> 
<body> 
<table> 
  <tr> 
    <td>蚂蚁部落一</td> 
    <td>蚂蚁部落一</td>
  </tr>
  <tr> 
    <td>蚂蚁部落二</td> 
    <td>蚂蚁部落二</td>
  </tr>  
</table> 
</body> 
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/08/141048pljtuqwq89mkqnsz.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面代码给table和td都设置了边框。

但是在视觉上感觉很奇怪,边框貌似重复了,下面介绍如何解决此问题。

三.边框合并:

上面代码设置了table和td的边框,但是并不美观。

因为相邻的边框有一种重复的感觉,其实只需要一条即可,那么我们可以将相邻的边框合并。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css"> 
table, td{ 
  border:1px solid #ccc; 
  border-collapse:collapse; 
} 
</style> 
</head> 
<body> 
<table> 
  <tr> 
    <td>蚂蚁部落一</td> 
    <td>蚂蚁部落一</td>
  </tr>
  <tr> 
    <td>蚂蚁部落二</td> 
    <td>蚂蚁部落二</td>
  </tr>  
</table> 
</body> 
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/08/141117vfepifer3ea93vk3.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到相邻的边框已经被合并,是不是更加美观清晰了一点。

设置border-collapse属性值为collapse即可实现边框合并。

四.表格的宽度和高度:

这是最为简单的操作,使用width和height属性即可。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css"> 
table, td{ 
  border:1px solid #ccc; 
  border-collapse:collapse; 
} 
td{
  width:80px;
  height:30px;
}
</style> 
</head> 
<body> 
<table> 
  <tr> 
    <td>蚂蚁部落一</td> 
    <td>蚂蚁部落一</td>
  </tr>
  <tr> 
    <td>蚂蚁部落二</td> 
    <td>蚂蚁部落二</td>
  </tr>  
</table> 
</body> 
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/08/141147ubk16q6b8bqstml6.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

最新评论

返回顶部