秦小

CSSMM4E 笔记 - 2.11 - 格式化表格和表单

发表于 | 分类于

正确使用表格

仅用于表格的 HTML 标签:

  1. <table>
  2. <caption>
  3. <colgroup>
  4. <col>
  5. <thead>
  6. <tbody>
  7. <tr>
  8. <th>
  9. <td>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<table>
  <caption align="bottom">
    Table 1: CosmoFarmer.com's Indoor Mower Roundup
  </caption>
  <colgroup>
    <col class="brand" />
    <col class="price" />
    <col class="power" />
  </colgroup>
  <thead>
    <tr>
      <th scope="col">Brand</th>
      <th scope="col">Price</th>
      <th scope="col">Power Source</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Chinook Push-o-matic Indoor Mower</td>
      <td>$247.00</td>
      <td>Mechanical</td>
    </tr>
    <tr>
      <td>Sampson Deluxe Apartment Mower</td>
      <td>$370.00</td>
      <td>Mechanical</td>
    </tr>
  </tbody>
</table>

表格样式

添加留白

1
td, th { padding: 10px; }

横向、竖向对齐

1
2
3
table { text-align: right; }        /* text-align is an inherited property */
th, td { vertical-align: center; }  /* vertical-align is NOT inherited */
vertical-align: top | baseline | middle | bottom;


表格边框

对table 使用border, 只影响table最外面的border;
对td, th使用border, 会产生可见的cells间的空隙.

  • 单元格间的空隙

    1
    2
    3
    table {
      border-spacing: 0;
    }

  • 消除双边框

    1
    2
    3
    table {
      border-collapse: collapse | separate(D);
    }

  • 圆角

    1
    2
    3
    4
    5
    td {
      border: 1px solid black;
      /* 如果设置了border-collapse, radius将被忽略. */
      border-radius: 5px;
    }

行、列的样式

1
2
.products tr:nth-of-type(odd) {}
.products tr:nth-of-type(even) {}

HTML用<colgroup>, <col> 来为列分组. 可以用它们来(类选择器)来style列.

1
2
3
4
5
...
<col class="price">
...
.price { width: 200px; }

Note: 通常浏览器会显示空cell的border和background color.
如果想hide它们, table { empty-cells: hide; }
但 border-collapse: collapse; 会使其无效.

表单样式

HTML表单元素

  • Fieldset - <fieldset>
  • Legend - <legend> Fieldset 的标题
  • Text field - <input type="text | password | textarea">
  • Button - <input type="submit | button">
  • Drop-down menu - <select>
  • Checkbox / radio - <input type="checkbox | radio">

CSS布局表单

  1. Wrap each label in a tag
    对 radio, <span class="label">What's your favorite color?</span>
    其他, <label>Label</label><input =type="text" />

  2. Set the display property to inline-block, and set a width

    1
    2
    3
    4
    .label {
      display: inline-block;
      width: 20em;
    }

  3. Adjust the style

    1
    2
    3
    4
    5
    6
    7
    .label {
      float: left;
      width: 20em;
      vertical-align: top;
      text-align: right;
      margin-right: 15px;
    }

伪类和表单

:focus, :ckecked, :enabled :disabled

http://html5doctor.com/css3-pseudo-classes-and-html5-forms/