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. DB2 SQL RR/RS/CS/UR四个级别《转载》

    1.RR隔离级别:在此隔离级别下, DB2会锁住所有相关的纪录.在一个SQL语句执行期间,所有执行此语句扫描过的纪录都会被加上相应的锁.具体的锁的类型还是由操作的类型来决定,如果是读取,则加共享锁:如 ...

  2. 几个Uboot命令

    1 nand scrub 这个命令会擦除坏块信息,将坏块标识成好的,但此时这个坏块有潜在有危险,在特定条件下仍会造成数据的丢失,所以应该谨慎使用． Run U-boot and then use th ...

  3. 【POJ】2418 Hardwood Species

    简单字典树. #include <cstdio> #include <cstring> #include <cstdlib> #define MAXN 128 ty ...

  4. 【转】深入了解android平台的jni---注册native函数

    原文网址:http://my.oschina.net/u/157503/blog/169041 注册native函数有两种方法:静态注册和动态注册. 1.静态注册方法 根据函数名找到对应的JNI函数: ...

  5. HDOJ 2052 Picture

    Problem Description Give you the width and height of the rectangle,darw it. Input Input contains a n ...

  6. 暴力求解——Equivalent Strings

    Submit Status Description Today on a lecture about strings Gerald learned a new definition of string ...

  7. 数据结构——foodfill 八连块问题

    Description Due to recent rains, water has pooled in various places in Farmer John's field, which is ...

  8. Period - HDU 1358（next求循环节）

    题目大意:有一个长N的字符串,如果前缀Ni是一个完全循环的串(循环次数大于1),输出Ni和它循环了多少次.   分析:输入next的应用,求出来next数组直接判断Ni是否是完全的循环就行了,也就是N ...

  9. 低版本Xcode 出现could not find developer disk image问题

    解决Xcode在ipad/iphone9.2系统真机测试时出现could not find developer disk image问题,只要拷贝这个文件(链接: http://pan.baidu.c ...

  10. Android中 判断是平板还是手机

    //是平板返回true 不是平板返回false public  boolean isTablet(Context context) { return (context.getResources().g ...