path: root/files/zh-cn/conflicting/learn/css/building_blocks/styling_tables/index.html

---
title: 表格
slug: conflicting/Learn/CSS/Building_blocks/Styling_tables
translation_of: Learn/CSS/Building_blocks/Styling_tables
translation_of_original: Web/Guide/CSS/Getting_started/Tables
original_slug: Web/Guide/CSS/Getting_started/Tables
---
<p>{{CSSTutorialTOC}}{{previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Layout", "布局")}}</p>

<p>这是<a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started">CSS入门教程</a>的第13部分，将介绍更多高级的选择器，以及格式表格的一些特定方法。你将创建一个包含表格的新样例文档，然后对它进行样式排版。</p>

<h2 class="clearLeft" id="信息_表格">信息: 表格</h2>

<p>表格是一个矩形网格中的信息安排。一些表格相当复杂，不同的浏览器对复杂的表格将会有不同的展示结果。</p>

<p>当你设计你的文档时，使用一个表格来表示一系列信息的<a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selectors#relselectors">关系</a>。因为信息的意义依然清晰，所以不同浏览器用稍微不同的方式来展示表格是没有关系的。</p>

<p>创建表格的时候，不要用一些非常规的方式构造特殊的可视化布局，本教程的前一页（<a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Layout">布局</a>）使用的技术可以更好的达成目的。</p>

<h3 id="表格结构">表格结构</h3>

<p>在表格中，信息显示在一个个的<em>单元格</em>（<em>cell</em>）中.</p>

<p>在页面横向上一条直线的单元格构成了<em>行</em>（<em>row</em>）。</p>

<p>在一些表格中，行可能被分组。表格开始的特定的行组是<em>表头</em> （<em>header</em>）。表格最后的特定行组是<em>表尾</em>（<em>footer</em>）。表格中主要的行就是<em>表体</em>（<em>body</em>），这些表体也可能被分组。</p>

<p>在页面纵向上一条直线的单元格构成了<em>列</em>（<em>column</em>），但是在CSS表格中，列的使用是受限的。</p>

<div class="tuto_example">
<div class="tuto_type">示例</div>

<p>在<a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selectors">选择器</a>那章的<a href="/zh-CN/Web/Guide/CSS/Getting_Started/Selectors#relselectors">基于关系的选择器</a>就是一个五行十个单元格的表格。</p>

<p>第一行是表头，其余四行是表体，没有表尾。</p>

<p>表中有两列。</p>
</div>

<p>本教程仅仅涵盖简单表格，其呈现结果完全可以预测。在一个简单表格里，每个单元格仅占用一行一列。你可以用CSS将一个单元格扩展到多行或者多列来构造复杂表格，但是这样的表格已超出了这个基本教程所讲述的范围。</p>

<h3 id="边框">边框</h3>

<p>单元格没有外边距。</p>

<p>但是单元格有边框和内边距。默认情况下，边框被表格的{{cssxref("border-spacing")}}属性值间隔。你也可以通过设置表格的{{cssxref("border-collapse")}}属性值为collapse来完全移除间隔。</p>

<div class="tuto_example">
<div class="tuto_type">示例</div>

<p>这有三个表格。</p>

<p>左边的表格有0.5 em的边框间隔，中间的表格是0边框间隔，右边的表格是拥有collapse的边框。</p>

<div style="background-color: white; border: 2px outset #36b; padding: 1em; display: inline-block;">
<table style="background-color: lime; border-collapse: separate; display: inline-block;">
 <tbody>
  <tr>
   <td style="border: 1px solid #c00; text-align: center;">Clubs</td>
   <td style="border: 1px solid #c00; text-align: center;">Hearts</td>
  </tr>
  <tr>
   <td style="border: 1px solid #c00; text-align: center;">Diamonds</td>
   <td style="border: 1px solid #c00; text-align: center;">Spades</td>
  </tr>
 </tbody>
</table>

<table style="background-color: lime; border-collapse: separate; display: inline-block; margin-left: 2em;">
 <tbody>
  <tr>
   <td style="border: 1px solid #c00; text-align: center;">Clubs</td>
   <td style="border: 1px solid #c00; text-align: center;">Hearts</td>
  </tr>
  <tr>
   <td style="border: 1px solid #c00; text-align: center;">Diamonds</td>
   <td style="border: 1px solid #c00; text-align: center;">Spades</td>
  </tr>
 </tbody>
</table>

<table style="background-color: lime; border-collapse: collapse; display: inline-block; margin-left: 2em;">
 <tbody>
  <tr>
   <td style="border: 1px solid #c00; text-align: center;">Clubs</td>
   <td style="border: 1px solid #c00; text-align: center;">Hearts</td>
  </tr>
  <tr>
   <td style="border: 1px solid #c00; text-align: center;">Diamonds</td>
   <td style="border: 1px solid #c00; text-align: center;">Spades</td>
  </tr>
 </tbody>
</table>
</div>

<h3 id="标题">标题</h3>

<p>{{HTMLElement("caption")}}元素是用在整个表格的一个标签。默认下，它显示在表格的顶部。</p>

<p>可以设置{{HTMLElement("caption")}}的{{cssxref("caption-side")}}属性值为bottom来将标签移到表格的底部。</p>

<p>想要样式化caption的文本，可以使用任何常规的文本属性。</p>

<div class="tuto_example">
<div class="tuto_type">示例</div>

<p>这个表格有一个在底部的标题。</p>

<pre class="brush: css">#demo-table &gt; caption {
  caption-side: bottom;
  font-style: italic;
  text-align: right;
}
</pre>

<table style="background-color: white; border: 2px outset #3366bb; padding: 1em 6em 1em 1em;">
 <tbody>
  <tr>
   <td>
    <table>
     <caption>Suits</caption>
     <tbody>
      <tr>
       <td>
        <table style="border-collapse: collapse;">
         <tbody>
          <tr>
           <td style="border: 1px solid gray; text-align: center;">Clubs</td>
           <td style="border: 1px solid gray; text-align: center;">Hearts</td>
          </tr>
          <tr>
           <td style="border: 1px solid gray; text-align: center;">Diamonds</td>
           <td style="border: 1px solid gray; text-align: center;">Spades</td>
          </tr>
         </tbody>
        </table>
       </td>
      </tr>
     </tbody>
    </table>
   </td>
  </tr>
 </tbody>
</table>
</div>

<h3 id="空单元格">空单元格</h3>

<p>你可以通过为表格元素指定{{cssxref("empty-cells")}}属性值show来显示空单元格（就是其边框和背景）。</p>

<p>你也可以指定empty-cells: hide;来隐藏边框和背景，那么如果一个单元格的父元素设置了背景，背景将通过空单元格显示出来。</p>

<div class="tuto_example">
<div class="tuto_type">实例</div>

<p>这些表格有苍绿色的背景，其单元格有苍灰色的背景和深灰色的边框。</p>

<p>左边的表格，空单元格是显示的。在右边，空单元格是隐藏的。</p>

<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
 <tbody>
  <tr>
   <td style="padding-right: 2em;">
    <table style="background-color: #ddffdd;">
     <tbody>
      <tr>
       <td style="border: 1px solid #555; background-color: #eee;"> </td>
       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td>
      </tr>
      <tr>
       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td>
       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td>
      </tr>
     </tbody>
    </table>
   </td>
   <td style="padding-right: 6em;">
    <table style="background-color: #ddffdd;">
     <tbody>
      <tr>
       <td> </td>
       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td>
      </tr>
      <tr>
       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td>
       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td>
      </tr>
     </tbody>
    </table>
   </td>
  </tr>
 </tbody>
</table>
</div>

<div class="tuto_details">
<div class="tuto_type">细节</div>

<p>请查看CSS规范中的<a href="http://www.w3.org/TR/CSS21/tables.html">表格</a>来获得更多关于表格的细节信息。</p>

<p>规范中有比该教程更进一步的信息，但它不包括浏览器可能会影响复杂表格之间的差异。</p>
</div>

<h2 id="实例_设计表格样式">实例: 设计表格样式</h2>

<ol>
 <li>创建一个新的HTML文档, <code>doc3.html。</code> 复制粘贴以下内容，请确保通过滚动获取全部内容：

  <div style="height: 36em; overflow: auto;">
  <pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Sample document 3&lt;/title&gt;
    &lt;link rel="stylesheet" href="style3.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;table id="demo-table"&gt;
      &lt;caption&gt;Oceans&lt;/caption&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;&lt;/th&gt;
          &lt;th&gt;Area&lt;/th&gt;
          &lt;th&gt;Mean depth&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th&gt;&lt;/th&gt;
          &lt;th&gt;million km&lt;sup&gt;2&lt;/sup&gt;&lt;/th&gt;
          &lt;th&gt;m&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;th&gt;Arctic&lt;/th&gt;
          &lt;td&gt;13,000&lt;/td&gt;
          &lt;td&gt;1,200&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th&gt;Atlantic&lt;/th&gt;
          &lt;td&gt;87,000&lt;/td&gt;
          &lt;td&gt;3,900&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th&gt;Pacific&lt;/th&gt;
          &lt;td&gt;180,000&lt;/td&gt;
          &lt;td&gt;4,000&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th&gt;Indian&lt;/th&gt;
          &lt;td&gt;75,000&lt;/td&gt;
          &lt;td&gt;3,900&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th&gt;Southern&lt;/th&gt;
          &lt;td&gt;20,000&lt;/td&gt;
          &lt;td&gt;4,500&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;tfoot&gt;
        &lt;tr&gt;
          &lt;th&gt;Total&lt;/th&gt;
          &lt;td&gt;361,000&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th&gt;Mean&lt;/th&gt;
          &lt;td&gt;72,000&lt;/td&gt;
          &lt;td&gt;3,800&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tfoot&gt;
    &lt;/table&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>
  </div>
 </li>
 <li>创建一个新的样式表 <code>style3.css。复制粘贴一些内容，通过滚动获取全部内容：</code>
  <pre class="brush: css">/*** Style for doc3.html (Tables) ***/

#demo-table {
  font: 100% sans-serif;
  background-color: #efe;
  border-collapse: collapse;
  empty-cells: show;
  border: 1px solid #7a7;
}

#demo-table &gt; caption {
  text-align: left;
  font-weight: bold;
  font-size: 200%;
  border-bottom: .2em solid #4ca;
  margin-bottom: .5em;
}


/* basic shared rules */
#demo-table th,
#demo-table td {
  text-align: right;
  padding-right: .5em;
}

#demo-table th {
  font-weight: bold;
  padding-left: .5em;
}


/* header */
#demo-table &gt; thead &gt; tr:first-child &gt; th {
  text-align: center;
  color: blue;
}

#demo-table &gt; thead &gt; tr + tr &gt; th {
  font-style: italic;
  color: gray;
}

/* fix size of superscript */
#demo-table sup {
  font-size: 75%;
}

/* body */
#demo-table td {
  background-color: #cef;
  padding:.5em .5em .5em 3em;
}

#demo-table tbody th:after {
  content: ":";
}


/* footer */
#demo-table tfoot {
  font-weight: bold;
}

#demo-table tfoot th {
  color: blue;
}

#demo-table tfoot th:after {
  content: ":";
}

#demo-table &gt; tfoot td {
  background-color: #cee;
}

#demo-table &gt; tfoot &gt; tr:first-child td {
  border-top: .2em solid #7a7;
}
</pre>
 </li>
 <li>在浏览器打开文档，它将看起来像下面一样：
  <table style="background-color: white; border: 2px outset #3366bb; padding: 1em 6em 1em 1em;">
   <tbody>
    <tr>
     <td>
      <div>
      <p style="font: bold 200% sans-serif; text-align: left; border-bottom: .2em solid #4ca; margin: 0px 0px .5em 0px;">Oceans</p>

      <div style="border: 1px solid #7a7; background-color: #efe;">
      <table style="background-color: #eeffee; border-collapse: collapse; font: 100% sens-serif; padding-right: .5em; text-align: right;">
       <tbody>
        <tr style="text-align: center; color: blue;">
         <th> </th>
         <th>Area</th>
         <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th>
        </tr>
        <tr style="font-style: italic; color: gray;">
         <th> </th>
         <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th>
         <th style="padding-left: .5em; padding-right: .5em;">m</th>
        </tr>
        <tr>
         <th style="padding-right: .5em;">Arctic:</th>
         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">13,000</td>
         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">1,200</td>
        </tr>
        <tr>
         <th style="padding-right: .5em;">Atlantic:</th>
         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">87,000</td>
         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td>
        </tr>
        <tr>
         <th style="padding-right: .5em;">Pacific:</th>
         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">180,000</td>
         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,000</td>
        </tr>
        <tr>
         <th style="padding-right: .5em;">Indian:</th>
         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">75,000</td>
         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td>
        </tr>
        <tr>
         <th style="padding-left: .5em; padding-right: .5em;">Southern:</th>
         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">20,000</td>
         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,500</td>
        </tr>
        <tr>
         <th style="padding-right: .5em; color: blue;">Total:</th>
         <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td>
         <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td>
        </tr>
        <tr>
         <th style="padding-right: .5em; color: blue;">Mean:</th>
         <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td>
         <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td>
        </tr>
       </tbody>
      </table>
      </div>
      </div>
     </td>
    </tr>
   </tbody>
  </table>
 </li>
 <li>对比样式表里显示表格的规则来确保你理解每一条规则的效果。如果你发现你不明白某一条，注释掉，然后刷新浏览器来看看发生什么。下面是关于该表格一些注意事项：
  <ul>
   <li>标题是放在表格边框的外面的;</li>
   <li>如果你在可选项中设置了最小点尺寸，它可能会影响km<sup>2</sup>这样的上标;</li>
   <li>有三个空单元格，其中两个显示了表格的背景色，第三个有单元格自己的背景和上边框;</li>
   <li>冒号是通过样式表来添加的。</li>
  </ul>
 </li>
</ol>

<div class="tuto_example">
<div class="tuto_type">挑战</div>

<p>更改样式表来使表格像下面一样显示：</p>

<table style="background-color: white; border: 2px outset #3366bb; padding: 1em 6em 1em 1em;">
 <tbody>
  <tr>
   <td>
    <div>
    <div style="border: 1px solid #7a7; background-color: #efe;">
    <table style="background-color: #eeffee; border-collapse: collapse; font: 100% sens-serif; padding-right: .5em; text-align: right;">
     <tbody>
      <tr style="text-align: center; color: blue;">
       <th> </th>
       <th>Area</th>
       <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th>
      </tr>
      <tr style="font-style: italic; color: gray;">
       <th> </th>
       <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th>
       <th style="padding-left: .5em; padding-right: .5em;">m</th>
      </tr>
      <tr>
       <th style="padding-right: .5em;">Arctic:</th>
       <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">13,000</td>
       <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">1,200</td>
      </tr>
      <tr>
       <th style="padding-right: .5em;">Atlantic:</th>
       <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">87,000</td>
       <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td>
      </tr>
      <tr>
       <th style="padding-right: .5em;">Pacific:</th>
       <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">180,000</td>
       <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,000</td>
      </tr>
      <tr>
       <th style="padding-right: .5em;">Indian:</th>
       <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">75,000</td>
       <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td>
      </tr>
      <tr>
       <th style="padding-left: .5em; padding-right: .5em;">Southern:</th>
       <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">20,000</td>
       <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,500</td>
      </tr>
      <tr>
       <th style="padding-right: .5em; color: blue;">Total:</th>
       <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td>
       <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td>
      </tr>
      <tr>
       <th style="padding-right: .5em; color: blue;">Mean:</th>
       <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td>
       <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td>
      </tr>
     </tbody>
    </table>
    </div>

    <p style="font: italic 100% sans-serif; text-align: right; border-top: .4em solid #4ca; margin: 1em 0px 0px 0px;">Oceans</p>
    </div>
   </td>
  </tr>
 </tbody>
</table>
</div>

<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Tables" title="en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Tables">查看</a>挑战的答案。</p>

<h2 id="接下来">接下来?</h2>

<p>{{nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Media", "媒体")}}这是本教程关于CSS属性和值的最后一页。请查看CSS规范中的<a href="http://www.w3.org/TR/CSS21/propidx.html">完全属性表</a>来获得完整的属性和值的信息。</p>

<p><a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Media">下一页</a>将再次着眼于CSS样式表的目的和结构。</p>
</div>