Styling tables

先决条件:	HTML基础(学习 HTML简介)，HTML表格(请参阅HTML表格模块(TBD))以及CSS的工作原理(研究 "/ webstart / Introduction_to_CSS"> CSS简介)。
目的:	了解如何有效地对HTML表格进行样式化。

典型的HTML表格

让我们从一个典型的HTML表开始。好吧，我说典型 - 大多数HTML表的例子是关于鞋子，天气，或员工; 我们决定让它更有趣的是，从英国着名的朋克乐队。标记看起来像这样:

<table summary="The most famous UK punk bands">
  <caption>A summary of the UK's most famous punk bands</caption>
  <thead>
    <tr>
      <th scope="col">Band</th>
      <th scope="col">Year formed</th>
      <th scope="col">No. of Albums</th>
      <th scope="col">Most famous song</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Buzzcocks</th>
      <td>1976</td>
      <td>9</td>
      <td>Ever fallen in love (with someone you shouldn't've)</td>
    </tr>
    <tr>
      <th scope="row">The Clash</th>
      <td>1976</td>
      <td>6</td>
      <td>London Calling</td>
    </tr>
       
      ... some rows removed for brevity

    <tr>
      <th scope="row">The Stranglers</th>
      <td>1974</td>
      <td>17</td>
      <td>No More Heroes</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="2">Total albums</th>
      <td colspan="2">77</td>
    </tr>
  </tfoot>
</table>

通过 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> attr-scope"> scope ，， summary">摘要 ， < thead> ， < tbody> 等。不幸的是，它在屏幕上呈现时看起来不太好看(见 styling-tables / punk-bands-unstyled.html"class ="external"> punk-bands-unstyled.html ):

它只是看起来狭窄，很难阅读，无聊。我们需要使用一些CSS来解决这个问题。

主动学习:定型我们的表

在这个主动学习部分，我们将通过整理我们的表示例工作。

To start with, make a local copy of the sample markup, download both images (noise and leopardskin), and put the three resulting files in a working directory somewhere on your local computer.
Next, create a new file called style.css and save it in the same directory as your other files.
Link the CSS to the HTML by placing the following line of HTML inside your <head>:
```
<link href="style.css" rel="stylesheet" type="text/css">
```

间距和布局

我们需要做的第一件事是整理出间距/布局 - 默认表格样式是如此狭窄！为此，请将以下CSS添加到您的 style.css 文件中:

/* spacing */

table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border: 3px solid purple;
}

thead th:nth-child(1) {
  width: 30%;
}

thead th:nth-child(2) {
  width: 20%;
}

thead th:nth-child(3) {
  width: 15%;
}

thead th:nth-child(4) {
  width: 35%;
}

th, td {
  padding: 20px;
}

要注意的最重要的部分如下:

A table-layout value of fixed is generally a good idea to set on your table, as it makes the table behave a bit more predictably by default. Normally, table columns tend to be sized according to how much content they contain, which produces some strange results. With table-layout: fixed, you can size your columns according to the width of their headings, and then deal with their content as appropriate. This is why we've selected the four different headings with the thead th:nth-child(n) (:nth-child) selector ("Select the nth child that is a <th> element in a sequence, inside a <thead> element") and given them set percentage widths. The entire column width follows the width of its heading, making for a nice way to size your table columns. Chris Coyier discusses this technique in more detail in Fixed Table Layouts.

We've coupled this with a width of 100%, meaning that the table will fill any container it is put in, and be nicely responsive (although it would still need to some more work to get it looking good on narrow screen widths).
A border-collapse value of collapse is a standard best practice for any table style effort. By default, when you set borders on table elements, they will all have spacing between them, as the below image illustrates: This doesn't look very nice (although it might be the look you want, who knows?) With border-collapse: collapse; set, the borders collapse down into one, which looks much better:
We've put a border around the whole table, which is needed because we'll be putting some borders round the table header and footer later on — it looks really odd and disjointed when you don't have a border round the whole outside of the table and end up with gaps.
We've set some padding on the <th> and <td> elements — this gives the data items some space to breathe, making the table look a lot more legible.

在这一点上，我们的表已经看起来好多了:

一些简单的排版

现在我们得到我们的类型整理一下。

首先，我们已经在 Google字体上找到了一个字体，适用于有关朋克的表格频带。你可以去那里，找到一个不同的，如果你喜欢; 您只需要替换我们提供的 < link> 元素和自定义 font-family >声明与谷歌字体给你。

首先，添加以下 < link> 元素插入到您的HTML头部中，位于现有的< link> 元素上方:

<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>

现在将以下CSS添加到您的 style.css 文件中，在上一个添加项下面:

/* typography */

html {
  font-family: 'helvetica neue', helvetica, arial, sans-serif;
}

thead th, tfoot th {
  font-family: 'Rock Salt', cursive;
}

th {
  letter-spacing: 2px;
}

td {
  letter-spacing: 1px;
}

tbody td {
  text-align: center;
}

tfoot th {
  text-align: right;
}

没有什么真正特定于这里的表; 我们通常调整字体样式以使事情更容易阅读:

We have set a global sans-serif font stack; this is purely a stylistic choice. We've also set our custom font on the headings inside the <thead> and <tfoot> elements, for a nice grungy, punky look.
We've set some letter-spacing on the headings and cells, as we feel it aids readability. Again, mostly a stylistic choice.
We've center-aligned the text in the table cells inside the <tbody> so that they line up with the headings. By default, cells are given a text-align value of left, and headings are given a value of center, but generally it looks better to have the alignments set the same for both. The default bold weight on the heading fonts is enough to differentiate their look.
We've right-aligned the heading inside the <tfoot> so that it is visually associated better with its data point.

结果看起来有点干净:

图形和颜色

现在上图形和颜色！因为表中充满了朋克和态度，我们需要给它一些明亮的强加造型来适应。不要担心，你不必让你的表这么大 - 你可以选择更微妙和品味的东西。

首先，将以下CSS添加到style.css文件，再次在底部:

thead, tfoot {
  background: url(leopardskin.jpg);
  color: white;
  text-shadow: 1px 1px 1px black;
}

thead th, tfoot th, tfoot td {
  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
  border: 3px solid purple;
}

同样，这里没有特定的表，但值得注意一些事情。

我们已将 背景图片 添加到 < thead> 和 ="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/tfoot"> < tfoot> ，并更改了将页眉和页脚中所有文本的"https://developer.mozilla.org/zh-CN/docs/Web/CSS/color"> color 设置为白色它是 text-shadow )，因此它是可读。您应该始终确保您的文本与您的背景对比良好，因此它是可读的。

我们还向 < th> 添加了线性渐变 > 和 < td> >元素里面的页眉和页脚一个漂亮的一点纹理，以及给这些元素一个明亮的紫色边框。有多个嵌套元素可用，因此您可以将样式层叠在一起。是的，我们可以将背景图片和线性渐变放在 < ; thead> 和 < tfoot> 元素使用多个背景图片，但我们决定单独进行，以支持不支持多个背景图片或线性渐变的旧版浏览器。

Zebra striping

我们希望分开一节，向您展示如何实现斑马纹 - 交替的颜色行，使表格中不同的数据行更容易解析和阅读。将以下CSS添加到 style.css 文件的底部:

tbody tr:nth-child(odd) {
  background-color: #ff33cc;
}

tbody tr:nth-child(even) {
  background-color: #e495e4;
}

tbody tr {
  background-image: url(noise.png);
}

table {
  background-color: #ff33cc;
}

Earlier on you saw the :nth-child selector being used to select specific child elements. It can also be given a formula as a parameter, so it will select a sequence of elements. The formula 2n-1 would select all the odd numbered children (1, 3, 5, etc.) and the formula 2n would select all the even numbered children (2, 4, 6, etc.) We've used the odd and even keywords in our code, which do exactly the same things as the aforementioned formulae. In this case we are giving the odd and even rows different (lurid) colors.
We've also added a repeating background tile to all the body rows, which is just a bit of noise (a semi-transparent .png with a bit of visual distortion on it) to provide some texture.
Lastly, we've given the entire table a solid background color so that browsers that don't support the :nth-child selector still have a background for their body rows.

这种颜色爆炸结果如下:

现在，这可能有点超过顶部，而不是你的味道，但我们试图在这里的点是，表不一定是无聊和学术。

为字幕设定样式

有最后一件事我们的表 - 风格的标题。为此，请将以下内容添加到 style.css 文件的底部:

caption {
  font-family: 'Rock Salt', cursive;
  padding: 20px;
  font-style: italic;
  caption-side: bottom;
  color: #666;
  text-align: right;
  letter-spacing: 1px;
}

除了 字幕端 / a>属性，它的值为 bottom 。这使得标题位于表的底部，这与其他声明一起给我们最后的样子(见它现在在 /styling-boxes/styling-tables/punk-bands-complete.html"class ="external"> punk-bands-complete.html ):

;">

主动学习:创建自己的表

在这一点上，我们希望你把我们的示例表HTML(或使用你自己的！)和风格，使得一个更好的设计，比我们的桌子更少的garish。

表样式的快速提示

在继续之前，我们认为我们将为您提供上面列出的最有用的点的快速列表:

Make your table markup as simple as possible, and keep things flexible, e.g. by using percentages, so the design is more responsive.
Use table-layout: fixed to create a more predictable table layout that allows you to easily set column widths by setting width on their headings (<th>).
Use border-collapse: collapse to make table elements borders collapse into each other, producing a neater and easier to control look.
Use <thead>, <tbody>, and <tfoot> to break up your table into logical chunks and provide extra places to apply CSS to, so it is easier to layer styles on top of one another if required.
Use zebra striping to make alternative rows easier to read.
Use text-align to line up your <th> and <td> text, to make things neater and easier to follow.

概要

随着现在摆在我们后面的头晕目眩的高度，我们需要别的东西占据我们的时间。不要害怕 - 下一章提供了一些高级的盒子效果，其中一些只是最近降落在浏览器(如混合模式和过滤器)，其中一些有点更成熟(如盒阴影)。

w3cschool 编程狮，随时随地学编程

Styling tables

典型的HTML表格

主动学习:定型我们的表

间距和布局

一些简单的排版

图形和颜色

Zebra striping

为字幕设定样式

主动学习:创建自己的表

表样式的快速提示

概要

Web开发入门

HTML—构建网络

HTML介绍

Multimedia_and_embedding

Introduction_to_CSS

Accessibility

Styling_text

First_steps

Tools_and_testing

Building_blocks

CSS_layout

Objects

Express_Nodejs

Django