<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. ltrace killed by SIGTRAP

    [Ltrace-devel] ltrace stucks with pthreads Heiko Carstens heiko.carstens at de.ibm.comFri Apr 14 11: ...

  2. 标准I/O库之标准输入、标准输出和标准出错

    对一个进程预定义了三个流,并且这三个流可以自动地被进程使用,它们是:标准输入.标准输出和标注出错.这些流引用的文件与文件描述符STDIN_FILENO.STDOUT_FILENO和STDERR_FIL ...

  3. iOS开发简单高效的数据存储

    在iOS开发过程中,不管是做什么应用,都会碰到数据保存的问题,你是用什么方法来持久保存数据的?这是在几乎每一次关于iOS技术的交流或讨论都会被提到的问题,而且大家对这个问题的热情持续高涨.本文主要从概 ...

  4. android开发之ExpandableListView的使用，实现类似QQ好友列表

    由于工作需要,今天简单研究了一下ExpandableListView,做了一个类似QQ列表的Demo,和大家分享一下. 效果图如下: 先来看看主布局文件: <RelativeLayout xml ...

  5. angularjs填写表单

    https://scotch.io/tutorials/handling-checkboxes-and-radio-buttons-in-angular-forms <!DOCTYPE html ...

  6. 使用Keytool工具生成证书Keystore和证书签名请求文件

    内容概览: keytool的几个常用的命令. 1.创建证书 2.查看证书库 3.导出证书文件 4.导入证书的信息 5.查看证书信息 6.删除密钥库中的条目 7.修改证书条目的口令 ---------- ...

  7. [Form Builder]内置函数execute_trigger、do_key详解

    转:http://yedward.net/?id=82 1.execute_trigger:用来运行一个指定的触发器,常用来运行用户自定义的触发器. 语法:procedure execute_trig ...

  8. Linux 普通用户su命令切换控制

    1.编辑配置文件/etc/pam.d/su .将下面配置文件"#“去掉: # auth           required        pam_wheel.so use_uid 改成 a ...

  9. TCL 双引号和花括号的区别

    用了很一段时间的Modelsim,用TCL脚本仿真,开始注意起来它,看了些资料,有一个问题始终让我很困惑,那就是花括号 的用法,今天Google了一下,觉得有一点豁然了,记录一下.为了不让自己的翻译影 ...

  10. 一个java文件编译之后会产生多个class文件

    如图所示:如果编译后一个java文件中类有内部类的话,就会编译产生多个类