caption-side

caption-side 属性规定表格标题的位置。

 

语法

caption
{
caption-side:bottom;
}

值

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

例子

HTML 

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

CSS 

caption {caption-side:bottom;}

执行结果

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

注意:如果 !DOCTYPE 指定 IE 8 支持 caption-side 属性 .

参考

相关页面

外部链接


跳至内容顶部