精通 CSS 第 9 章 表单与数据表 学习笔记

Posted GoldenaArcher

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了精通 CSS 第 9 章 表单与数据表 学习笔记相关的知识，希望对你有一定的参考价值。

精通 CSS 第 9 章 表单与数据表 学习笔记

表单和数据表应该是业务最为重要的一个部分了，包含并不限于以下用途：展示数据、布局（早期用法）、注册、登录、留言、填写信息……

我总是觉得，要将表单设计的好看，是一件挺困难的事情。

设计数据表

开始使用的案例是做的一个日历，这是什么样式都没有添加的时候：

calendar

能看，但是确实看起来不舒服，这时候的源码是这样的：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table caption {
        font-weight: 600;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>
        2021年 5月
      </caption>
      <thead>
        <tr>
          <th>一</th>
          <th>二</th>
          <th>三</th>
          <th>四</th>
          <th>五</th>
          <th>六</th>
          <th>日</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>26</td>
          <td>27</td>
          <td>28</td>
          <td>29</td>
          <td>30</td>
          <td>1</td>
          <td>2</td>
        </tr>
        <tr>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td>6</td>
          <td>7</td>
          <td>8</td>
          <td>9</td>
        </tr>
        <tr>
          <td>10</td>
          <td>11</td>
          <td>12</td>
          <td>13</td>
          <td>14</td>
          <td>15</td>
          <td>16</td>
        </tr>
        <tr>
          <td>17</td>
          <td>18</td>
          <td>19</td>
          <td>20</td>
          <td>21</td>
          <td>22</td>
          <td>23</td>
        </tr>
        <tr>
          <td>24</td>
          <td>25</td>
          <td>26</td>
          <td>27</td>
          <td>28</td>
          <td>29</td>
          <td>30</td>
        </tr>
        <tr>
          <td>31</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td>6</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

表格专有元素

其中大部分的内容在 HTML5 权威指南第 11 章 表格元素 学习笔记 提到了，但是有一个 colgroup 和 col 在那篇笔记里面没有说，这里看到合适的用法了就提一下。

首先，colgroup 的位置要在 caption 之后，其余元素之前，以上面的日历为例，写法如下：

<table>
  <!-- 省略 caption -->
  <colgroup>
    <col class="cal-mon" />
    <col class="cal-tue" />
    <col class="cal-wed" />
    <col class="cal-thu" />
    <col class="cal-fri" />
    <col class="cal-sat cal-weekend" />
    <col class="cal-sun cal-weekend" />
  </colgroup>
  <!-- 省略其他元素 -->
</table>

这时候，想要给周末添加样式，只需要在 CSS 中这么写：

.cal-weekend {
  background-color: #eee;
}

效果如下：

col-group

对于规律的表单来说，这样的写法的确结构更加的清晰明了，而且优点在于不需要添加额外的类名。在写 HTML 笔记的时候路走窄了，没想到这一点。

为表格应用样式

  1. 设置日历背景色，调整字体颜色和超链接样式，为 td 中的日期添加超链接标签

  2. 给单元格添加合适的 padding 撑开盒子，并且单元格中的字体设置居中对齐

  3. 修改非当前月 日期的字体颜色，添加合适的类名

  4. 添加今天样式，添加合适的类名

  5. 增加悬浮时的效果

    这个时候就出现一个问题了，悬浮时边框无法完整显示：

    hover-issue

    在 CSS 的十个高级使用技巧 曾经提到过这个问题，理论上来说使用 position: relative; 或是设置 z-index: some-value; 可以解决这个问题。

    我试了一下，表格无效。

    在不想改变结构的情况下，也只能去动超链接了，用了 border 和 outline 去做，完成后效果是这样的：

    focus-ver2

虽然还不是很好看，但是基本的一些特性都有了，比起原本的看起来稍微好一些。

修改后的代码为：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table {
        background: #29323f;
      }
      caption {
        font-size: 18px;
        font-weight: 600;
        text-align: left;
      }
      table,
      th,
      td {
        position: relative;
        border-collapse: collapse;
        border: 1px solid transparent;
        z-index: 1;
      }
      table a,
      th {
        text-decoration: none;
        color: aliceblue;
      }
      td,
      th {
        text-align: center;
      }
      th {
        padding: 10px;
      }
      td a {
        display: inline-block;
        box-sizing: border-box;
        padding: 5px 8px;
        border: 1px solid transparent;
        margin: 2px;
      }
      .inactive a {
        color: #aaa;
      }
      .cal-current {
        background-color: #0080ff;
      }
      .cal-current a {
        font-weight: 600;
        border: 2px solid #000;
      }
      td a:hover {
        outline: 1px solid white;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>
        2021年 5月
      </caption>
      <colgroup>
        <col class="cal-mon" />
        <col class="cal-tue" />
        <col class="cal-wed" />
        <col class="cal-thu" />
        <col class="cal-fri" />
        <col class="cal-sat cal-weekend" />
        <col class="cal-sun cal-weekend" />
      </colgroup>
      <thead>
        <tr>
          <th>一</th>
          <th>二</th>
          <th>三</th>
          <th>四</th>
          <th>五</th>
          <th>六</th>
          <th>日</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="inactive"><a href="#"> 26 </a></td>
          <td class="inactive"><a href="#"> 27 </a></td>
          <td class="inactive"><a href="#"> 28 </a></td>
          <td class="inactive"><a href="#"> 29 </a></td>
          <td class="inactive"><a href="#"> 30 </a></td>
          <td><a href="#"> 1 </a></td>
          <td><a href="#"> 2 </a></td>
        </tr>
        <tr>
          <td><a href="#"> 3 </a></td>
          <td><a href="#"> 4 </a></td>
          <td><a href="#"> 5 </a></td>
          <td><a href="#"> 6 </a></td>
          <td><a href="#"> 7 </a></td>
          <td><a href="#"> 8 </a></td>
          <td><a href="#"> 9 </a></td>
        </tr>
        <tr>
          <td><a href="#"> 10 </a></td>
          <td><a href="#"> 11 </a></td>
          <td><a href="#"> 12 </a></td>
          <td><a href="#"> 13 </a></td>
          <td class="cal-current"><a href="#"> 14 </a></td>
          <td><a href="#"> 15 </a></td>
          <td><a href="#"> 16 </a></td>
        </tr>
        <tr>
          <td><a href="#"> 17 </a></td>
          <td>以上是关于精通 CSS 第 9 章 表单与数据表 学习笔记的主要内容，如果未能解决你的问题，请参考以下文章
 

 精通 CSS 第 10 章 变换过渡与动画 学习笔记


 精通 CSS 第 7 章学习笔记（上）


 精通 CSS 第 7 章学习笔记（下）


 精通 CSS 第 8 章 响应式布局 学习笔记


 精通 CSS 第 8 章 响应式布局 学习案例


 《从python精通到机器学习量化交易全栈学习》