web前端学习（十八）——CSS3表格属性（table）的相关设置

2022-06-15 251

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： web前端学习（十八）——CSS3表格属性（table）的相关设置

1.CSS表格

使用 CSS 可以使 HTML 表格更美观。指定CSS表格边框，使用border属性。

缩写边框属性设置在一个声明中所有的边框属性。

可以设置的属性分别（按顺序）：border-width，border-style，border-color。（即边框的宽度、边框的样式、边框的颜色）

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

1.1 border属性

值	说明
border-width	指定边框的宽度
border-style	指定边框的样式
border-color	指定边框的颜色
inherit	指定应该从父元素继承border属性值

1.2 border-width属性

值	描述
thin	定义细的边框。
medium	默认。定义中等的边框。
thick	定义粗的边框。
length	允许您自定义边框的宽度。
inherit	规定应该从父元素继承边框宽度。

1.3 border-style属性

值	描述
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	规定应该从父元素继承边框样式。

1.4 border-color属性

值	说明
color	指定背景颜色。
transparent	指定边框的颜色应该是透明的。这是默认
inherit	指定边框的颜色，应该从父元素继承

小实例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>CSS简单学习</title>
    <style type="text/css">
      table,th,td {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>英文名</th>
        <th>中文名</th>
      </tr>
      <tr>
        <td>HTML</td>
        <td>超文本标记语言</td>
      </tr>
      <tr>
        <td>CSS</td>
        <td>层叠样式表</td>
      </tr>
    </table>
  </body>
</html>

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

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

1.5 border-collapse属性

值	说明
collapse	如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性
separate	默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性
inherit	规定应该从父元素继承 border-collapse 属性的值

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS简单学习</title>
    <style type="text/css">
      table {
        border-collapse: collapse;
      }
      table,th,td {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>英文名</th>
        <th>中文名</th>
      </tr>
      <tr>
        <td>HTML</td>
        <td>超文本标记语言</td>
      </tr>
      <tr>
        <td>CSS</td>
        <td>层叠样式表</td>
      </tr>
    </table>
  </body>
</html>

2.CSS表格的宽度和高度（width、height）

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

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

小实例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS简单学习</title>
    <style type="text/css">
      table,th,td {
        border: 1px solid black;
      }
      table {
        width: 30%;
      }
      th {
        height: 30px;
      }
      td {
        height: 20px;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
      </tr>
      <tr>
        <td>张三</td>
        <td>男</td>
        <td>31</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>男</td>
        <td>43</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>男</td>
        <td>24</td>
      </tr>
    </table>
  </body>
</html>

3.CSS表格的文字对齐方式（text-align）

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

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

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

小实例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS简单学习</title>
    <style type="text/css">
      table,th,td {
        border: 1px solid black;
      }
      th {
        width: 40%;
        height: 30px;
        text-align: center;
      }
      td {
        width: 40%;
        height: 20px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
      </tr>
      <tr>
        <td>张三</td>
        <td>男</td>
        <td>31</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>男</td>
        <td>43</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>男</td>
        <td>24</td>
      </tr>
    </table>
  </body>
</html>

4.CSS表格填充（padding）

padding简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。

值	说明
length	规定以具体单位计的填充值，比如像素、厘米等。默认值是 0px
%	规定基于父元素的宽度的百分比的填充
inherit	指定应该从父元素继承padding

小实例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS简单学习</title>
    <style type="text/css">
      table,th,td {
        border: 1px solid black;
      }
      th,td {
        padding: 15px;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
      </tr>
      <tr>
        <td>张三</td>
        <td>男</td>
        <td>31</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>男</td>
        <td>43</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>男</td>
        <td>24</td>
      </tr>
    </table>
  </body>
</html>

5.CSS表格的背景颜色及字体颜色（background-color、color）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS简单学习</title>
    <style type="text/css">
      table,th,td {
        border: 1px solid black;
      }
      th {
        background-color: burlywood;
        color: aqua;
      }
      td {
        background-color: chartreuse;
        color: brown;
      }
      caption {
        caption-side: bottom;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>表1.1-学生个人信息表</caption>
      <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
      </tr>
      <tr>
        <td>张三</td>
        <td>男</td>
        <td>31</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>男</td>
        <td>43</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>男</td>
        <td>24</td>
      </tr>
    </table>
  </body>
</html>

6.CSS表格多属性综合练习

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS简单学习</title>
    <style type="text/css">
      /*对应整个表格的样式*/
      #LOL {
        font-family: "楷体", sans-serif;
        width: 50%;
        height: 100%;
        text-align: center;
        border-collapse: collapse;
      }
      /*对应表格中的边框线的样式*/
      #LOL th,#LOL td {
        font-size: 20px;
        border: 1px solid #00FFFF;
        padding-top: 3px;
        padding-bottom: 3px;
        padding-left: 5px;
        padding-right: 10px;
      }
      /*对应表格表头的样式*/
      #LOL th {
        font-size: 30px;
        padding-top: 3px;
        padding-bottom: 3px;
        padding-left: 5px;
        padding-right: 10px;
        background-color: #7FFF00;
        color: deeppink;
      }
      /*对应表格中行为a的列的样式*/
      #LOL tr.a td {
        background-color: #DEB887;
        color: #FF0000;
      }
      /*对应表格中行为b的列的样式*/
      #LOL tr.b td {
        background-color: antiquewhite;
        color: #FF1493;
      }
      /*对应表格标题的样式*/
      caption {
        font-size: 16px;
        caption-side: bottom;
      }
    </style>
  </head>
  <body>
    <table id="LOL">
      <caption>表6.66-英雄联盟娱乐信息表</caption>
      <tr>
        <th>英雄名称</th>
        <th>定位</th>
        <th>推荐符文</th>
        <th>可选神话装备</th>
      </tr>
      <tr class="a">
        <td>熔岩巨兽</td>
        <td>辅助</td>
        <td>不灭之握</td>
        <td>霜火护手</td>
      </tr>
      <tr class="b">
        <td>战争女神</td>
        <td>AD Carry</td>
        <td>致命节奏</td>
        <td>海妖杀手</td>
      </tr>
      <tr class="a">
        <td>战争之影</td>
        <td>打野</td>
        <td>征服者</td>
        <td>三项之力</td>
      </tr>
      <tr class="b">
        <td>诺克萨斯之手</td>
        <td>上单</td>
        <td>征服者</td>
        <td>渴血战斧</td>
      </tr>
      <tr class="a">
        <td>疾风剑豪</td>
        <td>中单</td>
        <td>征服者</td>
        <td>不朽盾弓</td>
      </tr>
    </table>
  </body>
</html>

web前端学习（十八）——CSS3表格属性（table）的相关设置

1.CSS表格

2.CSS表格的宽度和高度（width、height）

3.CSS表格的文字对齐方式（text-align）

4.CSS表格填充（padding）

5.CSS表格的背景颜色及字体颜色（background-color、color）

6.CSS表格多属性综合练习

热门文章

最新文章

相关课程

相关电子书

相关实验场景