HTML添加表格脚注

76次阅读
没有评论

在HTML表格中,可以使用<caption>元素来添加表格标题和脚注。<caption>元素应该位于<table>元素的开始标签和第一个<tr>标签之间。

以下是一个示例HTML页面,其中包含一个表格和一个带有表格脚注的标题:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Table Caption Example</title>
    <style type="text/css">
        table {
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            border: 1px solid black;
            padding: 10px;
            text-align: left;
        }

        caption {
            caption-side: bottom;
            font-style: italic;
            text-align: center;
            padding-top: 10px;
        }
    </style>
</head>
<body>
<table>
    <caption>My Table Caption</caption>
    <thead>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
        <td>Row 1, Cell 3</td>
    </tr>
    <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
        <td>Row 2, Cell 3</td>
    </tr>
    </tbody>
</table>
</body>
</html>

在上述示例中,<caption>元素被用来添加一个表格脚注。caption-side属性被设置为bottom,以将脚注放置在表格底部。text-align属性被设置为center,以将脚注文本居中。padding-top属性被设置为10px,以在脚注文本和表格底部之间添加一些空白。

注意,在<caption>元素之前添加的任何文本都将被视为表格标题,并显示在表格的顶部。

正文完
 
评论(没有评论)