資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在表格中設定 td 的固定寬度？
要將固定寬度設定為表格的 <td> 元素，我們可以使用多種方法。但在那之前，我們需要了解 <td> 元素。
HTML <td> 元素定義了 HTML 表格中的資料單元格。它用於在表格中顯示資料，例如文字、影像或連結。每個 <td> 元素都包含在 <tr> 元素中，後者表示表格中的行。
固定表格單元格寬度
當表格在網頁上顯示時，保持表格外觀一致且易於閱讀非常重要。我們可以透過為表格中的 <td> 元素設定固定寬度輕鬆實現這一點。透過這種方式，我們確保表格中的每一列都具有相同的寬度，從而使使用者更容易查詢資訊。
設定固定 <td> 寬度的幾種方法
固定 <td> 寬度的示例
以下示例將透過程式碼說明每種方法。
使用 HTML width 屬性
要設定單元格寬度，我們可以在 <td> 標籤內使用 HTML width 屬性以及指定畫素值。
<!DOCTYPE html>
<html>
<body>
<table border = "1px">
<tr>
<td width="100px">Content 1</td>
<td width="150px">Content 2</td>
</tr>
<tr>
<td>Content 3</td>
<td>Content 4</td>
</tr>
<tr>
<td>Content 5</td>
<td>Content 6</td>
</tr>
</table>
</body>
</html>
使用 CSS width 屬性
要設定單元格寬度，我們可以在 <td> 標籤上使用 CSS width 屬性以及指定畫素值。
<!DOCTYPE html>
<html>
<head>
<style>
td {
width: 100px;
}
</style>
</head>
<body>
<table border = "1px">
<tr>
<td width="100px">Content 1</td>
<td width="150px">Content 2</td>
</tr>
<tr>
<td>Content 3</td>
<td>Content 4</td>
</tr>
<tr>
<td>Content 5</td>
<td>Content 6</td>
</tr>
</table>
</body>
</html>
更新於: 2024年8月22日
9K+ 瀏覽量
廣告