HTML <colgroup> valign 属性

在 HTML 表格中，<colgroup> 元素用于定义表格列的组合，可以为一组列定义样式、宽度等属性。其中，<colgroup> 元素可以设置 valign 属性，用于控制列中内容的垂直对齐方式。在本文中，我们将深入了解 <colgroup> 元素的 valign 属性的用法和示例。

valign 属性的取值

• top：内容垂直对齐在单元格顶部。
• middle：内容垂直对齐在单元格中部。
• bottom：内容垂直对齐在单元格底部。
• baseline：内容基线对齐在单元格基线。
• sub：内容垂直对齐在下标位置。
• super：内容垂直对齐在上标位置。

示例代码

下面是一个简单的示例代码，演示了如何在 <colgroup> 元素中使用 valign 属性：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>Valign Attribute in Colgroup</title>
</head>
<body>
    <table border="1">
        <colgroup>
            <col style="background-color: lightblue;" valign="top">
            <col style="background-color: lightgreen;" valign="middle">
            <col style="background-color: lightcoral;" valign="bottom">
        </colgroup>
        <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>
    </table>
</body>
</html>

在上面的示例中，我们在 <colgroup> 元素中定义了三列，并为每列设置了不同的背景颜色和 valign 属性。可以看到每列中的内容根据 valign 属性的取值进行了垂直对齐。

总结

通过本文的学习，我们了解了在 HTML 表格中使用 <colgroup> 元素的 valign 属性的方法和示例。这样可以更灵活地控制表格中列的样式和对齐方式，提升表格的可读性和美观性。希望本文对您有所帮助！