CSS caption-side 属性

指定表格标题的位置：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    caption {
      caption-side: bottom;
    }
  </style>
</head>

<body>

  <table border="1">
    <caption>Table 1.1 Customers</caption>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Berglunds snabbköp</td>
      <td>Christina Berglund</td>
      <td>Sweden</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Ernst Handel</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td>Island Trading</td>
      <td>Helen Bennett</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
    <tr>
      <td>North/South</td>
      <td>Simon Crowther</td>
      <td>UK</td>
    </tr>
  </table>

  <p><b>注意:</b>如果 !DOCTYPE 指定 IE 8 支持 caption-side 属性 .</p>
</body>
</html>

尝试一下 »

属性定义及使用说明

Tcaption-side 属性设置表格标题的位置。

默认值： top
继承性： yes
版本： CSS2
JavaScript 语法： object.style.captionSide="bottom"

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流浏览器都支持caption-side属性。

注意：IE8只有指定!DOCTYPE才支持caption-side属性。

属性值

值 描述
top 默认值。把表格标题定位在表格之上。
bottom 把表格标题定位在表格之下。
inherit 规定应该从父元素继承 caption-side 属性的值。

相关文章

CSS 教程: CSS Table