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:
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:
参考链接：
- QQDocs html table width
- Yuque html table width
- Nowcoder html table width
- Kdocs html table width
- 51CTO html table width
- Gitee html table width
- Developer Weixin html table width
- Leetcode html table width