对于很多初学HTML的人来说，表格<table>是最常用的标签了，但对于表格边框的控制，很多初学者却不甚其解。

一般我们用表格的时候总会给它个border属性，比如：<table border="1">，其效果如下：

可以发现表格的边框好像很宽，当然这里的“很宽”绝对不是表格border的宽，大家看到的宽应该是<td>之间有间隙所致。因此只需要修改表格的cellspacing属性即可，即：<table border="1px" cellspacing="0px">，效果如下：


但是，好像宽度还是没有我们想象的那样：只有一个像素的宽，其实，上图大家看到的其实是两个像素的宽，为什么呢，这是因为<td>之间的边框没有重合所致。修改表格的border-collapse属性即可，

即<table border="1px" cellspacing="0px" style="border-collapse:collapse">


再给表格加个颜色，<table border="1px" bordercolor="#000000" cellspacing="0px" style="border-collapse:collapse">

这个是搜到的最有用的资料，转自：http://www.alixixi.com/web/a/2009082657736.shtml

html表格table设置边框的更多相关文章

  1. table 设置边框

    本文引自:https://www.cnblogs.com/leona-d/p/6125896.html 示例代码: <!DOCTYPE html> <html lang=" ...

  2. css如何让表格table的边框为1像素呢

    在Html中使用table是网页制作中必不可缺的一部分,如果直接给css设置table里面的td边框为1像素的话,那么实际我们从网页上看到的效果却不是1像素. 那么我们怎么用css让table的边框为 ...

  3. 关于表格table嵌套,边框合并问题的解决方法，table嵌套（转）

    原文地址:http://www.cnblogs.com/zhangym118/archive/2016/05/16/5496931.html [问题] 外层table与内层table嵌套,内外表格都需 ...

  4. 让表格table呈现边框，不用给tr、td加边框的写法

    <table width="100%" cellspacing="1" cellpadding="1" bgcolor="# ...

  5. 关于element-ui表格table设置header-cell-class-name样式不起作用的原因分析

    在编写表格的时候想给表头添加样式,使用 header-cell-class-name怎么都添加不上样式,检查元素发现连class都没添加上,查了很多资料有人说element之前版本不支持这属性,但我使 ...

  6. 解决百度Ueditor编辑器表格不显示边框问题

    一.主要内容 CMS使用百度Ueditor编辑器中的表格功能,在编辑模式下可以正常显示边框,而文章发布之后表格不能显示边框.本博文经过查阅相关资料,最终解决了该问题. 二.使用平台 1. dedecm ...

  7. css列表list、表格table

    列表list,无序列表ul,有序列表ol 1.列表项样式list-style-type 无列表默认为dist实心圆,有序列表默认为decimal阿拉伯数字(前面不带0) 其他无序列表常用none无样式 ...

  8. 表格table嵌套，边框合并问题

    [问题] 外层table与内层table嵌套,内外表格都需边框时,设置“border=1”,但边框会重复,造成某些地方边框粗,有些地方边框细的问题.   [解决办法]: 外表格样式: <tabl ...

  9. 表格table样式布局设置

    <style> table{ border-collapse:collapse; margin:0 auto;} table tr td{ border:1px solid #000; l ...

随机推荐

  1. SCALA中类的继承

    慢慢的,回想起以前学习JAVA和C#当中的的类的特性了. 感觉大同小异吧... package com.hengheng.scala class OOPInScala { } class Studen ...

  2. j2ee爬坑行之二 servlet

    servlet生命周期 web容器加载servlet 类 web容器调用servlet的构造函数,初始化servlet. web容器调用servlet的init()方法.注意该方法在servlet的一 ...

  3. First ASP.NET Core Application on a Mac Using Visual Studio Code

    一直希望可以在mac上直接编写webapp (用C#)现在终于伴随着 core 世界美好了,不需要用pd windows了 nice. Visual studio code 更新1.1版本了 怀着激动 ...

  4. -_-#【Canvas】导出在<canvas>元素上绘制的图像

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. Hadoop InputFormat

    Hadoop可以处理不同数据格式(数据源)的数据,从文本文件到(非)关系型数据库,这很大程度上得益于Hadoop InputFormat的可扩展性设计,InputFormat层次结构图如下:  

  6. Matlab绘制三维图形以及提示框

    1.首先,在编辑区输入如下代码 >> [x,y] = meshgrid([-100,0.1,100]); >> z = sqrt(x.^2 + y.^2); >> ...

  7. Spring 3.2 ClassMetadataReadingVisitor 错误

    nested exception is java.lang.IncompatibleClassChangeError: class org.springframework.core.type.clas ...

  8. AngularJS - 基本功能介绍

    转载自:http://www.cnblogs.com/powertoolsteam/p/angularjs-introdection.html (写得很好的Angular入门,可以试试) Angula ...

  9. Bootstrap图片旋转轮播的实现

    bootstrap初级知识旋转轮播 源文件:carousel.js.carousel.less CSS文件:bootstrap.css 这些源文件可以从bootstrap中下载,关于轮播,有很多译法, ...

  10. Object -C 数组 -- 笔记

    // //  main.m //  Array // //  Created by facial on 23/8/15. //  Copyright (c) 2015 facial_huo. All ...