---
title: 测试技能：表格
slug: Learn/CSS/Building_blocks/Tables_tasks
tags:
  - Beginner
  - CSS
  - Example
translation_of: Learn/CSS/Building_blocks/Tables_tasks
---
<div>{{LearnSidebar}}</div>



<p>此任务的目的是为了帮助你检测在<u><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></u>课程中学到的技巧的理解。</p>

<div class="blockIndicator note">
<p><strong>Note</strong>: You can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a> to work on the tasks.<br>
 <br>
 If you get stuck, then ask us for help — see the <a href="#assessment_or_further_help">Assessment or further help</a> section at the bottom of this page.</p>
</div>

<h2 id="任务">任务</h2>

<p>在之前的课程中，我们以一种杀马特的方式样式化了一个表格。在这个任务中，我们打算样式化同样的表格，但是使用一些在外部文章<u><a href="https://alistapart.com/article/web-typography-tables/">Web排版：设计可读而不是可看的表格</a></u>概述的表格设计良好实践。</p>

<p>我们要完成的表格如下图所示。完成这个任务有许多方法，但是我建议你使用和向导中所用的相似的模式来完成以下的事情。</p>

<ul>
 <li>把标题和包含数字的列数据右对齐</li>
 <li>把标题和包含文本的列数据左对齐</li>
 <li>添加顶部和底部边框，以及页脚上方的边框</li>
 <li>将主表的所有奇数行条纹化</li>
</ul>

<p><img alt="A table with striped rows." src="https://mdn.mozillademos.org/files/17145/mdn-table-bands.png" style="height: 710px; width: 1266px;"></p>

<p>{{EmbedGHLiveSample("css-examples/learn/tasks/tables/table.html", '100%', 1000)}}</p>

<div class="blockIndicator note">
<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/tables/table-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p>
</div>

<h2 id="Assessment_or_further_help">Assessment or further help</h2>

<p>You can practice these examples in the Interactive Editors mentioned above.</p>

<p>If you would like your work assessed, or are stuck and want to ask for help:</p>

<ol>
 <li>Put your work into an online shareable editor such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a>. You can write the code yourself, or use the starting point files linked to in the above sections.</li>
 <li>Write a post asking for assessment and/or help at the <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Your post should include:
  <ul>
   <li>A descriptive title such as "Assessment wanted for tables skill test".</li>
   <li>Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.</li>
   <li>A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.</li>
   <li>A link to the actual task or assessment page, so we can find the question you want help with.</li>
  </ul>
 </li>
</ol>