CSS Table（表格）

一、表格边框

border 指定CSS表格边框，使用border属性。

下面的例子指定了一个表格的Th和TD元素的黑色边框：

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

请注意，在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。

为了显示一个表的单个边框，使用 border-collapse属性。

二、折叠边框

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：

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

三、表格宽度和高度

Width和height属性定义表格的宽度和高度。

下面的例子是设置100％的宽度，50像素的th元素的高度的表格：

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

四、表格文字对齐

表格中的文本对齐和垂直对齐属性。

text-align属性设置水平对齐方式，像左，右，或中心：

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

vertical-align 垂直对齐属性设置垂直对齐，比如顶部，底部或中间：

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

五、表格填充

padding 如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性：

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

六、表格颜色

下面的例子指定边框的颜色，和th元素的文本和背景颜色：

table, td, th { border:1px solid green; } th { background-color:green; color:white; }

七、示例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>CSS教程</title>
  6. <style>
  7. #customers
  8. {
  9.     font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  10.     width:100%;
  11.     border-collapse:collapse;
  12. }
  13. #customers td, #customers th
  14. {
  15.     font-size:1em;
  16.     border:1px solid #98bf21;
  17.     padding:3px 7px 2px 7px;
  18. }
  19. #customers th
  20. {
  21.     font-size:1.1em;
  22.     text-align:left;
  23.     padding-top:5px;
  24.     padding-bottom:4px;
  25.     background-color:#A7C942;
  26.     color:#ffffff;
  27. }
  28. #customers tr.alt td
  29. {
  30.     color:#000000;
  31.     background-color:#EAF2D3;
  32. }
  33. </style>
  34. </head>
  35.  
  36. <body>
  37. <table id="customers">
  38. <tr>
  39.   <th>Company</th>
  40.   <th>Contact</th>
  41.   <th>Country</th>
  42. </tr>
  43. <tr>
  44. <td>Alfreds Futterkiste</td>
  45. <td>Maria Anders</td>
  46. <td>Germany</td>
  47. </tr>
  48. <tr class="alt">
  49. <td>Berglunds snabbköp</td>
  50. <td>Christina Berglund</td>
  51. <td>Sweden</td>
  52. </tr>
  53. <tr>
  54. <td>Centro comercial Moctezuma</td>
  55. <td>Francisco Chang</td>
  56. <td>Mexico</td>
  57. </tr>
  58. <tr class="alt">
  59. <td>Ernst Handel</td>
  60. <td>Roland Mendel</td>
  61. <td>Austria</td>
  62. </tr>
  63. <tr>
  64. <td>Island Trading</td>
  65. <td>Helen Bennett</td>
  66. <td>UK</td>
  67. </tr>
  68. <tr class="alt">
  69. <td>Königlich Essen</td>
  70. <td>Philip Cramer</td>
  71. <td>Germany</td>
  72. </tr>
  73. <tr>
  74. <td>Laughing Bacchus Winecellars</td>
  75. <td>Yoshi Tannamuri</td>
  76. <td>Canada</td>
  77. </tr>
  78. <tr class="alt">
  79. <td>Magazzini Alimentari Riuniti</td>
  80. <td>Giovanni Rovelli</td>
  81. <td>Italy</td>
  82. </tr>
  83. <tr>
  84. <td>North/South</td>
  85. <td>Simon Crowther</td>
  86. <td>UK</td>
  87. </tr>
  88. <tr class="alt">
  89. <td>Paris spécialités</td>
  90. <td>Marie Bertrand</td>
  91. <td>France</td>
  92. </tr>
  93. </table>
  94. </body>
  95. </html>

效果：

CSS Table（表格）的更多相关文章

  1. JS+CSS - table 表格固定表头和第一列、内容可滚动 （转载）

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. css table表格无法调整宽度问题分析

    1.在网上查找了相关问题,有的说表格设置了背景图片,把原来的宽度撑开了,导致无法变窄~! 在项目中,原来美工设计的页面,设置了一个块的样式class="title",现在有一段ht ...

  3. css Table 表格宽度失效解决方案

    使用div包裹内容进行支撑 <table cellspacing="0"> <caption>89 HOLLAND ROAD SINGAPORE 27575 ...

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

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

  5. 【代码笔记】Web-CSS-CSS Table(表格）

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  6. CSS控制表格（table）样式

    CSS控制表格样式 /* 合并边框重叠部分 */ table{border-collapse:collapse;} /* 单元格边框 */ td{border:1px solid #A7AEB1;}

  7. 利用CSS生成精美细线Table表格

    精美的表格是前端开发用到的一个组件,很多时候我们利用复杂的页面style代码,来生成这样的表格,造成了页面的修改性和可读性都非常差.这里推荐直接使用css来产生一个细线表格. 使用方法也很简单: 第一 ...

  8. 问题：table 可否实现对角线；结果：用div+css模拟表格对角线

    首先声明: 这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点.如果对此深以为然的朋友,请一笑过之... 有时在插入文档时,要用到表格对角线,常见 ...

  9. java：HTML（table表格，ul列表）和CSS（导入.css文件，三种定义颜色方式，三种样式选择器，a标签属性顺序，）

    1.重点掌握: html: 1.form表单:input,checkbox,seelct,radio,button,submit 2.table表格:thead-->tr-->th;tbo ...

随机推荐

  1. python中的各种符号

    在这里所作的是将所有的 Python 符号和关键字列出来,这些都是值得掌握的重点. 关键字  and  del  from  not  while  as  elif  global ...

  2. 苹果MAC安装Windows系统

    一,选择实用工具 二,选择分区助理 三,创建安装U盘或者安装 如没有安装U盘需要现创建一个,安装镜像需要事先准备好,制作好了安装U盘就选择第三项安装 四,为windows分区(建议分30G) 系统会格 ...

  3. md5sum检验MD5值

    md5sum命令检验MD5值 md5sum命令用于生成和校验文件的md5值.它会逐位对文件的内容进行校验.是文件的内容,与文件名无关,也就是文件内容相同,其md5值相同.md5值是一个128位的二进制 ...

  4. swift tableViewController

    tableViewController 控制器 import UIKit     class ViewController: UITableViewController {              ...

  5. Linux yum 安装 Nginx

    搭建 Nginx 静态服务器 安装 Nginx 使用 yum 安装 Nginx: yum install nginx -y 修改 /etc/nginx/conf.d/default.conf,去除对 ...

  6. Yii框架2.0的过滤器

    过滤器是 控制器 动作 执行之前或之后执行的对象. 例如访问控制过滤器可在动作执行之前来控制特殊终端用户是否有权限执行动作, 内容压缩过滤器可在动作执行之后发给终端用户之前压缩响应内容. 过滤器可包含 ...

  7. Linux时间管理涉及数据结构和传统低分辨率时钟的实现

    上篇文章大致描述了Linux时间管理的基本情况,看了一些大牛们的博客感觉自己写的内容很匮乏,但是没办法,只能通过这种方式提升自己……闲话不说,本节介绍下时间管理下重要的数据结构 设备相关数据结构 // ...

  8. Java基础—输入输出流

    流的概念 在Java中,流是从源到目的地的字节的有序序列.Java中有两种基本的流——输入流(InputStream)和输出流(OutputStream). 根据流相对于程序的另一个端点的不同,分为节 ...

  9. Android Studio下编译调试 ndk 的示例

    https://github.com/googlesamples/android-ndk https://github.com/googlesamples android studio 手动安装cma ...

  10. Spark2.0机器学习系列之2：基于Pipeline、交叉验证、ParamMap的模型选择和超参数调优

    Spark中的CrossValidation Spark中采用是k折交叉验证 (k-fold cross validation).举个例子,例如10折交叉验证(10-fold cross valida ...