Styling tables

2018-05-15 17:26 更新
先決條件: HTML基礎(chǔ)(學(xué)習(xí) HTML簡介)，HTML表格(請參閱HTML表格模塊(TBD))以及CSS的工作原理(研究 "/ webstart / Introduction_to_CSS"> CSS簡介)。
目的: 了解如何有效地對HTML表格進(jìn)行樣式化。

典型的HTML表格

讓我們從一個(gè)典型的HTML表開始。 好吧，我說典型 - 大多數(shù)HTML表的例子是關(guān)于鞋子，天氣，或員工; 我們決定讓它更有趣的是，從英國著名的朋克樂隊(duì)。 標(biāo)記看起來像這樣:

<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> 等。不幸的是，它在屏幕上呈現(xiàn)時(shí)看起來不太好看(見 styling-tables / punk-bands-unstyled.html"class ="external"> punk-bands-unstyled.html ):

它只是看起來狹窄，很難閱讀，無聊。 我們需要使用一些CSS來解決這個(gè)問題。

主動(dòng)學(xué)習(xí):定型我們的表

在這個(gè)主動(dòng)學(xué)習(xí)部分，我們將通過整理我們的表示例工作。

  1. 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.
  2. Next, create a new file called style.css and save it in the same directory as your other files.
  3. 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">

間距和布局

我們需要做的第一件事是整理出間距/布局 - 默認(rèn)表格樣式是如此狹窄！ 為此，請將以下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.

在這一點(diǎn)上，我們的表已經(jīng)看起來好多了:

一些簡單的排版

現(xiàn)在我們得到我們的類型整理一下。

首先，我們已經(jīng)在 Google字體上找到了一個(gè)字體，適用于有關(guān)朋克的表格 頻帶。 你可以去那里，找到一個(gè)不同的，如果你喜歡; 您只需要替換我們提供的 < link> 元素和自定義 font-family >聲明與谷歌字體給你。

首先，添加以下 < link> 元素插入到您的HTML頭部中，位于現(xiàn)有的< link> 元素上方:

<link  rel='stylesheet' type='text/css'>

現(xiàn)在將以下CSS添加到您的 style.css 文件中，在上一個(gè)添加項(xiàng)下面:

/* 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;
}

沒有什么真正特定于這里的表; 我們通常調(diào)整字體樣式以使事情更容易閱讀:

  • 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.

結(jié)果看起來有點(diǎn)干凈:

圖形和顏色

現(xiàn)在上圖形和顏色！ 因?yàn)楸碇谐錆M了朋克和態(tài)度，我們需要給它一些明亮的強(qiáng)加造型來適應(yīng)。 不要擔(dān)心，你不必讓你的表這么大 - 你可以選擇更微妙和品味的東西。

首先，將以下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 設(shè)置為白色 它是 text-shadow )，因此它是 可讀。 您應(yīng)該始終確保您的文本與您的背景對比良好，因此它是可讀的。

我們還向 < th> 添加了線性漸變 > 和 < td> >元素里面的頁眉和頁腳一個(gè)漂亮的一點(diǎn)紋理，以及給這些元素一個(gè)明亮的紫色邊框。 有多個(gè)嵌套元素可用，因此您可以將樣式層疊在一起。 是的，我們可以將背景圖片和線性漸變放在 < ; thead> 和 < tfoot> 元素使用多個(gè)背景圖片，但我們決定單獨(dú)進(jìn)行，以支持不支持多個(gè)背景圖片或線性漸變的舊版瀏覽器。

Zebra striping

我們希望分開一節(jié)，向您展示如何實(shí)現(xiàn)斑馬紋 - 交替的顏色行，使表格中不同的數(shù)據(jù)行更容易解析和閱讀。 將以下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.

這種顏色爆炸結(jié)果如下:

現(xiàn)在，這可能有點(diǎn)超過頂部，而不是你的味道，但我們試圖在這里的點(diǎn)是，表不一定是無聊和學(xué)術(shù)。

為字幕設(shè)定樣式

有最后一件事我們的表 - 風(fēng)格的標(biāo)題。 為此，請將以下內(nèi)容添加到 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 。 這使得標(biāo)題位于表的底部，這與其他聲明一起給我們最后的樣子(見它現(xiàn)在在 /styling-boxes/styling-tables/punk-bands-complete.html"class ="external"> punk-bands-complete.html ):

;">

主動(dòng)學(xué)習(xí):創(chuàng)建自己的表

在這一點(diǎn)上，我們希望你把我們的示例表HTML(或使用你自己的！)和風(fēng)格，使得一個(gè)更好的設(shè)計(jì)，比我們的桌子更少的garish。

表樣式的快速提示

在繼續(xù)之前，我們認(rèn)為我們將為您提供上面列出的最有用的點(diǎn)的快速列表:

  • 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.

概要

隨著現(xiàn)在擺在我們后面的頭暈?zāi)垦５母叨?，我們需要?jiǎng)e的東西占據(jù)我們的時(shí)間。 不要害怕 - 下一章提供了一些高級的盒子效果，其中一些只是最近降落在瀏覽器(如混合模式和過濾器)，其中一些有點(diǎn)更成熟(如盒陰影)。

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)