HTML网页中如何设置表格的宽和高度

创作时间:

作者:

@小白创作中心

HTML网页中如何设置表格的宽和高度

引用

来源

https://docs.pingcode.com/baike/3077094

在HTML网页中设置表格的宽和高度的核心要点包括：使用CSS样式、使用HTML属性、结合百分比和像素单位。其中，使用CSS样式是推荐的做法，因为它能够提供更灵活和强大的控制，使得网页更具响应性和美观性。

一、使用CSS样式

使用CSS样式设置表格的宽和高度是最推荐的方法，因为它可以分离内容与样式，提高代码的可维护性。你可以在外部CSS文件中定义样式，或者在HTML文件的<style>标签中直接嵌入样式。

1. 嵌入式CSS

你可以在HTML文件的<head>部分使用<style>标签来嵌入CSS样式。例如：

<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            width: 80%; /* 设置表格宽度为父容器的80% */
            height: 400px; /* 设置表格高度为400像素 */
            border: 1px solid black; /* 设置边框 */
        }
        th, td {
            border: 1px solid black; /* 设置单元格边框 */
            padding: 10px; /* 设置单元格内边距 */
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
    </table>
</body>
</html>

2. 外部CSS文件

为了更好地管理样式，你可以将CSS代码放在外部文件中。例如，创建一个名为styles.css的文件：

table {
    width: 80%; /* 设置表格宽度为父容器的80% */
    height: 400px; /* 设置表格高度为400像素 */
    border: 1px solid black; /* 设置边框 */
}
th, td {
    border: 1px solid black; /* 设置单元格边框 */
    padding: 10px; /* 设置单元格内边距 */
}

然后在HTML文件中通过<link>标签引用这个CSS文件：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <table>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
    </table>
</body>
</html>

二、使用HTML属性

尽管不如CSS灵活，但你仍然可以使用HTML属性来设置表格的宽和高度。在HTML4中，<table>标签支持width和height属性。不过，这种方法在HTML5中被弃用，不推荐使用。

<!DOCTYPE html>
<html>
<head>
    <style>
        th, td {
            border: 1px solid black; /* 设置单元格边框 */
            padding: 10px; /* 设置单元格内边距 */
        }
    </style>
</head>
<body>
    <table width="80%" height="400px" border="1">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
    </table>
</body>
</html>

三、结合百分比和像素单位

在设计响应式网页时，使用百分比和像素单位的结合能够更好地控制表格的宽和高度。

1. 使用百分比

百分比单位相对于父容器的大小进行计算，适合用于响应式设计。

<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            width: 100%; /* 表格宽度为父容器的100% */
            height: 50vh; /* 表格高度为视口高度的50% */
            border: 1px solid black;
        }
        th, td {
            border: 1px solid black;
            padding: 10px;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
    </table>
</body>
</html>

2. 使用像素

像素单位适合用于固定尺寸的设计。

<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            width: 800px; /* 表格宽度为800像素 */
            height: 400px; /* 表格高度为400像素 */
            border: 1px solid black;
        }
        th, td {
            border: 1px solid black;
            padding: 10px;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
    </table>
</body>
</html>

四、使用媒体查询进行响应式设计

为了使表格在不同设备上都能良好显示，使用媒体查询进行响应式设计是一个很好的方法。媒体查询允许你根据不同的屏幕尺寸应用不同的CSS样式。

<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            width: 100%;
            height: auto;
            border: 1px solid black;
        }
        th, td {
            border: 1px solid black;
            padding: 10px;
        }
        @media (max-width: 600px) {
            table {
                width: 100%; /* 对于小屏幕设备，表格宽度为100% */
                height: auto; /* 自动适应内容高度 */
            }
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
    </table>
</body>
</html>