<style>

table{ border-collapse:collapse; margin:0 auto;}

table tr td{ border:1px solid #000; line-height:40px; text-align:center;color:red;}

 </style>

</head>

<body>

  <table  width="300">

    <caption>直接使用表的 "border" 属性设置边框线</caption>

      <tr>

	    <td colspan='4'>统称分类</td>

	  </tr>

	  <tr>

	     <td rowspan='2'>品质一级</td><td>谷类</td><td>蔬菜</td><td>肉类</td>

	  </tr>

	  <tr>

	     <td>小米</td><td>黄瓜</td><td>牛肉</td>

	  </tr>

	  <tr>

	     <td rowspan='2'>品质一级</td><td>大米</td><td>西红柿</td><td>鱼肉</td>

	  </tr>

	  <tr>

	     <td>绿豆</td><td>南瓜</td><td>鸡肉</td>

	  </tr>

   </table>

</body>

</html>

　　

border-collapse：separate | collapse | inherit

　　border-collapse 用于表格属性, 表示表格的两边框合并为一条

separate 默认不合并

collapse 合并为一条 如上图

rowspan 跨行

colspan 跨列

表格table样式布局设置的更多相关文章

  1. 表格-table 样式

    .table: 表格基本样式 .table-dark:表格显示为黑色 .thead-light: 表头显示颜色跟亮 .thead-dark:表头显示为黑色 .table-striped:表格以条纹形式 ...

  2. css table样式

    1.table样式首先设置表格边框,属性设置表格的边框是否被合并为一个单一的边框. table{ border-collapse: collapse; border-spacing: 0;} 2.固定 ...

  3. [转]CSS如何设置html table表格边框样式

    原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...

  4. JQuery EasyUI DataGrid根据条件设置表格行样式(背景色)

    1.javascript定义函数返回样式 <script type="text/javascript"> //根据条件设置表格行背景颜色 function setRow ...

  5. CSS：表格样式（设置表格边框/文字/背景的样式）

    使用CSS能够制作出十分精美的表格. 代码整理自w3school:http://www.w3school.com.cn 效果图: 代码: <!DOCTYPE html PUBLIC " ...

  6. CSS设置表格TD宽度布局

    使用表格布局时,对单元格的宽度控制很伤脑筋,所以查阅资料整理如下: 一.表格布局table-layout 语法: table-layout : auto | fixed 取值: auto  : 大多数 ...

  7. html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel，保留table样式

    先上代码   <script type="text/javascript" language="javascript">   var idTmr; ...

  8. Element-UI中关于table表格的样式操作

    项目中使用到element-ui组件库,经常需要操作表格,编辑样式的过程中遇到一些问题,官网针对table给出了很多的api,自己可以自定义,基本能满足产品需求,但是没有给出具体的案例,网上的资料也比 ...

  9. Table样式设置

    <table class="listTable"> <tr><th width="40px">序号</th>&l ...

随机推荐

  1. RedHat Enterprise Linux 6.4使用Centos 6 的yum源 分类： 服务器搭建 Nginx 2015-07-14 14:11 5人阅读 评论(0) 收藏

    转载自:http://blog.sina.com.cn/s/blog_50f908410101cto6.html 思路:卸载redhat自带yum,然后下载centos的yum,安装后修改配置文件 1 ...

  2. MySQL主主复制+LVS+Keepalived实现MySQL高可用性

    http://bestvivi.com/2015/09/09/MySQL%E4%B8%BB%E4%B8%BB%E5%A4%8D%E5%88%B6+LVS+Keepalived%E5%AE%9E%E7% ...

  3. linux mysql 卸载后重装

    $sudo apt-get remove mysql-common清理残留数据:$sudo dpkg -l |grep ^rc|awk '{print $2}' |sudo xargs dpkg -P ...

  4. 【转】BeagleBone Black USB一线通（3）

    接上篇  BeagleBone Black 一线通(2) 五.vnc图形终端 虽然 BB-Black带有一个Micro-HDMI接口,不过那么名片不到的一个小板,连接到一个20来寸的显示器上,还是有些 ...

  5. IBM发布AppScan Source 8.7：减少iOS企业级应用安全风险

    IBM发布AppScan Source 8.7:减少iOS企业级应用安全风险http://automationqa.com/forum.php?mod=viewthread&tid=2570& ...

  6. Mac中Eclipse配置Maven开发环境

    1.下载Maven tar.gz包 http://maven.apache.org/download.cgi 2.解压tar包 随便一个路径都行 3.配置环境变量 bash设置~/.bash_prof ...

  7. java与.net平台之间进行RSA加密验证

    RSA加密算法虽然不分平台,标准都是一样的,但是各个平台的实现方式都不尽相同,下面来我来说说java与.net平台之间该如何进行RSA加密验证,即java端加密->.net端验证和.net端加密 ...

  8. display:none和visibility:hidden的区别[]

    display:none和visibility:hidden都是把网页上某个元素隐藏起来的功能,但两者有所区别,我发现使用 visibility:hidden属性会使对象不可见,但该对象在网页所占的空 ...

  9. sql 游标循环遍历

    写存储过程的时候碰到一个需要对数据进行遍历循环操作的问题,最后通过游标解决了,感觉很适用. declare @level varchar() declare @uid varchar() declar ...

  10. android 中在CMD中查看sqlite

    今天第一次学习Sqlite,在代码中执行了sql,但是不知道在上面地方才能直观的查看sqlite中的数据,下面是查看资料后的找到的查看方法: 通过上述可以从cmd进入数据库查看原文地址:http:// ...