HTML caption标签的 align 属性

返回到:HTML caption标签

本节课,我们学习下HTML caption标签的 align 属性。

定义和用法

HTML5 不支持 <caption> align 属性。请使用 CSS 替代。

<caption> 的 align 属性在 HTML 4.01 中已废弃。

align 属性规定 caption 元素的对齐方式。

该属性将 caption 作为块元素向表格的左边、右边、顶部、底部进行对齐。

兼容性注释

THTML5 不支持 <caption> align 属性。请使用 CSS 替代。

CSS 语法:

<caption style="caption-side:bottom"> or <caption style="text-align:left">

在我们的 CSS 教程中,您可以找到更多有关caption-side 属性的细节。

语法

<caption align=”left|right|top|bottom”>

属性值

描述
left标题在表格的左边。
right标题在表格的右边。
top标题在表格的上边。
bottom标题在表格的下边。

浏览器兼容

所有主流浏览器都支持 align 属性。

注意:

  • Internet Explorer 8 支持 “left”, “right”, “top”, 和 “bottom” 值。
  • Internet Explorer 9+ 支持 “top”, 和 “bottom” 值。
  • Firefox 支持 “left”, “right”, “top”, 和 “bottom” 值。
  • Opera 支持 “left”, “right”, “top”, 和 “bottom” 值。
  • Chrome 支持”top”, 和 “bottom” 值。
  • Safari 支持 “top”, 和 “bottom” 值。

实例

带有与底部对齐的 <caption> 元素的表格:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Web176教程(web176.com)</title> 
</head>
<body>

<p>align="left":</p>
<table border="1">
  <caption align="left">My savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>align="right":</p>
<table border="1">
  <caption align="right">My savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>align="top":</p>
<table border="1">
  <caption align="top">My savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>align="bottom":</p>
<table border="1">
  <caption align="bottom">My savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

</body>
</html>

返回到:HTML caption标签

作者:terry,如若转载,请注明出处:https://www.web176.com/html_element/7482.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2022年12月5日
下一篇 2022年12月6日

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注