CSS 表格属性可以帮助您极大的改善表格的外观

表格边框

如需在CSS中设置表格的边框 请使用border属性。

在下面的例子中table th 以及td设置了蓝色边框。

  1. table, th, td
  2.   {
  3.   border: 1px solid blue;
  4.   }

⚠️上例中的表格具有双线条边框 这是由于table th td元素都具有独立的边框

如果 你想要把表格显示为单线条框 请使用border-collapse属性

折叠边框

border-collapse属性设置是否将表格的边框折叠为单一边框

  1. table
  2.   {
  3.   border-collapse:collapse;
  4.   }
  5.  
  6. table,th, td
  7.   {
  8.   border: 1px solid black;
  9.   }

表格的宽度和高度

通过width和height属性定义表格的宽度和高度

下面的例子将表格的宽度设置为100% 同时将th元素的高度设置为50px

  1. table
  2.   {
  3.   width:100%;
  4.   }
  5.  
  6. th
  7.   {
  8.   height:50px;
  9.   }

表格文本对齐

text-align和vertical-align属性设置表格中文本的对齐方式

text-align属性设置水平的对齐方式 比如左对齐 右对齐 或者居中

  1. td
  2.   {
  3.   text-align:right;
  4.   }

vertical-align设置垂直对齐方式 比如顶部对齐 底部对齐 或 居中对齐

  1. td{
  2.     height:50px
  3.      vertical-align:bottom
  4. }

表格的内边距

如需控制表格中内容与边框的距离 请为td设置padding属性

  1. td
  2.   {
  3.   padding:15px;
  4.   }

也可以使用background-color为表格设置背景颜色

CSS Table 属性

实例:

1:制作一个漂亮的表格

  1. <html>
  2.     <head>
  3.         <meta charset="UTF-8">
  4.         <title></title>
  5.         <style type="text/css">
  6.             #customers {
  7.                 font-family: arial;
  8.                 width: 100%;
  9.                 border-collapse: collapse;
  10.             }
  11.             #customers td {
  12.                 font-size: 1em;
  13.                 border: 1px solid #98bf21;
  14.                 padding: 3px 7px 2px 7px;
  15.             }
  16.             #customers th {
  17.                 border: 1px solid #98bf21;
  18.                 font-size:1.1em;
  19.                   text-align:left;
  20.                  padding-top:5px;
  21.                   padding-bottom:4px;
  22.                   background-color:#A7C942;
  23.                   color:#ffffff;
  24.             }
  25.             #customers tr.alt td  {
  26.                   color:#000000;
  27.                   background-color:#EAF2D3;
  28.               }
  29.         </style>
  30.     </head>
  31.     <body>
  32.         <table id="customers">
  33.             <tr>
  34.                 <th>Company</th>
  35.                 <th>Contact</th>
  36.                 <th>Country</th>
  37.             </tr>
  38.             <tr>
  39.                 <td>Apple</td>
  40.                 <td>Steven Jobs</td>
  41.                 <td>USA</td>
  42.             </tr>
  43.             <tr class="alt">
  44.                 <td>BaiDu</td>
  45.                 <td>Li yanhong</td>
  46.                 <td>China</td>
  47.             </tr>
  48.             <tr>
  49.                 <td>Google</td>
  50.                 <td>Larry Page</td>
  51.                 <td>USA</td>
  52.             </tr>
  53.             <tr class="alt">
  54.                 <td>Lenovo</td>
  55.                 <td>Liu ChuanZhi</td>
  56.                 <td>China</td>
  57.             </tr>
  58.             <tr>
  59.                 <td>Microsoft</td>
  60.                 <td>Bill Gates</td>
  61.                 <td>USA</td>
  62.             </tr>
  63.             <tr class="alt">
  64.                 <td>Nokia</td>
  65.                 <td>Stephen Elop</td>
  66.                 <td>Finland</td>
  67.             </tr>
  68.         </table>
  69.  
  70.     </body>
  71. </html>

2:显示表格中的空单元

  1. <html>
  2.     <head>
  3.         <meta charset="UTF-8">
  4.         <title></title>
  5.         <style type="text/css">
  6.             table {
  7.                 /*不折叠单元格的分割线*/
  8.                 border-collapse: separate;
  9.                 /*隐藏空表格*/
  10.                 empty-cells: hide;
  11.             }
  12.         </style>
  13.     </head>
  14.     <body>
  15.         <table border="1">
  16.             <tr>
  17.                 <td>Adams</td>
  18.                 <td>John</td>
  19.             </tr>
  20.             <tr>
  21.                 <td>Bush</td>
  22.                 <td></td>
  23.             </tr>
  24.         </table>
  25.     </body>
  26. </html>

3:设置表格边框之间的距离

  1. <html>
  2.     <head>
  3.         <meta charset="UTF-8">
  4.         <title></title>
  5.         <style type="text/css">
  6.             table.tableOne {
  7.                 /*不折叠单元格的分割线*/
  8.                 border-collapse: separate;
  9.                 /*隐藏空表格*/
  10.                 empty-cells: hide;
  11.                 border-spacing: 10px;
  12.             }
  13.             table.tableTwo {
  14.                 border-collapse: separate;
  15.                 border-spacing: 10px 50px;
  16.             }
  17.         </style>
  18.     </head>
  19.     <body>
  20.         <table class="tableOne" border="1">
  21.             <tr>
  22.                 <td>Adams</td>
  23.                 <td>John</td>
  24.             </tr>
  25.             <tr>
  26.                 <td>Bush</td>
  27.                 <td>George</td>
  28.             </tr>
  29.         </table>
  30.         <table class="tableTwo" border="1">
  31.             <tr>
  32.                 <td>Carter</td>
  33.                 <td>Thomas</td>
  34.             </tr>
  35.             <tr>
  36.                 <td>Gates</td>
  37.                 <td>Bill</td>
  38.             </tr>
  39.         </table>
  40.  
  41.         <p><b>注释：</b>如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 border-spacing 属性。</p>
  42.     </body>
  43. </html>

4:设置表格标题的位置

  1. <head>
  2.         <meta charset="UTF-8">
  3.         <title></title>
  4.         <style type="text/css">
  5.             table.tableOne {
  6.                 /*不折叠单元格的分割线*/
  7.                 border-collapse: separate;
  8.                 /*隐藏空表格*/
  9.                 empty-cells: hide;
  10.                 border-spacing: 10px;
  11.                 caption-side: bottom;
  12.             }
  13.  
  14.         </style>
  15.     </head>
  16.     <body>
  17.         <table class="tableOne" border="1">
  18.             <caption>This is a caption</caption>
  19.             <tr>
  20.                 <td>Adams</td>
  21.                 <td>John</td>
  22.             </tr>
  23.             <tr>
  24.                 <td>Bush</td>
  25.                 <td>George</td>
  26.             </tr>
  27.         </table>
  28.         <p><b>注释：</b>如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 border-spacing 属性。</p>
  29.     </body>
  30. </html>

另外table标签有两个属性 cell-padding 表达内容与边框的距离  cell-spacing 表示表格之间的距离。

HTML 学习笔记 CSS(表格)的更多相关文章

  1. HTML学习笔记 CSS表格及轮廓案例 第八节 （原创）参考使用表

    #tb, tb1, tr, th, td { border: 5px solid blue; /*加边框*/ padding: 5px; /*内边距*/ } #tb1 { border-collaps ...

  2. amazeui学习笔记--css（HTML元素5）--表格Table

    amazeui学习笔记--css(HTML元素5)--表格Table 一.总结 1.基本样式:am-table:直接模块名  <table class="am-table"& ...

  3. amazeui学习笔记--css（基本样式3）--文字排版Typography

    amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...

  4. amazeui学习笔记--css（常用组件12）--面板Panel

    amazeui学习笔记--css(常用组件12)--面板Panel 一.总结 1.面板基本样式:默认的 .am-panel 提供基本的阴影和边距,默认边框添加 .am-panel-default,内容 ...

  5. amazeui学习笔记--css（布局相关3）--辅助类Utility

    amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...

  6. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

  7. amazeui学习笔记--css（布局相关1）--网格Grid

    amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式  <div class=&q ...

  8. amazeui学习笔记--css（基本样式4）--打印样式Print

    amazeui学习笔记--css(基本样式3)--打印样式Print 一.总结 1.打印显示url方法: 利用 CSS3 content 属性,将 <a> 和 <abbr> 的 ...

  9. amazeui学习笔记--css（基本样式2）--基础设置Base

    amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素 ...

随机推荐

  1. Microsoft Azure 的负载平衡器的Session Sticky

    Microsoft Azure 的负载平衡器是一种 Layer-4负载平衡器.Microsoft Azure 负载平衡器通过针对给定输入端点上接收到的流量计算哈希函数,在一组可用的服务器(虚拟机)之间 ...

  2. vbs操作excel

    航天金税系统升级,导出的Excel文件格式与原来有的差异,老的数据导入程序识别不了该文件,对比了新老文件后,发现新文件在专票和普票的“份数”行前增加了一行,同时增加了“单据号”列,通过脚本 把这些删除 ...

  3. 2016最新CocoaPods安装和错误解决 + 自己的经验

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Times; color: #333333; background-color: #fffff ...

  4. Tomcat源码分析之—具体启动流程分析

    从Tomcat启动调用栈可知,Bootstrap类的main方法为整个Tomcat的入口,在init初始化Bootstrap类的时候为设置Catalina的工作路径也就是Catalina_HOME信息 ...

  5. php反射机制

    PHP5添加了一项新的功能:Reflection.这个功能使得phper可以reverse-engineer class, interface,function,method and extensio ...

  6. Unity3d Asset Server启动问题

    周末机房停电后asset server无法启动,点击启动出现“asset server could not start server”. 几经周折,找到原来是用户问题,解决办法如下: 1.命令行输入“ ...

  7. KVM 介绍（8）：使用 libvirt 迁移 QEMU/KVM 虚机和 Nova 虚机 [Nova Libvirt QEMU/KVM Live Migration]

    学习 KVM 的系列文章: (1)介绍和安装 (2)CPU 和 内存虚拟化 (3)I/O QEMU 全虚拟化和准虚拟化(Para-virtulizaiton) (4)I/O PCI/PCIe设备直接分 ...

  8. AI (Adobe Illustrator)详细用法（五）

    最后的调整和输出. 一.改变形状工具/宽度工具/包裹工具 1.改变形状工具[整形工具] 改变形状工具可以让我们更细致的控制形状的改变. 用钢笔工具画一条曲线,并设置宽度样式等. 如果想让这条曲线形状变 ...

  9. 退役了退役了-AJAX

    hi 昨晚打球悲剧的把脚崴了. 要知道,上一次崴脚是四年前:那一次伤的是左脚,也是我这么多年打篮球的生涯中,这么多次崴脚中,最严重的一次受伤.休息了整整一个月,受寝室兄弟们的无微不至的照顾,最后也买了 ...

  10. [HOOLOO] zizaco/entrust 5.2.x-dev Class name must be a valid object or a string

    在使用laravel 5.1权限管理,使用  安装 zizaco/entrust 5.2.x-dev的时候执行 php artisan entrust:migration的时候报以下错误: [Symf ...