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:
參考連結：
- 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