文章: 阅读:

CSS Table 表格

CSSCSS

前言

  • 使用 CSS 可以使 HTML 表格更美观。
属性 描述 CSS 备注 🔗
border 简写属性。用于把所有用于表格的属性设置于一个声明中 1 🔗
border-style 指定表格边框的样式 1 🔗
border-width 指定表格边框的宽度 1 🔗
border-color 指定表格边框的颜色 1 🔗
border-collapse 设置表格的边框是否被合并为一个单一的边框 2 🔗
width 设置元素的宽度 1 🔗
height 设置元素的高度 1 🔗
text-align 指定元素文本的水平对齐方式 1 🔗
vertical-align 设置一个元素的垂直对齐方式 1 🔗
padding 在一个声明中设置所有填充属性 1 🔗
color 指定文本的颜色 1 🔗
background-color 设置一个元素的背景颜色 1 🔗
caption-side 设置表格标题的位置 2 🔗
table-layout 设置表格布局算法 2 🔗

1、简写属性

  • 缩写边框属性设置在一个声明中所有的边框属性。
属性 描述 CSS 备注 🔗
border 简写属性。用于把所有用于表格的属性设置于一个声明中 1 🔗
  • 属性值
值 描述
border-width 指定边框的宽度
border-style 指定边框的样式
border-color 指定边框的颜色
inherit 指定应该从父元素继承 border 属性值

  • 可以设置的属性分别（按顺序）：

    • border-width
    • border-style
    • border-color

  • 如果上述值缺少一个没有关系，例如 border: ＃FF0000; 是允许的。

  • 实例

    1
    2
    3
    4
    5
    <style>
        table, th, td {
            border: 1px solid black;
        }
    </style>
    1
    2
    3
    4
    5
    <table>
        <tr> <th>Firstname</th> <th>Lastname</th> </tr>
        <tr> <td>Peter</td> <td>Griffin</td> </tr>
        <tr> <td>Lois</td> <td>Griffin</td> </tr>
    </table>

  • 效果

2、样式

  • border-style 属性设置一个元素的四个边框的样式。
属性 描述 CSS 备注 🔗
border-style 指定表格边框的样式 1 🔗
  • 属性值
值 描述
none 定义无边框
hidden 与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突
dotted 定义点状边框。在大多数浏览器中呈现为实线
dashed 定义虚线。在大多数浏览器中呈现为实线
solid 定义实线
double 定义双线。双线的宽度等于 border-width 的值
groove 定义 3D 凹槽边框。其效果取决于 border-color 的值
ridge 定义 3D 垄状边框。其效果取决于 border-color 的值
inset 定义 3D inset 边框。其效果取决于 border-color 的值
outset 定义 3D outset 边框。其效果取决于 border-color 的值
inherit 规定应该从父元素继承边框样式

  • border-style 属性可以有一到四个值。

    • border-style: dotted solid double dashed;

      • 上边框是点状
      • 右边框是实线
      • 下边框是双线
      • 左边框是虚线

    • border-style: dotted solid double;

      • 上边框是点状
      • 右边框和左边框是实线
      • 下边框是双线

    • border-style: dotted solid;

      • 上边框和下边框是点状
      • 右边框和左边框是实线

    • border-style: dotted;

      • 所有4个边框都是点状

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <style>
        table {
            border-style: dashed;
        }
        th {
            border-style: solid;
        }
        td {
            border-style: dotted;
        }
    </style>
    1
    2
    3
    4
    5
    <table>
        <tr> <th>Firstname</th> <th>Lastname</th> </tr>
        <tr> <td>Peter</td> <td>Griffin</td> </tr>
        <tr> <td>Lois</td> <td>Griffin</td> </tr>
    </table>

  • 效果

3、宽度

  • border-width 属性设置一个元素的四个边框的宽度。
属性 描述 CSS 备注 🔗
border-width 指定表格边框的宽度 1 🔗
  • 属性值
值 描述
thin 定义细的边框
medium 默认。定义中等的边框
thick 定义粗的边框
length 允许您自定义边框的宽度
inherit 规定应该从父元素继承边框宽度

  • border-width 属性可以有一到四个值。

    • border-width: thin medium thick 10px;

      • 上边框是细边框
      • 右边框是中等边框
      • 下边框是粗边框
      • 左边框是 10px 宽的边框

    • border-width: thin medium thick;

      • 上边框是细边框
      • 右边框和左边框是中等边框
      • 下边框是粗边框

    • border-width: thin medium;

      • 上边框和下边框是细边框
      • 右边框和左边框是中等边框

    • border-width: thin;

      • 所有 4 个边框都是细边框

  • border-width 属性如果单独使用则不起作用。要先使用 border-style 属性来设置边框。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <style>
        table {
            border-style: solid;
            border-width: 5px;
        }
        th {
            border-style: solid;
            border-width: medium;
        }
        td {
            border-style: solid;
            border-width: 1px;
        }
    </style>
    1
    2
    3
    4
    5
    <table>
        <tr> <th>Firstname</th> <th>Lastname</th> </tr>
        <tr> <td>Peter</td> <td>Griffin</td> </tr>
        <tr> <td>Lois</td> <td>Griffin</td> </tr>
    </table>

  • 效果

4、颜色

  • border-color 属性设置一个元素的四个边框颜色。
属性 描述 CSS 备注 🔗
border-color 指定表格边框的颜色 1 🔗
  • 属性值
值 描述
color 指定背景颜色。在 CSS 颜色值查找颜色值的完整列表
transparent 指定边框的颜色应该是透明的。这是默认
inherit 指定边框的颜色，应该从父元素继承

  • border-color 属性可以有一到四个值。

    • border-color: 红，绿，蓝, 粉红色;

      • 上边框是红色
      • 右边框是绿色
      • 底部边框是蓝
      • 左边框是粉红色

    • border-color: 红，绿，蓝;

      • 上边框是红色
      • 左，右边框是绿色
      • 底部边框是蓝

    • border-color: 红，绿;

      • 顶部和底部边框是红色
      • 左右边框是绿色

    • border-color: 红色;

      • 所有四个边框是红色

  • border-color 属性如果单独使用则不起作用。要先使用 border-style 属性来设置边框。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <style>
        table {
            border-style: solid;
            border-color: #ff0000 #00ff00 #0000ff rgb(250, 0, 255);
        }
        th {
            border-style: solid;
            border-color: #00ff00 #ff0000 #0000ff;
        }
        td {
            border-style: solid;
            border-color: #ff0000 #0000ff;
        }
    </style>
    1
    2
    3
    4
    5
    <table>
        <tr> <th>Firstname</th> <th>Lastname</th> </tr>
        <tr> <td>Peter</td> <td>Griffin</td> </tr>
        <tr> <td>Lois</td> <td>Griffin</td> </tr>
    </table>

  • 效果

5、折叠边框

  • 在上面的例子中的表格有双边框。这是因为表和 th/td 元素有独立的边界。为了显示一个表的单个边框，使用 border-collapse 属性。

  • border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。

属性 描述 CSS 备注 🔗
border-collapse 设置表格的边框是否被合并为一个单一的边框 2 🔗
  • 属性值
值 描述
collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性
separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性
inherit 规定应该从父元素继承 border-collapse 属性的值

  • 如果没有指定 !DOCTYPE，border-collapse 属性在 IE8 及更早 IE 版本中是不起作用的。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    <style>
        table {
            border-collapse: collapse;
        }
        table, td, th {
            border: 1px solid black;
        }
    </style>
    1
    2
    3
    4
    5
    <table>
        <tr> <th>Firstname</th> <th>Lastname</th> </tr>
        <tr> <td>Peter</td> <td>Griffin</td> </tr>
        <tr> <td>Lois</td> <td>Griffin</td> </tr>
    </table>

  • 效果

6、宽度和高度

  • width 和 height 属性定义表格的宽度和高度。
属性 描述 CSS 备注 🔗
width 设置元素的宽度 1 🔗
height 设置元素的高度 1 🔗
  • 属性值
值 描述
auto 默认值。浏览器可计算出实际的宽度、高度
length 使用 px、cm 等单位定义宽度、高度
% 定义基于包含块（父元素）宽度的百分比宽度、高度
inherit 规定应该从父元素继承 width 属性的值

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <style>
        table, td, th {
            border: 1px solid black;
        }
        table {
            width: 100%;
        }
        th {
            height: 50px;
        }
    </style>
    1
    2
    3
    4
    5
    <table>
        <tr> <th>Firstname</th> <th>Lastname</th> </tr>
        <tr> <td>Peter</td> <td>Griffin</td> </tr>
        <tr> <td>Lois</td> <td>Griffin</td> </tr>
    </table>

  • 效果

7、文字对齐

  • 表格中的文本对齐和垂直对齐属性。
属性 描述 CSS 备注 🔗
text-align 指定元素文本的水平对齐方式，向左，右，或中心等 1 🔗
vertical-align 设置一个元素的垂直对齐方式，顶部，底部或中间等 1 🔗
  • 属性值
text-align 值 描述
left 把文本排列到左边。默认值：由浏览器决定
right 把文本排列到右边
center 把文本排列到中间
justify 实现两端对齐文本效果
inherit 规定应该从父元素继承 text-align 属性的值
vertical-align 值 描述
baseline 默认。元素放置在父元素的基线上
sub 垂直对齐文本的下标
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部
bottom 使元素及其后代元素的底部与整行的底部对齐
text-bottom 把元素的底端与父元素字体的底端对齐
length 将元素升高或降低指定的高度，可以是负数
% 使用 “line-height” 属性的百分比值来排列此元素。允许使用负值
inherit 规定应该从父元素继承 vertical-align 属性的值

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <style>
        table, td, th {
            border: 1px solid black;
        }
        th {
            height: 50px;
            vertical-align: bottom;
        }
        td {
            text-align: right;
        }
    </style>
    1
    2
    3
    4
    5
    <table>
        <tr> <th>Firstname</th> <th>Lastname</th> </tr>
        <tr> <td>Peter</td> <td>Griffin</td> </tr>
        <tr> <td>Lois</td> <td>Griffin</td> </tr>
    </table>

  • 效果

8、填充

  • 如需控制边框和表格内容之间的间距，应使用 td 和 th 元素的填充属性。

  • padding 简写属性在一个声明中设置所有填充属性。

属性 描述 CSS 备注 🔗
padding 在一个声明中设置所有填充属性 1 🔗
  • 属性值
值 描述
length 规定以具体单位计的填充值，比如像素、厘米等。默认值是 0px
% 规定基于父元素的宽度的百分比的填充
inherit 指定应该从父元素继承 padding

  • padding 属性可以有一到四个值。

    • padding: 10px 5px 15px 20px;

      • 上填充是 10px
      • 右填充是 5px
      • 下填充是 15px
      • 左填充是 20px

    • padding: 10px 5px 15px;

      • 上填充是 10px
      • 右填充和左填充是 5px
      • 下填充是 15px

    • padding: 10px 5px;

      • 上填充和下填充是 10px
      • 右填充和左填充是 5px

    • padding: 10px;

      • 所有四个填充都是 10px

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    <style>
        table, td, th {
            border: 1px solid black;
        }
        td {
            padding: 15px;
        }
    </style>
    1
    2
    3
    4
    5
    <table>
        <tr> <th>Firstname</th> <th>Lastname</th> </tr>
        <tr> <td>Peter</td> <td>Griffin</td> </tr>
        <tr> <td>Lois</td> <td>Griffin</td> </tr>
    </table>

  • 效果

9、文字和背景颜色

  • 指定文本和背景颜色。
属性 描述 CSS 备注 🔗
color 指定文本的颜色 1 🔗
background-color 设置一个元素的背景颜色 1 🔗
  • 属性值
color 值 描述
颜色的名称 颜色的名称，比如 red, blue, brown, lightseagreen 等，不区分大小写
十六进制 十六进制符号 #RRGGBB 和 #RGB（比如 #ff0000）。
“#” 后跟 6 位或者 3 位十六进制字符（0-9, A-F）
RGB，红-绿-蓝（red-green-blue (RGB)） 规定颜色值为 rgb 代码的颜色，函数格式为 rgb(R,G,B)，
取值可以是 0-255 的整数或百分比
RGBA，红-绿-蓝-阿尔法（RGBa） RGBa 扩展了 RGB 颜色模式，它包含了阿尔法通道，允许设定一个颜色的透明度。
a 表示透明度：0=透明；1=不透明
HSL，色相-饱和度-明度（Hue-saturation-lightness） 色相（Hue）表示色环（即代表彩虹的一个圆环）的一个角度。饱和度和明度由百分数来表示。
100% 是满饱和度，而 0% 是一种灰度。100% 明度是白色， 0% 明度是黑色，而 50% 明度是”一般的”
HSLA，色相-饱和度-明度-阿尔法（HSLa） HSLa 扩展自 HSL 颜色模式，包含了阿尔法通道，可以规定一个颜色的透明度。
a 表示透明度：0=透明；1=不透明
background-color 值 描述
color 指定背景颜色。在 CSS 颜色值近可能的寻找一个颜色值的完整列表
transparent 指定背景颜色应该是透明的。这是默认
inherit 指定背景颜色，应该从父元素继承

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <style>
        table, td, th {
            border: 1px solid black;
        }
        th {
             color: white;
            background-color: green;
        }
    </style>
    1
    2
    3
    4
    5
    <table>
        <tr> <th>Firstname</th> <th>Lastname</th> </tr>
        <tr> <td>Peter</td> <td>Griffin</td> </tr>
        <tr> <td>Lois</td> <td>Griffin</td> </tr>
    </table>

  • 效果

10、标题

  • 定位表格标题。
属性 描述 CSS 备注 🔗
caption-side 设置表格标题的位置 2 🔗
  • 属性值
值 描述
top 默认值。把表格标题定位在表格之上
bottom 把表格标题定位在表格之下
inherit 规定应该从父元素继承 caption-side 属性的值

  • 如果 !DOCTYPE 指定 IE 8 支持 caption-side 属性。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    <style>
        table, td, th {
            border: 1px solid black;
        }
        caption {
            caption-side: bottom;
        }
    </style>
    1
    2
    3
    4
    5
    6
    <table>
        <caption>Table 1.1 Customers</caption>
        <tr> <th>Firstname</th> <th>Lastname</th> </tr>
        <tr> <td>Peter</td> <td>Griffin</td> </tr>
        <tr> <td>Lois</td> <td>Griffin</td> </tr>
    </table>

  • 效果

11、CSS 实例

如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-11-05 20:15


评论


文章目录
  1. 1. 前言
  2. 2. 1、简写属性
  3. 3. 2、样式
  4. 4. 3、宽度
  5. 5. 4、颜色
  6. 6. 5、折叠边框
  7. 7. 6、宽度和高度
  8. 8. 7、文字对齐
  9. 9. 8、填充
  10. 10. 9、文字和背景颜色
  11. 11. 10、标题
  12. 12. 11、CSS 实例
隐藏目录