HTML <caption> align 属

在 HTML 中， 元素通常用于为表格添加标题。通过使用 align 属性，我们可以控制 元素在表格中的对齐方式。在本篇文章中，我们将详细介绍 align 属性的使用方法及示例代码。

语法

<table>
  <caption align="top|bottom|left|right">表格标题</caption>
  <!-- 表格内容 -->
</table>

其中，align 属性可以设置为以下几个值：

• top：将标题置于表格上方
• bottom：将标题置于表格下方
• left：将标题置于表格左侧
• right：将标题置于表格右侧

示例

将标题置于表格上方

// www.javascriptcn.com code example
<table>
  <caption align="top">这是表格标题</caption>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
</table>

将标题置于表格下方

// www.javascriptcn.com code example
<table>
  <caption align="bottom">这是表格标题</caption>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
</table>

将标题置于表格左侧

// www.javascriptcn.com code example
<table>
  <caption align="left">这是表格标题</caption>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
</table>

将标题置于表格右侧

// www.javascriptcn.com code example
<table>
  <caption align="right">这是表格标题</caption>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
</table>

通过以上示例代码，我们可以清晰地看到不同对齐方式下 元素的表现。根据实际需求，选择合适的对齐方式来优化表格布局，提高用户体验。

希望本篇文章能帮助您更好地理解和应用 HTML align 属性。祝您编写出更加美观和功能丰寞的网页！