Table 表格在没有添加 css 样式之前，是没有边框的。这样不便于我们后期合并单元格知识点的讲解，所以在这一节中我们为表格添加一些样式，为它添加边框。

在右侧代码编辑器中添加如下代码：

<style type="text/css">

table tr td,th{border:1px solid #000;}

</style>

上述代码是用 css 样式代码（后面章节会详细讲解），为th，td单元格添加粗细为一个像素的黑色边框。

结果窗口显示出结果样式：

示例:

<!DOCTYPE HTML>

<html>

<head>

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

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

<style type="text/css">

table tr td,th{border:1px solid #000;}

</style>

</head>

<body>

<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>

</body>

</html>

用css样式，为表格加入边框的更多相关文章

  1. 11种常用css样式之表格和定位样式学习

    table表格中border-collapse: collapse;/*表格边框是否合并*/border-spacing: 10px;/*表格边框之间的距离*/定位详情可以阅读position属性值4 ...

  2. Bootstrap全局CSS样式之表格

    .table--基础表格样式. .table-striped--给<tbody>之内的每一行添加斑马条纹样式: .table-bordered--为表格添加边框: .table-hover ...

  3. css样式，边界和边框，格式和布局

    1.大小:width:宽:heigh:高 2.背景:1)background-color:背景颜色 2)background-image:背景图片url路径 3)background-repeat:图 ...

  4. Bootstarp--全局CSS样式之表格

    表格在实际开发中可以说是非常常见的,但是有很多人不喜欢使用表格,但个人觉得在简单的界面布局中使用表格还是很简单的.毕竟人家给了表格这元素,而你却不去使用,貌似有点不解风情. 下面简单介绍Bootstr ...

  5. CSS样式之表格，表单

    布局样式 .container:固定宽度并具响应式 .container-fluid自由宽度(100%宽度) 标题样式 <h1>到<h6> 样式已经写好了,可以直接用,兼容性也 ...

  6. Css样式表【边界边框】【列表方块】

    一.如何给div加边框?[边界边框] 我们先做一个整个边框,并附加成绿色的边框. ①使用属性border进行设置. →→ ②也可以单独更改某个边的边框线的颜色,利用border属性更改. 如果将div ...

  7. 怎么给tbody加滚动条？通过css样式给表格tbody加垂直滚动条

    tbody加滚动条实现思路: 1,把tbody设置成display:block,然后就对其高度设置一个固定值,overflow设置成auto. 2,把thead的tr设置成display:block. ...

  8. 通过css样式给表格tbody加垂直滚动条

    tbody加滚动条实现思路: 1,把tbody设置成display:block,然后就对其高度设置一个固定值,overflow设置成auto. 2,把thead的tr设置成display:block. ...

  9. HTML 学习笔记 CSS样式（边框）

    元素的边框(border)是围绕元素内容和内边距的一条或多条线 CSS border 属性允许你规定边框的样式 宽度和颜色 CSS 边框 在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使 ...

随机推荐

  1. bit、sbin、sfr、sfr16 区别分析

    1.bit 和 sbit 都是 C51 扩展的变量类型. bit 和 int char 之类的差不多,只不过 char=8 位, bit=1 位而已.都是变量,编译器在编译过程中分配地址.除非你指定, ...

  2. 【转】Android Recovery模式

    原文网址:http://leox.iteye.com/blog/975303 (muddogxp 原创,转载请注明) Recovery简介 Android利用Recovery模式,进行恢复出厂设置,O ...

  3. HDOJ(HDU) 2137 circumgyrate the string(此题用Java-AC不过！坑)

    此题如果有用JavaACDSee,请评论,谢谢了. Problem Description Give you a string, just circumgyrate. The number N mea ...

  4. JavaScript中的声明提升

    JavaScript中变量或者函数的声明会被提升(赋值语句不会被提升)到当前函数主体的顶部,不管这个声明是否出现在不可到达的地方. var test = 1; function f() { if(!t ...

  5. enigma机的原理

    注:本文修改自三思科学<ENIGMA的兴亡>            ENIGMA ENIGMA看起来是一个装满了复杂而精致的元件的盒子.不过要是我们把它打开来,就可以看到它可以被分解成相当 ...

  6. @synthesize和@dynamic分别有什么作用？

    @property有两个对应的词,一个是 @synthesize,一个是 @dynamic.如果 @synthesize和 @dynamic都没写,那么默认的就是@syntheszie var = _ ...

  7. 使用Multipath进行多链路聚合并对聚合后的设备固定命名

    使用Multipath进行多链路聚合并对聚合后的设备固定命名 1.启用Multipath: (1)启动multipathd服务 #service multipathd start 或者 #/etc/i ...

  8. HTTP协议之状态码详解

    转自:http://www.cnblogs.com/TankXiao/ 什么是HTTP状态码 HTTP状态码的作用是:Web服务器用来告诉客户端,发生了什么事. 状态码位于HTTP Response ...

  9. python推荐淘宝物美价廉商品 2.0

    改动: 新增功能 :可选择只看天猫或淘宝 代码模块化封装,参数配置或输入单独在一个py文件管理,主函数功能只留出参数传入在setting配置的py文件里. main.py代码: # -*- codin ...

  10. 移动端解决fixed和input获取焦点软键盘弹出影响定位的问题

    场景描述, 当document的高度不够window的高度时候,如在ip6中文档的高度比窗体的高度小,到底设计在最下方的区域没有在窗体最下方,就留有空白地方如下图的灰色部分 1. 解决初始化文档高度, ...