在今天的现代方式中使用“标题”HTML元素的最合适方式是什么?

时间:2010-11-13 08:16:21

标签: html css image templates caption

它们是否与CSS一起使用? (非表?)

他们是如何使用的?

请举例。

2 个答案:

答案 0 :(得分:1)

CSS标题侧属性用于指定标题相对于表格的位置(即表格的上方或下方)。

Syntax:   caption-side: <value> Possible Values:  

* top
* bottom
* inherit
     

初始值:Top适用于:     带标题的表继承:是   媒体:视觉示例:

     标题{caption-side:bottom;
  宽度:自动; text-align:left; }

<style type="text/css">
caption {
  caption-side: bottom;
  width: auto;
  text-align: left;
  }
</style>
<table border="1">
  <caption>This is the caption</caption>
  <tr>
    <td>Try changing the values to see the effect it has on the position of the caption.</td>
  </tr>
  <tr>
    <td><b>Note:</b> If this is not working, your browser might not support the caption-side property. At the time of writing, browser support for the caption-side property was limited.</td>
  </tr>
</table>

答案 1 :(得分:0)

  

此元素应该用于   提供短期标题   表;它不应该被用来   提供表格的描述   结构,就像你可能做的那样   表汇总属性。

caption元素提供了一种以可视方式标记以下table内容的方法(与table的摘要属性不同,后者是不可见的)。它有一个特定于元素的属性align,它非常简陋并且不完全支持(它也被弃用了,因此通常应该避免使用它)。

caption元素每table只能使用一次,并且必须紧跟table开始标记。

虽然标题元素似乎是标记table的最合适的标记,但实际上它的意图是label数据表的方式与您为图片提供标题的方式大致相同在一本书中。但是,在大多数印刷媒体中,插图,图像和表格的标题通常出现在项目之后,而标题元素则出现在表格之前。 caption与CSS的不良样式选项和较差的对齐支持的组合导致许多人选择在具有标题元素1-6的表之前(例如,h3元素)。这使得一些使用辅助技术的人(例如屏幕阅读器)更容易从文档中的标题跳转到标题(有方法可以通过标题导航并在页面上显示标题列表)。但是,应该注意的是,标题实际上是指标题后的整个部分的内容,直到下一个标题所在的位置,而不是页面的一个独立部分,因为caption是。 caption元素是标识table的正确标记,然后,如果您看到人们使用标题,请不要感到惊讶。

示例

这是一个表格标题,提供了一个视觉摘要和标题:

<table border="1">
  <caption>Interest Rates for Young Saver Accounts</caption>
  <tr>
    <th>Account Type</th>
    <th>Interest Rate</th>
  </tr>
  <tr>
    <td>Smart</td>
    <td>From 2%</td>
  </tr>
  <tr>
    <td>Young Saver</td>
    <td>From 1.6%</td>
  </tr>
</table>