为了账号安全,请及时绑定邮箱和手机立即绑定

使用span标签来增加表格线条,错在了哪里?

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>为表格添加边框</title>

<style type="text/css">

span{border:1px solid #000;}

</style>

</head>

<body>

<span>

<table summary="">

  <tr>

    <th>班级</th>

    <th>学生数</th>

    <th>平均成绩</th>

  </tr>

  <tr>

    <td>一班</td>

    <td>30</td>

    <td>89</td>

  </tr>

  <tr>

    <td>二班</td>

    <td>35</td>

    <td>85</td>

  </tr>

  <tr>

    <td>三班</td>

    <td>32</td>

    <td>80</td>

  </tr>

</table>

</span>

</body>

</html>

https://img1.sycdn.imooc.com//5b6c43490001a86604070439.jpg

正在回答

4 回答

去掉所有的span标签,并且span{border:1px solid #000;}改成:table{border:1px solid #000;}

这样整个表格就有一个边框

0 回复 有任何疑惑可以回复我~
#1

宝慕林842399 提问者

因为我记得之前将讲过span标签是设置单独样式的,所以我想用span标签来增加边框,实现和课程所讲的样式添加的效果一样,但是错误在哪呢?你把span标签去掉不就是和课程讲的加样式的一个意思了吗?
2018-08-10 回复 有任何疑惑可以回复我~
#2

969999666696 回复 宝慕林842399 提问者

我也不太懂,不过你在你的<span>后面打几个汉字试一下效果
2018-08-10 回复 有任何疑惑可以回复我~
#3

969999666696 回复 969999666696

发现这个span不会包含着table里的东西
2018-08-10 回复 有任何疑惑可以回复我~
#4

969999666696 回复 969999666696

table是块状元素,一个块级元素独占一行 span是内联元素,其高度、宽度及顶部和底部边距不可设置
2018-08-10 回复 有任何疑惑可以回复我~
#5

969999666696 回复 宝慕林842399 提问者

在span{border:1px solid #000;}添加display:inline-block;即可出现边框
2018-08-10 回复 有任何疑惑可以回复我~
#6

宝慕林842399 提问者 回复 969999666696

真的来,谢谢你。虽然还是对块状元素,内联元素有些搞不清,但是现在了解些了。
2018-08-12 回复 有任何疑惑可以回复我~
#7

969999666696 回复 宝慕林842399 提问者

不客气啦,我也是新手O(∩_∩)O也在学习中
2018-08-12 回复 有任何疑惑可以回复我~
查看4条回复

如果你非要用<span>包含表格,display手动将<span>变成块级元素即可

https://img1.sycdn.imooc.com//5b9a570f000105af03400106.jpg

0 回复 有任何疑惑可以回复我~

<span>是一个行内标签,也就是说你要设置行内的单独样式才可以使用它。直接用Css设置<table>标签的样式就好了,不用添加新标签

https://img1.sycdn.imooc.com//5b8a14a600015d2204480508.jpg

效果如下:

https://img1.sycdn.imooc.com//5b8a14a6000169dc02390155.jpg


0 回复 有任何疑惑可以回复我~

需要调整宽度,span是行元素

0 回复 有任何疑惑可以回复我~
#1

孙某某4194315

用div或者table本身高度
2018-08-09 回复 有任何疑惑可以回复我~
#2

宝慕林842399 提问者 回复 孙某某4194315

具体点呢?什么意思,不是很明白?
2018-08-10 回复 有任何疑惑可以回复我~
#3

慕神526494 回复 宝慕林842399 提问者

他的意思是把这个表格看作一行,将<span>标签的样式高度定义为table的高度,然后你就可以通过设置<span>标签的样式来使table有你要的边框,不过其实直接定义<table>的样式就好了
2018-09-01 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

使用span标签来增加表格线条,错在了哪里?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信