HTML5教程-表格宽度设置，最大宽度，自动宽度

HTML表格宽度

参考：html table width

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:

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:

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:

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:

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:

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:

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:

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:

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:

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>

Output: