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. Lua I/0输入输出

    I/O库为文件操作提供了两种不同的模型,简单模型和完整模型.简单模型假设一个当前输入文件和一个当前输出文件,他的I/O操作均作用于这些文件.完整模型则使用显式的文件句柄,并将所有的操作定义为文件句柄上 ...

  2. Linux Kernel ‘test_root()’函数本地拒绝服务漏洞

    漏洞名称: Linux Kernel ‘test_root()’函数本地拒绝服务漏洞 CNNVD编号: CNNVD-201306-432 发布时间: 2013-06-25 更新时间: 2013-06- ...

  3. -_-#【CSS】注释

  4. 字符串（后缀自动机）：USACO Dec10 恐吓信

    [题目描述] FJ刚刚和邻居发生了一场可怕的争吵,他咽不下这口气,决定佚名发给他的邻居一封脏话连篇的信.他有无限张完全相同的已经打印好的信件,都包含 N个字母(1<=N<=50,000). ...

  5. 在kafka上对topic新增partition

    对topic增加partition 参考官网site:http://kafka.apache.org/documentation.html#basic_ops_modify_topic 通过kafka ...

  6. HDOJ 2014 青年歌手大奖赛_评委会打分

    Problem Description 青年歌手大奖赛中,评委会给参赛选手打分.选手得分规则为去掉一个最高分和一个最低分,然后计算平均得分,请编程输出某选手的得分. Input 输入数据有多组,每组占 ...

  7. [Sequence Alignment Methods] Smith–Waterman algorithm

    Smith–Waterman algorithm 首先需要澄清一个事实,Smith–Waterman algorithm是求两个序列的最佳subsequence匹配,与之对应的算法但是求两个序列整体匹 ...

  8. J2EE 关于WebLogic下应用使用URL.openConnection获取连接返回 HttpsURLConnection与SOAPHttpsURLConnection的问题

    J2EE 关于WebLogic下应用使用URL.openConnection获取连接返回 HttpsURLConnection与SOAPHttpsURLConnection的问题 2012年03月09 ...

  9. 使用国人的koala来重新预编译BOOTSTRAP的LESS文件

    好玩...

  10. 利用d3.js绘制雷达图

    利用d3,js将数据可视化,能够做到数据与代码的分离.方便以后改动数据. 这次利用d3.js绘制了一个五维的雷达图.即将多个对象的五种属性在一张图上对照. 数据写入data.csv.数据类型写入typ ...