HTML表格宽度|极客教程

HTML表格宽度

HTML表格是网页设计中常用的元素之一，可以用来展示数据、创建布局等。表格的宽度是一个重要的参数，可以通过不同的方式来设置表格的宽度，本文将详细介绍HTML表格宽度的不同设置方式和示例代码。

1. 设置表格宽度为固定值

可以通过width属性来设置表格的宽度为固定值。示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>固定表格宽度示例</title>
</head>
<body>
    <table border="1" width="400">
        <tr>
            <td>how2html.com</td>
            <td>示例</td>
        </tr>
        <tr>
            <td>示例</td>
            <td>how2html.com</td>
        </tr>
    </table>
</body>
</html>

Output:

HTML表格宽度

2. 设置表格宽度为百分比

除了固定值，还可以通过百分比来设置表格的宽度。示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>百分比表格宽度示例</title>
</head>
<body>
    <table border="1" width="50%">
        <tr>
            <td>示例</td>
            <td>how2html.com</td>
        </tr>
        <tr>
            <td>how2html.com</td>
            <td>示例</td>
        </tr>
    </table>
</body>
</html>

Output:

HTML表格宽度

3. 根据内容自适应宽度

如果不指定表格的宽度，表格的宽度会根据内容自动调整。示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>自适应宽度表格示例</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>how2html.com</td>
            <td>示例</td>
        </tr>
        <tr>
            <td>示例</td>
            <td>how2html.com</td>
        </tr>
    </table>
</body>
</html>

Output:

HTML表格宽度

4. 设置表格列宽

除了设置整个表格的宽度，还可以设置表格的每一列的宽度。示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>设置表格列宽示例</title>
</head>
<body>
    <table border="1">
        <tr>
            <td width="100">how2html.com</td>
            <td width="200">示例</td>
        </tr>
        <tr>
            <td width="200">示例</td>
            <td width="100">how2html.com</td>
        </tr>
    </table>
</body>
</html>

Output:

HTML表格宽度

5. 使用CSS设置表格宽度

除了在HTML中直接设置表格的宽度，还可以使用CSS来设置表格的样式，包括宽度。示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>CSS设置表格宽度示例</title>
    <style>
        table {
            width: 80%;
            border: 1px solid black;
        }
        th, td {
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>列1</th>
            <th>列2</th>
            <th>列3</th>
        </tr>
        <tr>
            <td>how2html.com</td>
            <td>示例</td>
            <td>123</td>
        </tr>
        <tr>
            <td>示例</td>
            <td>how2html.com</td>
            <td>456</td>
        </tr>
    </table>
</body>
</html>

Output:

HTML表格宽度

6. 设置表格的最大宽度

有时候我们需要限制表格的最大宽度，可以使用max-width属性来设置。示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>最大宽度表格示例</title>
    <style>
        table {
            max-width: 500px;
            width: 100%;
            border: 1px solid black;
        }
        th, td {
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>列1</th>
            <th>列2</th>
            <th>列3</th>
        </tr>
        <tr>
            <td>how2html.com</td>
            <td>示例</td>
            <td>123</td>
        </tr>
        <tr>
            <td>示例</td>
            <td>how2html.com</td>
            <td>456</td>
        </tr>
    </table>
</body>
</html>

Output:

HTML表格宽度

7. 使用混合方式设置表格宽度

可以使用混合方式来设置表格的宽度，例如固定宽度和百分比结合使用。示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>混合方式表格宽度示例</title>
    <style>
        table {
            width: 80%;
            max-width: 600px;
            border: 1px solid black;
        }
        th, td {
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>列1</th>
            <th>列2</th>
            <th>列3</th>
        </tr>
        <tr>
            <td>how2html.com</td>
            <td>示例</td>
            <td>123</td>
        </tr>
        <tr>
            <td>示例</td>
            <td>how2html.com</td>
            <td>456</td>
        </tr>
    </table>
</body>
</html>

Output:

HTML表格宽度

8. 表格自适应屏幕宽度

可以通过设置表格的宽度为100%来使表格自适应屏幕宽度。示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>表格自适应屏幕宽度示例</title>
    <style>
        table {
            width: 100%;
            border: 1px solid black;
        }
        th, td {
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>列1</th>
            <th>列2</th>
            <th>列3</th>
        </tr>
        <tr>
            <td>how2html.com</td>
            <td>示例</td>
            <td>123</td>
        </tr>
        <tr>
            <td>示例</td>
            <td>how2html.com</td>
            <td>456</td>
        </tr>
    </table>
</body>
</html>

Output:

HTML表格宽度

9. 设置单元格宽度

除了设置表格和列的宽度，还可以设置单个单元格的宽度。示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>单元格宽度示例</title>
    <style>
        table {
            width: 80%;
            border: 1px solid black;
        }
        th, td {
            border: 1px solid black;
            text-align: center;
        }
        .custom-width {
            width: 200px;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>列1</th>
            <th>列2</th>
            <th>列3</th>
        </tr>
        <tr>
            <td>how2html.com</td>
            <td class="custom-width">示例</td>
            <td>123</td>
        </tr>
        <tr>
            <td>示例</td>
            <td>how2html.com</td>
            <td>456</td>
        </tr>
    </table>
</body>
</html>

Output:

HTML表格宽度

10. 表格宽度调整为自适应最大宽度

在表格内容超出指定宽度时，可以自动调整表格的宽度，示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>自适应最大宽度示例</title>
    <style>
        table {
            table-layout: auto;
            width: 100%;
            border: 1px solid black;
        }
        th, td {
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>长内容列1</th>
            <th>长内容列2</th>
            <th>长内容列3</th>
        </tr>
        <tr>
            <td>how2html.com</td>
            <td>示例示例示例示例示例示例</td>
            <td>123</td>
        </tr>
        <tr>
            <td>示例示例示例示例示例示例</td>
            <td>how2html.com</td>
            <td>456</td>
        </tr>
    </table>
</body>
</html>