<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. 知道Form.Show()和Form.ShowDialog()的区别吗

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:知道Form.Show()和Form.ShowDialog()的区别吗.

  2. SAP生产订单状态

    SAP系统的常见订单状态如下: ·        CRTD (创建):标识生产订单刚刚创建,此时禁止做后续发料和报工确认等操作: ·        PREL (部分下达):当生产订单部分下达时,如仅下 ...

  3. index of rmvb mp3 rm突破站点入口下载

    首先打开Google,在关键词输入框中输入"index of/"inurl:lib(双引號为英文状态下) ,选择“搜索中文简体网页”选项,回车搜索,得到了一些网页,不要以为这是一些 ...

  4. jQuery源代码学习笔记：构造jQuery对象

    2.1源代码结构: (function( window, undefined ) { var jQuery = (function() { // 构建jQuery对象 var jQuery = fun ...

  5. MySQL【第二篇】基本命令

    一.连接MySQL 登录 mysql 有两种方式: 远程主机:mysql -h主机地址 -u用户名 -p密码 -P端口号 本机:mysql -h主机地址 -u用户名 -p密码 -P端口号 如果端口号是 ...

  6. ASP.NET 开发人员应该知道的8个网站

    1.CodeProject http://www.codeproject.com/ 2.DotNetNuke 3.4GuysFromRolla 4.DevSource 5.DevX http://ww ...

  7. 迭代器模式(Iterator Pattern)

    迭代器模式定义:Iterator Pattern提供一种方法顺序访问一个聚合元素中的各个元素,而又不暴漏内部方法 酒吧提供beer和wine: public class Bar { private L ...

  8. 解决PL/SQL Developer中文乱码的问题

    set nls_lang=SIMPLIFIED CHINESE_CHINA.ZHS16GBK cd "c:\Program Files\PLSQL Developer" PLSQL ...

  9. 3dmax使用K帧工具创建一个行走动作

    第一步,创建一个biped骨骼. 这个就不截图了,因为基本都会. 记住一点,先改变了关键点再去修改,不然修改的是前一个关键帧的动作. 第二步,开启自动关键帧,然后给初始位置双脚添加踩踏关键点.设置关键 ...

  10. 面试相关的技术问题---java基础

    最近在准备秋季校招,将一些常见的技术问题做一个总结!希望对大家有所帮助! 1.面向对象和面向过程的区别是什么? 面向对象是把构成问题的事务分解成各个对象,建立对象的目的不是为了完成一个步骤,而是为了描 ...