“HTML表格宽度高度”的版本间差异

2022年8月6日 (六) 09:43的最新版本

HTML 表格的每一列、每一行或整个表格都可以有不同的大小。

使用 style 带有 width 或 height 属性的属性来指定表、行或列的大小。

HTML表格的丰富性

要设置表格的宽度，请将 style 属性添加到 <table> 元素：

示例

将表格的宽度设置为 100%：

<style>
table, th, td {
  border: 1px solid black;
}
</style>
<table style="width:100%">
    <tr>
        <th>名字</th>
        <th>姓氏</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>吉尔</td>
        <td>史密斯</td>
        <td>50</td>
    </tr>
    <tr>
        <td>前夕</td>
        <td>杰克逊</td>
        <td>94</td>
    </tr>
</table>

注意：使用百分比作为宽度的大小单位意味着该元素与其父元素（在本例中为 <body> 元素）相比的宽度。

HTML 表格列宽

要设置特定列的大小，请在or 元素上添加' style 属性： <th> ' <td>

示例

将第一列的宽度设置为 70%：

<style>
table, th, td {
  border: 1px solid black;
}
</style>
<table style="width:100%">
    <tr>
        <th style="width:70%">名字</th>
        <th>姓氏</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>吉尔</td>
        <td>史密斯</td>
        <td>50</td>
    </tr>
    <tr>
        <td>麦克</td>
        <td>杰克逊</td>
        <td>94</td>
    </tr>
</table>

HTML表格行高

要设置特定行的高度，请 style 在表格行元素上添加属性：

示例

将第二行的高度设置为 200 像素：

<style>
table, th, td {
  border: 1px solid black;
}
</style>
<table style="width:100%">
    <tr>
        <th>名字</th>
        <th>姓氏</th>
        <th>年龄</th>
    </tr>
    <tr style="height:200px">
        <td>吉尔</td>
        <td>史密斯</td>
        <td>50</td>
    </tr>
    <tr>
        <td>麦克</td>
        <td>杰克逊</td>
        <td>94</td>
    </tr>
</table>