表格边框

CSS 中设置表格边框，请使用 border 属性:

  1. <style type="text/css">
  2.     table{
  3.         border:1px solid red;
  4.     }
  5.     th,td{
  6.             border:1px solid red;
  7.     }
  8. </style>
  9. </head>
  10. <body>
  11.     <table>
  12.         <tr>
  13.             <th>姓名</th>
  14.             <th>描述</th>
  15.         </tr>
  16.         <tr>
  17.             <td>小白</td>
  18.             <td>小白是个猥琐但不下流的人</td>
  19.         </tr>
  20.          <tr>
  21.             <td>小黑</td>
  22.             <td>小白是个下流但不猥琐的人</td>
  23.         </tr>
  24.          <tr>
  25.             <td>小红</td>
  26.             <td>小白是个好学但不下流的人</td>
  27.         </tr>
  28.     </table>
  29. </body>

上例中的表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。如果需要把表格显示为单线条边框，请使用 border-collapse 属性。(细线表格)

  1. <style type="text/css">
  2.     table{
  3.         border:1px solid red;
  4.         border-collapse:collapse;/*该属性加在table中*/
  5.     }
  6.     th,td{
  7.         border:1px solid red;
  8.     }
  9. </style>
  10. </head>
  11. <body>
  12.     <table>
  13.         <tr>
  14.             <th>姓名</th>
  15.             <th>描述</th>
  16.         </tr>
  17.         <tr>
  18.             <td>小白</td>
  19.             <td>小白是个猥琐但不下流的人</td>
  20.         </tr>
  21.          <tr>
  22.             <td>小黑</td>
  23.             <td>小白是个下流但不猥琐的人</td>
  24.         </tr>
  25.          <tr>
  26.             <td>小红</td>
  27.             <td>小白是个好学但不下流的人</td>
  28.         </tr>
  29.     </table>
  30. </body>

表格宽度和高度

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

  1. <style type="text/css">
  2.     table{
  3.         border:1px solid red;
  4.         border-collapse:collapse;/*该属性加在table中*/
  5.         width:100%;
  6.     }
  7.     th,td{
  8.         border:1px solid red;
  9.         height:50px;
  10.     }
  11. </style>
  12. </head>
  13. <body>
  14.     <table>
  15.         <tr>
  16.             <th>姓名</th>
  17.             <th>描述</th><!--th中的文字在表格中会默认水平和垂直都居中-->
  18.         </tr>
  19.         <tr>
  20.             <td>小白</td>
  21.             <td>小白是个猥琐但不下流的人</td><!--td中的文字在表格中会默认垂直居中 水平不会默认居中-->
  22.         </tr>
  23.          <tr>
  24.             <td>小黑</td>
  25.             <td>小白是个下流但不猥琐的人</td>
  26.         </tr>
  27.          <tr>
  28.             <td>小红</td>
  29.             <td>小白是个好学但不下流的人</td>
  30.         </tr>
  31.     </table>
  32. </body>

表格文本对齐

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

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

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

  1. <style type="text/css">
  2.     table{
  3.         border:1px solid red;
  4.         border-collapse:collapse;/*该属性加在table中*/
  5.         width:100%;
  6.         text-align:center;
  7.     }
  8.     th,td{
  9.         border:1px solid red;
  10.         height:50px;
  11.         vertical-align:bottom;/*设置在table中这个属性无效*/
  12.     }
  13. </style>
  14. </head>
  15. <body>
  16.     <table>
  17.         <tr>
  18.             <th>姓名</th>
  19.             <th>描述</th><!--th中的文字在表格中会默认水平和垂直都居中-->
  20.         </tr>
  21.         <tr>
  22.             <td>小白</td>
  23.             <td>小白是个猥琐但不下流的人</td><!--td中的文字在表格中会默认垂直居中 水平不会默认居中-->
  24.         </tr>
  25.          <tr>
  26.             <td>小黑</td>
  27.             <td>小白是个下流但不猥琐的人</td>
  28.         </tr>
  29.          <tr>
  30.             <td>小红</td>
  31.             <td>小白是个好学但不下流的人</td>
  32.         </tr>
  33.     </table>
  34. </body>

表格颜色

  1. <style type="text/css">
  2.     table{
  3.         border:1px solid red;
  4.         border-collapse:collapse;/*该属性加在table中*/
  5.         width:100%;
  6.         text-align:center;
  7.     }
  8.     th,td{
  9.         border:1px solid red;
  10.         vertical-align:bottom;/*设置在table中这个属性无效*/
  11.         background-color:#3F0;
  12.         color:#000;
  13.     }
  14. </style>
  15. </head>
  16. <body>
  17.     <table>
  18.         <tr>
  19.             <th>姓名</th>
  20.             <th>描述</th><!--th中的文字在表格中会默认水平和垂直都居中-->
  21.         </tr>
  22.         <tr>
  23.             <td>小白</td>
  24.             <td>小白是个猥琐但不下流的人</td><!--td中的文字在表格中会默认垂直居中 水平不会默认居中-->
  25.         </tr>
  26.          <tr>
  27.             <td>小黑</td>
  28.             <td>小白是个下流但不猥琐的人</td>
  29.         </tr>
  30.          <tr>
  31.             <td>小红</td>
  32.             <td>小白是个好学但不下流的人</td>
  33.         </tr>
  34.     </table>
  35. </body>

表格内边距

控制表格中内容与边框的距离，请为 td 和 th 元素设置 padding 属性：

  1. <style type="text/css">
  2.     table{
  3.         border:1px solid red;
  4.         border-collapse:collapse;/*该属性加在table中*/
  5.         width:100%;
  6.         text-align:center;
  7.     }
  8.     th,td{
  9.         border:1px solid red;
  10.         vertical-align:bottom;/*设置在table中这个属性无效*/
  11.         padding:20px;
  12.     }
  13. </style>
  14. </head>
  15. <body>
  16.     <table>
  17.         <tr>
  18.             <th>姓名</th>
  19.             <th>描述</th><!--th中的文字在表格中会默认水平和垂直都居中-->
  20.         </tr>
  21.         <tr>
  22.             <td>小白</td>
  23.             <td>小白是个猥琐但不下流的人</td><!--td中的文字在表格中会默认垂直居中 水平不会默认居中-->
  24.         </tr>
  25.          <tr>
  26.             <td>小黑</td>
  27.             <td>小白是个下流但不猥琐的人</td>
  28.         </tr>
  29.          <tr>
  30.             <td>小红</td>
  31.             <td>小白是个好学但不下流的人</td>
  32.         </tr>
  33.     </table>
  34. </body>

CSS 控制Table的其他属性

border-spacing设置分隔单元格边框的距离。（如果使用border-collapse将边框合并了的话，该属性无效）

  1. <style type="text/css">
  2.     table{
  3.         border:1px solid red;
  4.         border-collapse:collapse;/*该属性加在table中*/
  5.         width:100%;
  6.         text-align:center;
  7.         border-spacing:20px;/*如果将上面border-collapse才有效*/
  8.     }
  9.     th,td{
  10.         border:1px solid red;
  11.         vertical-align:bottom;/*设置在table中这个属性无效*/
  12.         padding:20px;
  13.     }
  14. </style>
  15. </head>
  16. <body>
  17.     <table>
  18.         <tr>
  19.             <th>姓名</th>
  20.             <th>描述</th><!--th中的文字在表格中会默认水平和垂直都居中-->
  21.         </tr>
  22.         <tr>
  23.             <td>小白</td>
  24.             <td>小白是个猥琐但不下流的人</td><!--td中的文字在表格中会默认垂直居中 水平不会默认居中-->
  25.         </tr>
  26.          <tr>
  27.             <td>小黑</td>
  28.             <td>小白是个下流但不猥琐的人</td>
  29.         </tr>
  30.          <tr>
  31.             <td>小红</td>
  32.             <td>小白是个好学但不下流的人</td>
  33.         </tr>
  34.     </table>
  35. </body>

caption-side设置表格标题的位置。

top 默认值。把表格标题定位在表格之上。
bottom 把表格标题定位在表格之下。
inherit 规定应该从父元素继承 caption-side 属性的值。 
  1. <style type="text/css">
  2.     table{
  3.         border:1px solid red;
  4.         border-collapse:collapse;/*该属性加在table中*/
  5.         caption-side:bottom;/*将标题设置在表格的最下面*/
  6.     }
  7.     th,td{
  8.         border:1px solid red;
  9.         vertical-align:bottom;/*设置在table中这个属性无效*/
  10.     }
  11. </style>
  12. </head>
  13. <body>
  14.     <table>
  15.         <caption>学生信息表</caption>
  16.         <tr>
  17.             <th>姓名</th>
  18.             <th>描述</th><!--th中的文字在表格中会默认水平和垂直都居中-->
  19.         </tr>
  20.         <tr>
  21.             <td>小白</td>
  22.             <td>小白是个猥琐但不下流的人</td><!--td中的文字在表格中会默认垂直居中 水平不会默认居中-->
  23.         </tr>
  24.          <tr>
  25.             <td>小黑</td>
  26.             <td>小白是个下流但不猥琐的人</td>
  27.         </tr>
  28.          <tr>
  29.             <td>小红</td>
  30.             <td>小白是个好学但不下流的人</td>
  31.         </tr>
  32.     </table>
  33. </body>

empty-cells设置是否显示表格中的空单元格。

hide 不在空单元格周围绘制边框。
show 在空单元格周围绘制边框。默认。
inherit 规定应该从父元素继承 empty-cells 属性的值。 
  1. <style type="text/css">
  2.     table{
  3.         border:1px solid red;
  4.         border-collapse:collapse;/*该属性加在table中*/
  5.         empty-cells: hide;/*使用了该属性，在没有内容的单元格将不会显示，如果使用border-collapse合并了单元格，那么看起来这个单元格还是存在的，但实际单元格是不存在了*/
  6.     }
  7.     th,td{
  8.         border:1px solid red;
  9.         vertical-align:bottom;/*设置在table中这个属性无效*/
  10.     }
  11. </style>
  12. </head>
  13. <body>
  14.     <table>
  15.         <tr>
  16.             <th>姓名</th>
  17.             <th>描述</th><!--th中的文字在表格中会默认水平和垂直都居中-->
  18.         </tr>
  19.         <tr>
  20.             <td>小白</td>
  21.             <td>小白是个猥琐但不下流的人</td><!--td中的文字在表格中会默认垂直居中 水平不会默认居中-->
  22.         </tr>
  23.          <tr>
  24.             <td>小黑</td>
  25.             <td>小白是个下流但不猥琐的人</td>
  26.         </tr>
  27.          <tr>
  28.             <td>小红</td>
  29.             <td><!--这里是空的单元格，没有内容--></td>
  30.         </tr>
  31.     </table>
  32. </body>

table-layout设置显示单元、行和列的算法。

automatic 默认。列宽度由单元格内容设定。
fixed 列宽由表格宽度和列宽度设定。
inherit 规定应该从父元素继承 table-layout 属性的值。 
  1. <style type="text/css">
  2.     table{
  3.         border:1px solid red;
  4.         border-collapse:collapse;/*该属性加在table中*/
  5.         width:200px;
  6.         table-layout:auto;
  7.     }
  8.     th,td{
  9.         border:1px solid red;
  10.         vertical-align:bottom;/*设置在table中这个属性无效*/
  11.     }
  12. </style>
  13. </head>
  14. <body>
  15.     <table>
  16.         <tr>
  17.             <th>姓名</th>
  18.             <th>描述</th><!--th中的文字在表格中会默认水平和垂直都居中-->
  19.         </tr>
  20.         <tr>
  21.             <td>小白</td>
  22.             <td>小白是个猥琐但不下流的人</td><!--td中的文字在表格中会默认垂直居中 水平不会默认居中-->
  23.         </tr>
  24.          <tr>
  25.             <td>小黑</td>
  26.             <td>小白是个下流但不猥琐的人</td>
  27.         </tr>
  28.          <tr>
  29.             <td>小红</td>
  30.             <td><!--这里是空的单元格，没有内容--></td>
  31.         </tr>
  32.     </table>
  33. </body>

案例：

CSS 构造表格的更多相关文章

  1. 25 ,CSS 构造表格

    1. 表格的基础构造 2. 边距和边线应用 3. 隐藏和删除应用 1.  简单表格 table { width:auto; border-collapse:collapse; margin-left: ...

  2. CSS构造表格

    表格的基础构造 边距和边线应用 隐藏和删除应用 简单表格 table {     width:auto;     border-collapse:collapse;(把单元格空隙合并起来)     m ...

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

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

  4. css构造块级元素

    css 1. 宽高width:数值;height:数值;也可用百分比!长高的设置不会被后代继承2. 背景(1)背景颜色background-color:颜色值;元素的背景颜色默认为transparen ...

  5. css构造文本

    1. 1. 文本缩进text-indent:值:值为数字,最常用的数值单位是px(像素),也可以直接是百分比!text-indent:100px;text-indent:10%;2. 文本对齐text ...

  6. 四个好看的CSS样式表格

    文章来源 http://www.cnphp6.com/archives/58020 1. 单像素边框CSS表格 这是一个非经常常使用的表格样式. 源码: 2. 带背景图的CSS样式表格 和上面差点儿相 ...

  7. 常用的四种CSS样式表格

    1. 单像素边框CSS表格 这是一个很常用的表格样式. [html] <style type="text/css"> table.gridtable { font-fa ...

  8. 24, CSS 构造超链接

    1. 超链接边框 2. 派生超链接 3. 属性选择器超链接 4. 动态超链接 5. 图像翻转超链接 6. CSS 工具提示 1.给链接加上边框 A:link { Color: #f00; Text-d ...

  9. 23 , CSS 构造列表与导航

    1. 列表图片 2. 背景列表 3. 翻转列表 4. 水平导航 1. 内边距与外边距 Ul { Margin: 0; Padding: 0; } 2. 使用图片作为列表图标 Ul { Margin: ...

随机推荐

  1. Python__组合数据类型

    组合数据:集合类型.序列类型(元组类型.列表类型).字典类型 集合: 定义:集合是多个元素的无序组合.(无序,唯一,Python中要求放入集合中的数据类型是不可变的). 集合用大括号 {}表示,元素间 ...

  2. POJ 1284 Primitive Roots 数论原根。

    Primitive Roots Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 2479   Accepted: 1385 D ...

  3. SpringMVC入门（二）—— 参数的传递、Controller方法返回值、json数据交互、异常处理、图片上传、拦截器

    一.参数的传递 1.简单的参数传递 /* @RequestParam用法:入参名字与方法名参数名不一致时使用{ * value:传入的参数名,required:是否必填,defaultValue:默认 ...

  4. 解决 ImportError: cannot import name pywrap_tensorflow

    原文:https://aichamp.wordpress.com/2016/11/13/handeling-importerror-cannot-import-name-pywrap_tensorfl ...

  5. POJ3279(KB1-D 熄灯问题）

    Fliptile Description Farmer John knows that an intellectually satisfied cow is a happy cow who will ...

  6. ubuntn安装

    环境win7 64 ,在vmn中安装ubuntn,需要开启虚拟化操作步骤: 1.首先进入BIOS,我的是thinkphpE440,在开机联想界面出现的那刻按F1: 2.选择切换到security页面, ...

  7. 浏览器根对象window之事件

    1. [事件]动画 onanimationstart onanimationend onanimationiteration onwebkitanimationend onwebkitanimatio ...

  8. android中的ellipsize

    textview中有个内容过长加省略号的属性,即ellipsize 用法如下: 在xml中 android:ellipsize = "end" 省略号在结尾 android:ell ...

  9. 【Java】函数使用

    package aaa; public class aaa { public static int add(int a,int b) { return a+b; } public static voi ...

  10. Typescript 基础知识

    Typescript 就是 Javascript 的超集,所以首先你要知道 Javascript 基础知识 类型注解 类型注解在TypeScript中是记录函数或变量约束的简便方法. // 布尔值 l ...